Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

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

最初に

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

モダンなCSS設計パターンを考える

Goals of Better CSS Architecture

  • 予測しやすい
  • 再利用しやすい
  • 保守しやすい
  • 拡張しやすい

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

OOCSS - Nicole Sullivan

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

Rule of Three

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

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

SMACSS - Jonathan Snook

  • カテゴライズ
  • 命名規則
  • HTML と CSS の分離

発表者のアプローチ

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 - Yandex(ロシア)

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

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

.block {
}

.block_element {
}

.block_modifire {
}

.block_element_modifire {
}

モジュール思考の CSS の設計の参考に良い

各プロジェクトのスタイルガイドも参考になる

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

スタイルガイドの更新を継続的に行うために

発表者から最後に一言

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

最後に

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

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

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