Objectのカプセル化
Capsule and Separation CSS
オブジェクトやモジュール、コンポーネント、パーツなど、Webサイトのデータを表示するための「部品」のカプセル化の方法を、ガイドとして3つ紹介します。
部品1つに対しファイル1つ作成する事で、ファイルの最少化を試みます。
1・対象範囲のラップ
もっともシンプルなカプセル化の方法です。
スタイリングしたい範囲をdiv要素でラップして、部品としての名前を与えます。
内部の構成部品のすべてに、親のObjectの名前を継承して命名します。
※サンプルはハイフンで語句連結していますが、BEM推奨の記法に置き換えても問題ありません。
親のObject名からセレクタを記述し、Objectと同名のファイルで管理する事によって、カプセル化・予測性向上・ファイル最少化をおこないます。
この方法ですべてを記述するには時間を要しますが、親のObject名が重複していない限り、Object同士をネストしても影響が出にくい状態を作ることができます。
類似パターンA CSSの記述を兄弟関係にする
上記とはCSSの書き方が異なるパターンです。
HTMLの構造は変わりませんが、CSSにおいてコンテナと構成部品を兄弟関係で記述する事で、詳細度を低く抑えられます。
この場合、構成部品はサイトの中で一意の名前になる必要がありますが、親の命名を継承する限り、親の命名が異なっていれば自然と一意になります。
類似パターンB 構成部品をプレーンなHTMLタグにする
以下の例は、構成部品の命名はおこなわず、セレクタにプレーンなHTMLタグを使用している例です。
この状態で子孫セレクタを使用していた場合には、内部に別のObjectをネストすると、内部のObjectのHTMLプレーンタグは確実に影響を受けます。
またタグ（意味づけ）を変更しなくてはならなくなった場合には、CSSの修正作業が必要です。
カプセル化という視点からすると堅牢性に欠けますが、すべての要素に命名を与えない分、作業は早くなります。
状況によってこの方法を採択する場合は、ネスト時の修正のリスクを把握した上で「意図的に省略」してください。
類似パターンC 構成部品の名前を簡略化する
構成部品に対し、汎用的な短い名前を与えてマークアップする例です。
プレーンタグだけの時よりも修正のリスクを低減し、命名を継承しない事によりClass名が簡潔になるパターンです。
構成部品それぞれの「汎用的な命名」に単独でスタイルを付与しなければ、異なるObjectで同じ命名を使用しても影響はでません。
最小部品である、ボタン（.btn）や、リスト（.list）といった汎用的な命名と被りやすいですが、逆にそれらの最少部品の上書きを設計しやすくなります。
ただし命名が汎用的であるがゆえに、Objectのネストが発生した場合に意図しない影響を受けやすくなるため、ネストする場合には親か子のどちらかのObjectにおいて、親の名前を継承するといった工夫が必要になります。
2・一部ラップできない場合
ガイド1の手法のみですべて対応しようとすると、必ずどこかで無理が生じます。
すべての状況下で、適度な範囲で綺麗にラップできるとは限らないためです。
この場合は以下の考え方でファイル数を最少化できます。
つまりガイド1で挙げた2種類の例の複合パターンですが、意味によって与えられた名前でグルーピングされていれば、同じファイルに記述しても予測性は損なわれません。
3・兄弟関係のグルーピング
Objectのコンテナ（ラッパー）が存在せず、それぞれの要素が独立している状態のものです。
すべてに対して別のファイルを作成しなくとも、「根底にある役割や意味合い」が同類であれば、同じファイルにスタイルを記述しても予測性は保たれます。