rework-rule-bindingという、CSSのカスケーディングを禁止する構文を追加するReworkプラグインを書いた。

Rework

Reworkは、@tjholowaychukや@necolasらが立ち上げているプロジェクト。Reworkのプラグインを書くことによって、開発者は独自のCSSのプリプロセスを定義することができる。Twitter社は、twitter.comでReworkで作ったプリプロセッサーを使用しているらしい。

rework-rule-binding

rework-rule-bindingは、CSSにカスケーディングを禁止する構文を提供する。

(.bind-rule){padding:15px;border:1pxsolid#999;}/* error */.bind-rule{padding:0px;}/* error */(.bind-rule){border:none;}

このように、丸かっこ「()」でセレクタを囲むとそのルールセットは束縛（binding）され、カスケーディングできなくなる。

カスケーディング

CSS（Cascading Style Sheets）はカスケーディングという機能により、スタイル指定が段階的に引き継がれる。

rework-rule-bindingはそのカスケーディングを禁止する。これはCSSの思想を否定することかもしれない。しかしCSSの設計が破綻しやすい原因として、カスケーディングが一役買っているように思う。そもそも、CSSのような宣言的に記述する言語はそこで定義されたもの（CSSの場合ルールセット）の上書きはされるべきではない。

アート活動

rework-rule-bindingは概念実証として作ったアート作品みたいなもので、 普段の考え方から若干ズレた存在を認識することで、既存の道具の有り様を捉え直せれば良いかなと思ってつくった。

CSSの設計については多くの人に語られており、OOCSS、BEM、SMACSSのように様々な思想（概念）が生み出されてきた。しかしこれらの思想は、CSS職人たちが長年の経験から導き出したもので、初心者がこれを知ったところですぐに実践できるものではない。それに僕には、どれもただの命名規則やコーディング規約のようなものに思えた。

またSassやLess、StylusといったCSSプリプロセッサーはCSSに変数やmixin、条件文等の機能を追加し、CSSをプログラマブルに記述できるようにした。しかしこれらのプリプロセッサーはCSSにシンタックスシュガーを定義したものに過ぎず、DRYを加速させることはできるが本質的にCSSの設計を良くするものではない。

理想的なCSSとは何か。CSSに限った話ではない。今自分が使っている技術、道具は自分にとって一体どういう存在なのか、ということに考えが行くようになれば良い。そして時にはその技術の思想さえも疑い、より良いものにしたい。このようなことを考えてrework-rule-bindingは作られた。

ここまで書いたことは全部嘘で、本当は何も考えてなくて単純に面白ければいいと思ってつくった。

参考にしたサイト

• Custom CSS preprocessing
• CSSプリプロセッサーの必要性
• Rack::Multiplexer