BEMについて学習

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

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

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

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

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

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

スポンサードリンク

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください