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という記述になります。