本当のCSS設計、もしくはWebページのデザインプロセス

CSSの設計 = セレクタ名をどう付けるか、って思っている人が多いので、年も明けたしここらで一度「CSSを設計する」とはどういうことか、考えていることをまとめてみる。

セレクタ名をどう付けるか

CSSのルールセットは現状全てグローバル定義なので、上手いセレクタ名を付けることで衝突を回避する必要がある。 そのための手法として、SMACSSでは.is-**とか.l-**みたいにプリフィックスを付けたり、BEMみたいに.Block__Element--Modifierのような独特な記法でネームスペースを設けたりする。

CSSは、HTMLのどの要素にどんなスタイルを当てるか、という風に宣言的に記述する言語だ。 この特性ゆえに開発者は、このスタイルをどこの要素に適応させるべきかと考え、セレクタ名を付け、HTMLの属性値に書く。

しかし、この「セレクタ名をどう付けるか」と考えることが、Webページのデザインをする上で間違った思考なのではないか。

デザインプロセス

モノを作るときに最も大切なのは「コンセプト」だと大学の授業で聞いた。 デザインをしていく思考は、

  1. まずコンセプト、こういうモノが作りたいという欲求があって
  2. それに合わせてどうデザインするかという意図が生まれ
  3. 実装に落とし込んでいく

という流れだと思う。 このように、デザインはトップダウンに行われるべきだ。

Webページの場合

上記の3つをWebページのデザインに当てはめると、

  1. こういうサイトを作りたいという欲求があって
  2. デザインの意図から自然とコンポーネントの名前が決まり
  3. その名前のセレクタで定義したルールセットにプロパティ宣言を記述する

という流れになる。

ここで大切なことは2つある。 ひとつは、なぜこのようなデザインになったのかをCSS記述者が知らないとセレクタ名が自然と出てこないということ。 デザインの意図を知らずに、見た目だけで再利用可能なルールセットを定義しようとするから、「ここの色を変えたらあそこの色まで変わってしまった」という事態が起こる。 同じ赤色でも、強調を表す場合とエラーを示している場合があったりする。 これらのスタイル(見た目)が同じだからと言って、同じ名前を付けてしまうのはデザインの意図を理解していないからだ。

そしてもうひとつが、セレクタ名がデザインの意図から自然と決まるので、それに合わせてプロパティを記述するということ。 これは今開発者が悩んでいる「セレクタ名をどう付けるか」という考えとは逆である。 そもそも、セレクタ名をどう付けるか考えることは、ボトムアップ的な考えで、デザインをするトップダウンなプロセスとは異なる。

デザインの意図を正しく理解できれば、意味を持ったセレクタ名が自然と決まるものだ。


以上、理想論でした!

実際の現場はこう上手くはいかないと思う。自分ひとりで作っているサイトでもない限り、CSSを書く人は渡されたpsファイルを見てどう作ろうかと考えるだろう。 また、デザインの変更は絶えず行われるので、修正に耐える設計、というものも考えないといけない。

上記の理想のプロセスをおこなうために、僕はCSSプリプロセッサーの他のルールセットを継承する機能(Sassでいう@extend)が使えると思っていて、そのために独自のプリプロセッサーを作ったりもしている。 開発時には素早いデザインの修正に耐えれるような、細かく、見た目の性質を表したルールセットを定義し、本番時にはそれらをまとめた(継承した)意味を持つ単位のルールセットを定義する。 このルールセットの分割の粒度がCSS設計の本質だと思っている。