定義ごとにまとめたルールセット

Declaration Just Once

CSS, DRY, and Code Optimizationという記事を読んだ。この記事ではメンテナンス性を重視したCSSの最適化について書かれている。いわゆる自然な書き方、つまりHTMLの構造をストレートに反映させたルールセットごとに定義(プロパティーと値のセット)を書いていくよりも、定義ごとにルールセットを作成してそれにセレクターを複数割り当てていく方が優れているという。

具体的なまとめ方はCSS: Using every declaration just onceというGoogleのドキュメントに詳しい。タイトルの通り、同じ定義が二度と出てこないように書いていくようだ。

サイズ的なメリットはともかくとして、メンテナンス性という面では確かに良さそうではある。CSSにおける保守は、定義の修正と追加が大半を占めるので、定義がユニークであるとどこをどう直せば良いのかすぐにわかるだろう。

デメリットとしては自然でない書き方であることもそうだが、メンテナンス性においても若干の不安はある。クラス名のリネームはぎりぎり何とかなるだろうが、既存のルールセットと多くを共有するような新たな要素を追加した場合、その要素を表現するセレクターを各ルールセットに追加していく必要がある。これはかなりの注意を必要とする作業な上、機械化もしづらい。


印象としては、修正や更新には強いものの、追加や削除に弱く、スケールしないんじゃないかなというものだ。この記事の著者であるJens MeiertはコンパクトなCSSを好むような人だと思うので、そういう視点でのものでもありそうだ。小規模のウェブサイトには向いた書き方なのかもしれない。