はじめに
HTML, CSSでの設計方法の一つとしてBEMという設計思想があります。昔勉強で作ったページも添えて記事にまとめます。
BEMとは
- BEMとは、
Block、Element、Modifierという3つの概念に沿って設計する手段です。 - BEMでは、クラス名とするBlock、Element、Modifierの単語を
-や_、__で区切ることが特徴です。これをセパレートと呼びます。
Block: 塊
- 単体で独立して動作します。
- BlockとElementの区切りは、「Block__Element」のように、アンダースコア2つで接続します。
Element: 要素
- Blockの中の要素として使います。
- Modifierとの区切りは、「Element--Modifier」のように、ハイフン2つで接続します。
Modifier: 修飾語（状態、変化）
- 名前（key）や値（value）の役割を持ち、BlockやElementから派生させたい場合に使います。
- Block（またはElement）とModifierとの区切りと、Modifierの区切りは、「Block_Modifier(key) _Modifier(value)」または「Element_Modifier(key)_Modifier(value)」のように、区切り文字にアンダースコアを1つ使用します。
メリット
- コーディングルールが明確なので、命名に悩む時間が短縮されます。
- コーディングルールに沿っているので可読性が上がります。
- クラス名の重複を防ぎやすくなります。
- 長期的や大規模なプロジェクト、複数人での開発に向いています。
- コードの再利用性が上がります。
デメリット
- 必然的にクラス名が長くなってしまう。
- 慣れるまでの学習コストがかかります。
練習用として作ったページはこちら
takumiwada129/Practice-HTML-CSS
感想
ご指摘等あればぜひよろしくお願いします。