[OOCSS] コンテナとコンテンツを分離する（Separate Container and Content）

[manabuyasuda]

コンテナとコンテンツを分離する（Separate Container and Content）

レゴのように再利用できるコンポーネントライブラリでページを作成するのがOOCSSの手法です。そのための重要な原則のひとつが「コンテナとコンテンツの分離」です。
コンテンツはテキストや画像、リストなどの小さなコンポーネントでコンテナはコンテンツを包むためのコンポーネントと言えます。

コンテナとは何か？

例えばこのようなHTMLを見たことはありませんか？

<div class="container">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

これはBootstrapのグリッドレイアウトです。これらはコンテンツ（テキストや画像など）を入れるため機能だけを持っています。コンテンツに何が入るのかコンテナは知りませんが、それでも問題なく機能します。つまり、コンテナはどんな場所でも使えることになります。

OOCSSではグリッドで横幅をコントロールすることを推奨しています。逆に高さはコンテンツに依存するためコントロールするべきではないとしています。この場合の高さのコントロールとはheightを手動で書いてしまうことを指しています。例えばtableやflexプロパティのような高さの揃うCSSやJavaScriptで高さを揃える処理は当てはまりません。

コンテンツとは何か？

コンテンツはページの内容のことです。コンテンツは以下のようなコンポーネントで表現されます。

• 見出し（見出しレベルに関わらず、同じ見た目にできる）
• リスト（デフォルトのリスト、クリックを促す、アイコン付き）
• ヘッダーとフッター
• ボタン
• mediaオブジェクト（画像とテキストが横並びになっている）

クラスセレクタを賢く使う

OOCSSでは基本的にクラスセレクタのみを使います。IDセレクタではドキュメント内で1回しか指定できませんし、要素セレクタや属性セレクタだと使える状況を限定してしまいます。

例えば、あるクラスの中にある<h2>要素にスタイルを指定したとします。

.box h2 {}

このスタイルを以下のようなHTML構造でも使いたい場合、

<div class="box">
  <h3>見出し</h3>
</div>

<h3>に対しては適応されないので、このように変更しました。

.box h2,
.box h3 {}

しかし、このやり方では適応したい場面が出てくるたびにCSSを変更する必要がありますし、コードも増えていきます。
はじめからクラスセレクタに指定しておけば、どんな要素であっても、どんな要素で囲んでいてもスタイルは適応されます。なので、クラスセレクタに要素セレクタを結合する必要もありません。

/* Good */
.box-heading {}

/* NG */
h2.box-heading {}

また、以下のようにセレクタをつなげて指定する必要もありません。クラスセレクタ間の依存関係も作らないほうが汎用的に使えるからです。

/* NG */
.box .box-heading {}