後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。
BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。
もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。
典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してBEMに則って実装されている、BEM公式サイトにあるMethodologyのページのコードを見てみれば、「これは本当に僕らが頭のなかに思い描くコンポーネントなのだろうか？」という疑問が浮かぶ。すべてがコンポーネントであるとはこういうことだ。本当に確信をもって、「これこそがコンポーネントである」と認識ができるのは一部分でしかない。
僕は以前までは、あくまでCSS設計の作法に則って、すべてをコンポーネントとして表現しようと努めてきた。デザイナーが作ったデザインカンプからルールを見い出して自分なりに解釈し、ページに境界を引いて、名前をつけてコンポーネントとして分解する。これを隅から隅まで徹底した。その甲斐あってか、この設計はある程度は機能しているかに思えた。
しかしある時、テンプレートの条件分岐が増えて、複雑な仕様になっていくにつれて、なんとなくうまくいかない感じが浮かび上がってきた。たとえばそれは——
- ひとつのコンポーネントとして表現していたセクションが分かれて別々の箇所に配置されることになったので、コンポーネントをふたつに分解して作り直すことになったり
- だいたい同じような感じだけど、微妙に違う——それも偶然似ているだけなので共通化できないパターンが登場して、個別にコンポーネントを何種類も作ることになったり
- 部分的に見るとこれまで繰り返し何度も登場しているように思えるスタイルなのに、コンポーネントとしては別物なので、都度新しくコンポーネントを書き足さないといけなかったり
- 本当にちょっとした要素を追加するために、ちょうどいい既存のコンポーネントが存在しなければ、わざわざそれだけのために新しいコンポーネントを作ることになったり
というようなわけで、見た目にはたいしたことのない変化のために、結果として、割に合わない膨大な数のコンポーネントができあがってしまった。これはきっと、なにかが間違っている。
問題は、すべてがきっちりとコンポーネント化されたデザインができていないこと、ではない。デザインとコードとで、ルール化の観点がズレていることだ。
この場合、CSS設計上のコンポーネントの多くが、デザイナーの頭のなかにあるイメージと非対称的な構造になっている。エンジニアの頭のなかにしかない、元のデザインを独自に解釈した「別物」を作り出してしまっている。つまりこれでは、変更に対応できるかという以前に、現状に対応できていない。今のデザインが正しく表現されていない。
たまたま近くにあっただけのものをひとつのコンポーネントとしてまとめたり、偶然そうなっているだけのものに意図を見い出して抽象化したりして、変更が発生してから、間違った構造化がなされていたことに気づく。あるいは、もっと細かなルールが見落とされてしまう。こうした取り違えが、コンポーネントありきの発想によって誘発される。コンポーネント化するということは、解釈を加えることだ。だから、変更に対応するたびに、間違った解釈を修正するという不必要な痛みが伴う。
CSS設計は、コンポーネントというものに固執しすぎていた。
つまりこれは、実装技術側の方法論的問題だ。すべてをコンポーネントにするアプローチ自体に無理がある。本当にそれがコンポーネントだと言い切ることができなかったとしても、コンポーネントとして表現する以外にやりようがない。これが設計を歪ませるのだ。ではどうするか。
ページはもっと「一緒くた」になっていると考えていいと思う。不可分な要素もあって然るべきであり、必要を超えた構造化は害になる。その方が現実に即している。
コンポーネントとは別に、より即物的な表現方法が必要だ。そういう意味でも、ユーティリティファーストなのだ。今やBootstrapでさえ、ユーティリティファーストとまではいかなくても、大量のユーティリティクラスを取り入れている。
ビジュアル的な観点では、デザインルールはコンポーネントごとに「区切られている」わけではない。サイト全体など特定のコンテキストにおいて一貫した印象を与えるために、意図的に共有している要素がある。それはたとえば、タイポグラフィや余白、色やグラデーション、形状や影といったもの。ページ上のあらゆる要素は、コンポーネントであるかどうかという以前に、基本としてこれらのマナーに則っている。
だとすれば、セレクタという観点においても、これらそのものを直接的に指し示すクラスがあってもいいはずだ。わざわざコンポーネントのクラスを経由する必要はない。必ずしも「セマンティック」なクラス名でなかったとしても、これもまたひとつのルールである。