命名規制BEM

2020/08/27

 

OndennoSuisha_穏田の水車
CSS設計とは:CSSを記述する時のルール

BEMとは:多くの開発者が取り入れているCSS設計のなかのクラスを命名する手法
B:
Block(大きなくくり)・・・名詞で命名する
E:Element(大きなくくりの中にいる要素)・・・名詞で命名する
M:Modifier(大きなくくりを修飾する)・・・形容詞や動詞で命名する
の頭文字を取ったもので、ページを構成する要素をこれらのどれかに当てはめてクラスを命名する。

具体的には
1. BlockとElementをつなぐ場合は、アンダースコア2つでつなぐ
2. Modifierにつなぐ場合は、ハイフン2つでつなぐ

例)
<ul class='Menu'>
  <li class='Menu__list'>TOP</li>
  <li class='Menu__list'>CONTACT</li>
  <li class='Menu__list Menu__list--backBlack'>ABOUT US</li>
  <li class='Menu__list'>SERVICE</li>
</ul>