"モダンなCSS設計パターンを考える" セッションのメモ

HTML5 CONFERENCE 2013 に行ってきて、"モダンなCSS設計パターンを考える" という谷拓樹さんのセッションを聴いてきたのでそのメモを残しておこう。
当日のセッションはここ（ルーム1A - HTML5 カンファレンス 2013 - YouTube ）で観れます。
当日使われたスライドはモダンなCSS設計パターンを考えるに公開されています。

Goals of Better CSS Architecture

以上のこと実現するために Modular CSS を使う

レゴのようにモジュールを分離する。
OOCSS を組む時はレゴを作った時のことを思い出すんだ！

二つでは規則性が見えない。三つあれば、規則性が見えてくる。
CSS のモジュールも規則性がみえてくれば、モジュールとして再利用する価値がある。

// 2つでは規則性が不確か
3,6

// 3つあると規則性が見えてくる
=> 3,6,9.. (3づつ増える)
=> 3,6,12.. (倍に増えていく)

ex) msg にエラースタイルを追加するとき

<div class="msg msg-error">
  <p>...</p>
</div>

ex) msg の子要素に新たな要素が追加されるとき

Bad) msg の子要素に新たな要素が追加される時のことを考えてない
（ul だけが追加されるとは限らず、dl や div が挟まることが今後考えられる。範囲の広いリスクがある。）

追加される前

<div class="msg">
  <h2>...</h2>
  <p>...</p>
</div>

.msg p {
  margin-top: ...;
}

追加された時

<div class="msg">
  <h2>...</h2>
  <p>...</p>
  <ul>
    <li>...</li>
  </ul>
</div>

.msg ul,
.msg p {
  margin-top: ...;
}

Good ) msg の子要素に新たな要素が追加される時のことを想定している
（はじめから h2, p にクラスを振っておいたほうがいいねというアレな話）

<div class="msg">
  <h2 class="msg-title">...</h2>
  <p class="msg-pragraph">...</p>
  <ul class="msg-list">
    <li>...</li>
  </ul>
</div>

.msg .msg-list {
  margin-top: ...;
}

.msg .msg-paragraph {
  margin-top: ...;
}

BEM の中の命名規則が SMACSS や OOCSS のモジュールの概念に沿っていて良い.. という話だったけど、あまり話が拾えなかった。以下にメモ取ってた内容だけ残しておく。

BEM の基本的な命名ルール:

.block {
}

.block_element {
}

.block_modifire {
}

.block_element_modifire {
}

Pure の作りも参考になると思う。

やり方は色々出てきてるけど、コードに一貫性を持つことが最重要

セッションを聴いた後、意識の高まりを感じる。
BEM と OOCSS のドキュメントをあまり読んだことないので、ちょっと読んでみよう。
今だと BEM Advent Calender とか見るといいかも。

Good ) msg の子要素に新たな要素が追加される時のことを想定している

のような設計を心がけよう。

CHROMA