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 {}