BEMにおける命名規則

BEMでは、命名規則が明確に定義されているので、BEMを知っている人であればコードを見ただけでどれがどんなパーツになるのかが一目瞭然です。
裏を返すと、BEMを使うために命名規則を学ぶ必要があります。

しかしながら、BEMの命名規則は非常にシンプルです。
ここでは、Block・Element・Modifierのそれぞれの命名規則に関して確認していきましょう。

1. Block

block.png
Built on Pablo

Blockでは、それ自身で意味のある部品の名前をつけていきます。
Blockは入れ子にしたりお互いにインタラクションを起こしたりできますが、文法上は対等に扱います。
DOM表現(コントローラーやモデル)のない要素もブロックとして扱います。

● HTML

HTML要素は下記のようにクラス名が付けばBlockとします。

<div class=“block”>・・・</div>

● CSS

CSSでは、以下のように、HTML要素は付けずに、クラス名のセレクターだけにします。
タグ名やidを付けることもありません。

.block { color: #0060e6; }

2. Element

element.png
Built on Pablo

Elementは、Blockの中にあるもので、それ単体では意味のあるパーツにならないものを指します。
すべてのElementはBlockと紐づけて考えます。
Elementは通常、Blockの後ろに2つのアンダースコアをつけて命名します。

● HTML

Blockの中にあるHTML要素はすべてElementと考えます。
あるBlockの中では、すべてのElementは対等に扱います。

<div class=“block”>
　　<span class=“block__element”>Home</span>
　　<span class=“block__element”>Menu</span>
</div>

● CSS

Blockと同じように、クラス名のセレクターだけで書いていきます。
同じページ上の別のBlockやElementに依存してはいけません。

.block__element { color: #0060e6; }

以下のようにBlockと続けて書いたり、HTML要素の後ろに続けて書いてはいけません。

.block .block__element { color: #0060e6; } // ×
div.block__element { color: #0060e6; } // ×

3. Modifier

modifier.png
Built on Pablo

ModifierはBlockやElementのフラグのようなものです。
フラグをつけるには、BlockやElementの前にダッシュを2つつけて命名し、値がある場合はその後ろにもう一つダッシュをつけます。
「.block—modifier」のようにBlockにつくこともあれば、「.block__element--modifier」のようにElementにつくこともあります。

● HTML

Modifierはあくまでもオリジナル要素に対して色や大きさを変えるだけの役割を持っています。

<div class=“block block—mod”>
　　<span class=“block__element block__element—modifier”>Home</span>
　　<span class=“block__element”>Menu</span>
</div>

ただし、以下のようにModifierだけを単独でマーキングしてはいけません。

<div class=“block—modifier”>・・・</div> // ×

● CSS

Modifierも、CSSで記述するときには単独で書きます。

.block—modifier { color: #999; }

ただし、Modifierに関しては、BlockレベルのModifier付きの下にElementを書いてもいいことになっています。

.block—modifier .block__elem { color: #999; }