BEMとは
- block, element, modifierの頭文字
- Yandexで発案されたフロントエンドの命名手法
- CSSのクラス名に高い透明性を与え、他の開発者に意味を伝えやすくする
- 厳格で情報量が多いだけでなく、巨大なプロジェクトに適した命名規約である
BEMの命名規則
Block
BlockはElementとModifierの集合です。
検索フォームBlockの例
Element
ElementはBlockを構成する要素です。
検索フォーム内のElementの例
Modifier
Modifierは、BlockまたはElementのバリエーションの違いです。
Searchボタンが押された際の振る舞いなどを表現するのがModifierになります。
検索フォームないのModifierの例
BEMの記法
/*
Blockに対するCSSセレクタ
２語以上の命名にしたい場合は「-」を用いる
*/
.block {}
.block-name {}
/*
Elementに対するCSSセレクタ
BlockとElementを「__」で繋ぐ
*/
.block__element {}
/*
BlockのModifierに対するCSSセレクタ
BlockとModifierを「_」で繋ぐ
*/
.block_modifier {}
/*
Elementに対するCSSセレクタ
BlockとElementを「__」で繋ぎ、ElementとModifierを「_」で繋ぐ
*/
.block__element_modifier {}