BEMについて学習

BEMというCSSの命名規則がある。とても冗長的で、コーディングには時間がかかる。
しかし保守運用フェーズに移った時に効力を発揮する。

BEMは３つの概念で考える。

1. Block→箱(親要素)
2. Element→箱の中の部品（子要素）
3. Modifier→部品の中の装飾（状態）

1. Blockは出来るだけ２つ以上の単語として命名。
2. BlockにつながるElementsは__(アンダースコア２つ)で繋ぐ。
3. Modifierは–(ハイフン２つ)で繋ぐ

例えば以下のように宣言していく。非常に冗長的だ。

そしてCSSは以下のように書く。

スポンサードリンク

あまりにも冗長的なので、アンダースコアを一つにしたりする人も多い。