BEM

BEMとは、Block、Element、Modifierの略です。

HTMLを明確にすることを念頭ににおり、要素をBlock、Element、Modifierの3つに分けた命名規則でクラス名を決めていきます。

単語の繋ぎを「__」「_」「-」を用い、使い分けることでBlock、Element、Modifierそれぞれを定義します。

■Block=かたまり

ヘッダー、フッター、などをひとつのまとまりとします。
Blockはどこでも配置すること可能ですが、CSSではBlockの中でBlockと定義することができず、Blockは単体で存在し機能することが条件となります。

■Element=要素

Block中の一つ一つの要素となります。
ナビゲーションをBlockにするなら、その中のリストなどはElementとなります。

■Modifier=修飾子

BlockやElementの見た目を決定する場合に利用します。.redなどです。「__」で接続し、.btn__redという記述になります。