CSSの設計に関する雑記

CSSはとても壊れやすいです。
この問題を克服するための手段として、クラス名やディレクトリ構造に対して運用ルールを設けるといった手段が取られてきました。

機械的なルールの限界

時に、運用ルールは、UI（ユーザーインターフェース）から離れた、機械的なルールを採用してしまうことがあります。
この例は、CSSのクラス名の命名規則の中に見ることができ、連番や過度な省略表記といった符合的なクラス名を生み出します。

/* 例:クラス名に連番を当てる */
.btn-01 {}
.btn-02 {}

/* 例:省略表記の強制 */
.nv { /* navigation */ }

こうした機械的なルールとその成果物（コード）は、次の問題をはらんでいます。

・CSSのクラス名から役割が推測できないため、コードの読み手が、コードから機能や構造を理解することが困難になる。
・CSSのクラス名と役割を紐付けて記憶することが難しいため、一つの機能に対して複数のクラスが重複して定義される、といった混乱が生じる。

プロダクトは時間経過とともに、複雑度が増していきます。それはコードの肥大化・人員の変化など、様々な要因からもたらされます。複雑度が増すにつれて、機械的なルールに注意を払うことが難しくなります。そして、実践が困難になり次第に機能しなくなっていきます。

少々乱暴ですが、機械的なルールとその成果物は、記憶することが難しい。そのため、実践するための認知的負荷が高いため、いずれ限界に到るのだと思います。

人はあいまいに記憶する

池谷 裕二さんの著書「進化しすぎた脳―中高生と語る「大脳生理学」の最前線」（※）によると、人はあいまいに記憶する生き物だそうです。
知覚した情報を正確に記憶することが苦手であり、その傾向は他の動物と比べても顕著である。そして、人はあいまいに記憶するからこそ、抽象的な思考が得意です。
正確に記憶できない代わりに何度も学習します。学習するうちに共通する特徴量を抽出して、つまり抽象化して憶えていきます。
人の認知の応用力、例えば様々な種類の犬を犬として認識できる、といった応用力はあいまいな記憶によるものなのです。

こうした記憶の特徴を見ると、一般的に記憶が難しいと言われる事柄とその記憶術は、上述の仕組みからなるのかもしれません。
例えば、われわれは数字の羅列を記憶することが苦手ですが、いくつかのまとまりに分けたり語呂による意味づけを行うことで、憶えやすくなります。

機械的なルールの憶えづらさの根底も、同じくこの仕組みに基づいているからだと思います。機械的なルールからの成果物は、そこから意味のある構造を見出すことが困難です。これは、抽象化して捉えることが困難ということであり、あいまいに記憶することを疎外するのではないでしょうか。

※ 進化しすぎた脳―中高生と語る「大脳生理学」の最前線 (ブルーバックス) 新書 / 池谷 裕二

コンテキストに基礎づけられたコンポーネントベースの設計方法

あいまいに記憶するわれわれ人にとって、CSS設計にコンポーネントベースの設計方法は、理に適っていたのだと思います。
コンポーネントベースの設計は、UIの構造に基づいて行われます。UIの基づき諸要素を構造化し、そこからCSSにて実践可能なルールを構築します。実践可能なルールとは、クラスの命名規則やディレクトリ構造といった、実際のコーディングに使用可能なルールを指します。
こうして構築されたルールに基づき実装することで、コードからその構造を見出すことが可能となり、記憶しやすさに繋がるのではないでしょうか。

CSS設計という言葉

こうして考えてみると、CSS設計という言葉はとても窮屈に感じます。
CSS設計は、CSSの領域だけでは成り立たちません。UIの設計と密接に関わるし、実装の面においても、HTMLやJavaScriptと関連づけて検討する必要があります。
それでもCSS設計は純粋にCSSについての設計であるならば、その対象領域はかなり限定されるはずです。
では、どんな名称が適切かというと難しいのですが、CSS設計という言葉を使う時は、どういう意図を持ってその言葉を使うのか、自覚的に用いる必要があるかもしれません。