CSS設計（２）
1. 前回の概要
前回はOOCSSについて取り扱いました。OOCSSの基本原則として、
（１）Separate structure and skin（構造と見た目の分離）
（２）Separate container and content（コンテナーとコンテンツの分離）
というものがありました。
今回はOOCSSと同じくCSS設計の基本となるBEM（MindBEMding）について扱っていきます。
2. BEM
BEMとは、
- Block（かたまり）……大きなくくりの「クラス」
- Element（要素）……Blockの中にある要素の「クラス」
- Modifier（変更）……BlockやElementの変化（派生）
の頭文字をとったものです。OOCSSと同じくCSSの設計手法の一つですが、BEMにはこの考えを用いた厳格な命名規則（MindBEMding）が存在します。
以下においては「MindBEMding」の命名規則を紹介していきます。（今回はMindBEMdingの命名規則がテーマとなります。）
3. MindBEMdingの使用例
MindBEMdingにおける命名規則では、Block・Element・Modifierを次のようにつなぎます。
- Block（かたまり）……クラスの先頭
- Element（要素）……「アンダースコア２つ（子供的）」でつなげる
- Modifier（変更）……「ハイフン２つ（仲間的）」でつなげる
「ハイフン１つ」は複数単語を繋げるだけで特に役割はないので注意。
全てをまとめるとこんな感じ。
Block__Element—Modifier
（もちろん、Block--Modifier とかになることもあります）
とはいえなんだかわかりづらいので例を示していきましょう。
こんなホームページがあるとして、（デザインがいいかどうかは一旦おいておきます）
これはざっくり下のようなくくりになっています。
で、その大きいくくりに対して、例えばこんな感じにclass名をつけることができます。（global-navの「ハイフン１個」は複数単語をつなげるもので、それだけの意味です。）
さて、これらはいわゆる大きなくくり「Block」となります。
というわけで、次にBlockの子供的要素「Element」を見ていきます。Blockの中をもう少し細かく分けていきましょう。
と、こんな感じに分けることができますね。アンダースコア２つで「Block」と結ばれています。
さてさて、「gloval-nav__list」は４つありますね。もし、これらを１つずつ色違いにしたいと思ったとします。そんな時には「Modifier」を使用するといいでしょう。
「Modifier」はハイフン２つでつなげればいいので、
と、こうすればいいですね。（あくまでも一例ですが）
4. で、BEM（MindBEMding）とは
BEMはロシア人美少女の企業が考案したCSS設計手法で、シングルクラス（クラスは各一つ）と相性がいいです。
MindBEMdingの命名規則を導入すると、「わかりやすい」かつ「破綻しにくい」というメリットがあります。
なぜわかりやすいか、それは、アンダースコアとハイフンがElementとModifierの関係を見た感じで表現できるからです。
Elementはアンダースコアによって「子」の感じがしますし、Modifierはハイフンによって「仲間」という感じがしますよね。ね。
デメリットとしては、「クラスが長くなりがちになる」、「シングルクラスで書いていく場合、コード量が多くなってしまう」、などでしょうか。
今回のまとめとしては、MindBEMdingという命名規則を使うという選択肢もある、ということです。
前回取り上げたOOCSSとMindBEMdingを組み合わせたようなパターンもわりとありがちな気がします。
今回は最初にも書いた通り、「CSS設計手法」というよりかは「命名規則手法」について取り上げました。次回はCSS設計手法の一つ「SMACSS」について取り上げます。たぶん。
