チームで長期間安定してWebサイトを運用できる記述法BEM

みなさんBEMをご存知でしょうか？早く人間になりたい彼らではありません。
BEMは「Block」「Element」「Modifier」の頭文字からとった略後で、複数の人間が長期間効率的に安定してWebサイトを運用するためのHTMLとCSSの記述法です。

BEMを構成する3つの要素

BEMは上記の通り「Block（塊）」「Element（要素）」「Modifier（修飾子）」の3つで構成されます。

Webサイトの各パーツの塊「Block」

HTMLの各パーツの塊をBlockと呼び、BlockはHTML上どこに配置しても成り立ち、HTML上ではBlockの中にBlockを配置することは可能です。しかしCSSではBlockは独立して記述し、Blockを入れ子にして記述はしません。

正しい記述法

<div class="block01">
<div class="block02">

</div>
</div>

<style type="text/css" media="screen">
.block01{
border:1px solid #ccc;
}
.block02{
background:#ddd;
}
</style>

間違った記述法

<div class="block01">
<div class="block02">

</div>
</div>

<style type="text/css" media="screen">
.block01{
border:1px solid #ccc;
}
.block01 .block02{
background:#ddd; //Blockの入れ子は記述しない
}
</style>

Blockの要素「Element」

ElementはBlockの構成要素で、そのBlock内でのみ意味をなします。したがってElementはBlock内にしか配置できず、Elementの入れ子も行いません。Elementの命名方法はその所属するBlock名にアンダーバー2つ(__)で区切ってElement名を記述します。

正しい記述法

<div class="block01">
<div class="block01__element01">

</div>
</div>
<div class="block01">
<div class="block02">
<div class="block02__element01">

</div>
</div>
</div>

間違った記述法

<div class="block01">
<div class="block01__element01">
<div class="block01__element01__element02">
<!-- Elementの入れ子は行わない -->

</div>
</div>
</div>

Block、Elementのマイナーチェンジ「Modifier」

Modifierは基本となるBlockやElementにスタイルなどを一部修正したり、追記したりする場合に使用します。したがって元となるBlockやElementなしでModifierは配置できません。Modifierの命名方法は元となるクラス名にハイフン2つ（–）で区切ってModifier名を記述します。

正しい記述法

<div class="block01">
</div>
<div class="block01--modifier">
</div>

<div class="block01">
<div class="block01__element01"></div>
<div class="block01__element01--modifier01"></div>
<div class="block01__element01"></div>
<div class="block01__element01"></div>
</div>

間違った記述法

<div class="block01--modifier">
</div>
<!-- 元のなるBlockなしでModifierを使用しない -->


<div class="block01">
<div class="block01__element01--modifier01"></div>
<div class="block01__element01--modifier02"></div>
<div class="block01__element01--modifier03"></div>
<div class="block01__element01--modifier04"></div>
</div>
<!-- 元のなるElementなしでModifierを使用しない -->

これが基本的なBEMの記述方法です。

ここまで紹介してわかるかと思いますが、BEMでは各クラス名が非常に長くなったり、要素型セレクタを使用しないので各要素にクラスが振られて煩雑に見えてしまいます。しかしこの記述法で記載すると第三者が見たときも理解が早く、パーツの再利用もスムーズに行うことができます。マルチクラスに使用をやめ、シングルクラスを採用するだけでもHTMLはより理解しやすくなるかもしれません。
またこれは個人の見解にはなりますが、要素型セレクタに関しても確実に他に影響が無いことがわかっている場合は使用しても問題ないと考えています。

長期に渡って複数のスタッフでWebサイトを運用する場合などにBEMの採用も考えて見てはいかがでしょうか。