BEM
モジュールを Block、 Element、 Modifier という単位で分解し、定義しています。
BEM では、要素型セレクターやIDセレクターの仕様は推奨されておらず、基本はクラスセレクターを使用します。
クラス名は、半角英数字の小文字で、複数の単語はハイフンでつなぎます。
その他の命名規則には、以下のようなものがあります。
- 英数字の小文字
- Element と Modifier はそれぞれ Block の名前を継承する
- それぞれの区切りの中に複数の単語がある場合はハイフンひとつでつなぐ
- Block と Element の区切りはアンダースコアふたつでつなぐ
- Modifier のキーの区切りはアンダースコアひとつでつなぐ
- Modifier の値の区切りもアンダースコアひとつでつなぐ
必ず上記の命名規則に準じないといけないということではありません。
Block について
特定のコンテキストに依存せず、どこでも使いまわせるパーツです。
そのため、Block 自体にレイアウトに関するスタイリングをしてはいけません。（position float margin など）
Element について
Element は、「 Block を構成し、Block の外では独立して使用できないもの 」と定義されています。
Element のクラス名は、block 名前を継承し、アンダースコア二つを記述した後に Element の名前を付けます。
// 単語がひとつの場合
block__element
// 単語が二つの場合
block-word__element-wordElement のネスト
Element の中に Element がネストされた命名は推奨さていません。
<ul class="menu">
<!-- 以下は × -->
<li class="menu__list"><a href="#" class="menu__list__link">リンク１</a></li>
<!-- 以下は ○ -->
<li class="menu__list"><a href="#" class="menu__link">リンク２</a></li>
</ul>Element は必ず Block 内に配置する
<!-- 以下は × -->
<p class="menu__item"><a href="" class="menu__link">Link</a></p>
<!-- 以下は ○ -->
<div class="menu">
<p class="menu__item"><a href="" class="menu__link">Link</a></p>
</div>Modifier について
「 Block もしくは Element の見た目や状態、ふるまいを定義するもの 」と定義されています。
Modifier の命名規則は以下を参考にしてください
// 単語がひとつの場合
block__element_modifier
// 単語が複数の場合
block-name__element-name_modifier-name Modifier 「 キーと値の組み合わせ 」というタイプがあり、キーと値をアンダースコアで区切ります。
Mix
「 単一のDOMノードに、異なる BEM エンティティが複数付加されたインスタンス 」と定義されています。
<header class="header">
<div class="logo header__logo">...</div>
<div class="menu header__menu">...</div>
</header>
/* 以下は × */
.header .logo {
margin-top: 10px;
}
/* 以下は ○ */
.header__logo {
margin-top: 10px;
}
上記のようにするのは、詳細度を高めない為です。
ロゴを別の場所で使う場合、.logo にスタイルリングしていると別の場所でマージンの設定が邪魔になる場合があります。
そのため、.header__logo にマージンを設定します。
Mix か Modifier どちらで設定するか
Mix にすべきか Modifier で設定するかは、以下のような内容で使い分けることができます。
- Mix を使用する場合：position、margin などのレイアウトがカラム変更の場合
- Modifier を使用する場合：Block または Element 内で完結する変更の場合
Mix では対処できない場合
Mix では対応できない場合は、新たに Element を作成しその中にほかの Block をネストして対処することができます。