移り変わりが激しい世界なので、去年まで当たり前のようにやっていたことを、今年はまったくやらなくなったりすることはよくある。僕は遂に諦めてCSSの定義(プロパティーと値のセット)を書く順序をアルファベット順に統一した。去年はシンプルなクラス名からBEMへの変更だった。

CSSで定義を書く順序は論理的な理由を持つ順序が良いとは今でも思っている。関連するプロパティーが並んでいれば、そのルールセットがどういう振る舞いをするのかわかりやすいはずだ。そういう意味でCSS 2.1仕様書に出てくる順で書くというのは、仕様書が論理的な構造を持って書かれていることを考えると理にかなっている。

しかし時代は変わった。

CSS 3の時代になり、仕様書はモジュール単位で散在するようになり、実装が出てから安定版に進むようになり、スナップショットは作られなくなった。こうなるとどのような順で書くか仕様書を基準に明確に規定することは難しくなる。CSS 2.1をベースに考えてモジュール化された仕様の位置を決めることはできなくはないが、AnimationなどといったCSS 2.1には欠片も存在しないようなものの位置は決めることができない。

かといって無作為な順番で書くというのは読みづらさを加速する。落とし所としてはアルファベット順がデメリットが少ないという点と賛同を得やすいという点で優れている。そうでなければルールセットごとにひとつの定義しか書かないDeclaration Just Onceアプローチだろうか。


Declaration Just Onceアプローチは一度(まだ一度だけ)使ってみた。これはCSSプリプロセッサーと、そしてオブジェクト志向と食合せが非常に悪い。しかしひたすら素のCSSで書くというケースではそこそこうまく行き、保守性が高いことがすこしわかってきた。

CSSファイルでセレクターが散在することが懸念だったが、2006年当時と違ってあるセレクターでの問題はCSSファイルと格闘するわけではない。余程のことがなければ開発者ツールで格闘するので、セレクターがあっちこっちに散らばっていてもほとんど問題になることはなかった。

来年にはうまくいけばCSSプリプロセッサーを捨てることも不可能ではないと感じている。その際にはCSSの定義を書く順序……というかCSSの書き方という単位でまた宗旨変えしそうだ。


こういった宗旨替えは誰しも毎年(どころか四半期に一度くらい)何かしらやっていることと思う。みなネタが豊富そうなので、来年は是非アドベント・カレンダーとして作りたい。