命名規則であるBEMについて書こうと思います。
BEMとは
BEMは、厳格なクラスの命名規則が特徴です。
BEMはBlock、Element、Modifierの頭文字を取ったもので
ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。
BEMを使用するメリット
- クラスの命名が簡単になる
- 要素の再利用がしやすくなる
Block、Element、Modifierの各要素について
Block
Blockとは、ある要素の大元となるブロック要素です。
Blockを起点にElementやModifierは、この命名されます。
Blockの命名には名詞を使用します。
Element
Elementとは、Blockに属する子要素です。
1つ以上のElementによって、Blockは構成されています。
Elementの命名には名詞を使用します。
Modifier
Modifierとは、Blockまたは、Elementに特別な修飾をする要素です。
Modifierの命名には形容詞を使用します。