読者です 読者をやめる 読者になる 読者になる

CSSのカスケーディングを禁止する

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: 1px solid #999;
}

/* error */
.bind-rule {
  padding: 0px;
}
/* error */
(.bind-rule) {
  border: none;
}

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

カスケーディング

CSSCascading 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は作られた。

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

参考にしたサイト