BEMの方法論とMindBEMdingという記法
BEMとは
Block、Element、Modifierの頭文字を取ったものであり、要素を3つのどれかに当てはめて命名していく方法。
- Block → 構成のルートとなる要素。
- Element → Blockの子要素。Blockでしか生きられない。
- Modifier → 元となるBlockまたはElementから変化した状態を表す要素。
オブジェクト指向風に言うと...
Blockは継承元のクラス、Modifierはその派生クラス、Elementはそれらのクラスに所属するメソッドもしくはプロパティである。
参考:BEM-Methodology Definitionsの日本語訳
MindBEMdingとは
BEMをCSSのクラス名に適用するために作られた規則で、CSS界隈ではMindBEMdingがBEMと呼ばれることが多い。お約束として、Elementはアンダースコア2つ(__)、Modifierはハイフン2つ(--)で連結し、BEMの各要素を表現する。
BEM記法
block
block__element
block__element--modifier
block--modifier
block--modifier__element
これをhtmlで書くと、こんな感じになる
html
<div class="block">
<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>
</div>
<div class="block block--modifier">
<div class="block__element block--modifier__element"></div>
</div>
非常にキモイですね。しかし、キモイと思うのは最初だけで、使ってみると、非常に分かりやすく、良いアイデアである。
良いアイデアと言うのは、CSSの設計、その命名のときに考えるのは、それがいかに明白であるかということと、汚染されるリスクを抑えられるか、ということ。つまり、ワードを明確に区切ることで、その機能・カテゴリを区別するという点においては、別に単一記号であろうが、キャメルケース、スネークケースであろうがなんでもいいかもしれない。しかしスタイルが汚染されるリスク、という点でBEMおよびMindBEMdingは優秀である。
参考:Summary of MindBEMding - getting your head ‘round BEM syntax