BEMとは、CSSの記述方法論のこと
Block Element Modifierという3つの概念に沿って設計する手段
クラス名とするBlock Element Modifierの単語を_や-、__などで区切ることが特徴
これをセパレートと呼びます
Block
- 大きい塊。Elementの親要素
- BlockとElementの区切りは、
Block__Elementのように、__アンダースコア2つで接続します
Element
- Blockの子要素
- Modifierとの区切りは、
Element--Modifierのように、--ハイフン2つで接続します
Modifier
- Blockまたは、Elementに特別な修飾をする要素
- key や value の役割を持ち、BlockやElementから派生させたい場合に使います
- Modifierの命名には形容詞を使用します
どうやって使う?
BlockとElementはアンダースコア2つで区切る
block__element
BlockとModifierはハイフン2つで区切る
block--modifier
ElementとModifierもハイフン2つで区切る
block__element--modifier
採用するメリット
複数人での開発がスムーズになる
BEMはルールがしっかりしているため、複数の人が開発に関わり、長く運用されるプロジェクトに特に向いている
修正対応コストを低減できる
既存ページが変化していくことを前提に考え出された手法なので内容に変更があった場合、その修正対応コストをできるだけ低減することができる
コードの再利用性が容易になる
Webサイトを構成するパーツを独立して設計することができるため、コードの再利用が容易になる