BEMとは
Block、Element、Modifierの略語。「ベム」と言い方をする時もある。
フロントエンド設計方法の一つでcssのclass名の命名ルールが決まっている。
BEMの目的
- メンテナンスをしやすくする
- ファーストバージョンの開発を早くする
- チームに新しいメンバーが入ってもルールを理解しやすくする
- コードを再利用しやすくする
clsss名を見れば構造が分かるという事。ルールさえ覚えれば他の人もすぐに使えるようにするという事。
ルール
- IDは使用しない。
- 子孫セレクタは使用しない。（.navi li {・・・}などは使用しない）
- 見て分かりやすい名前にする。（クラス名が長くなっても冗長でも気にしない）
- 影響範囲を限定する。(BlockはBlockだけのスタイル)
- clsss名は必ず先頭はBlock。
clsss名の形式
「Block名」
「Block名」__「Element名」
「Block名」__「Element名」–「Modifier名」
「Block名」–「Modifire名」
BlockとElementは「__」でつなぐ。
ElementとModifierは「–」でつなぐ。
(「_」でつなぐのでも良いと書いてあるところもあった)
要素が2つ以上の単語からなる場合は「-」でつなぐかキャメル形にする。
BEMの構成要素(3つ)
Block
部品のまとまり。完全に独立していて使いまわしができるようにする。
ボタン、ヘッダー、フッター、メニュー・・・など。
<div class=”naviSub“>
<ul class=”naviSub__list”>
<li class=”naviSub__btn”><a class=”button__link button__link–current” href=”#”>Menu01</a></li>
<li class=”naviSub__btn”><a class=”button__link” href=”#”>Menu02</a></li>
<li class=”naviSub__btn”><a class=”button__link” href=”#”>Menu03</a></li>
</ul>
</div>
Element
Blockの中に存在する構成要素。
Blockの中のどういう役割をする要素か名前で分かるようにする。
ヘッダーロゴ、メニューの項目、入力欄・・・など。
<div class=”naviSub”>
<ul class=”naviSub__list“>
<li class=”naviSub__btn“><a class=”button__link button__link–current” href=”#”>Menu01</a></li>
<li class=”naviSub__btn“><a class=”button__link” href=”#”>Menu02</a></li>
<li class=”naviSub__btn“><a class=”button__link” href=”#”>Menu03</a></li>
</ul>
</div>
Modifier
同じBlockやElementでも異なる装飾を設定する場合に使う。
行頭マークが違うリストとか、カレント状態のメニューなど。
KeyとValueという名前をつけて分かりやすくすることができる。
ボタンの色、ロゴの種類・・・など。
<div class=”naviSub”>
<ul class=”naviSub__list”>
<li class=”naviSub__btn”><a class=”button__link button__link–current” href=”#”>Menu01</a></li>
<li class=”naviSub__btn”><a class=”button__link” href=”#”>Menu02</a></li>
<li class=”naviSub__btn”><a class=”button__link” href=”#”>Menu03</a></li>
</ul>
</div>