CSSの可読性と保守性を向上させる「BEM記法」とは

CSSの可読性と保守性を向上させる「BEM記法」についてご紹介します。

BEM記法（Block Element Modifier）とは

BEM記法（Block Element Modifier）は、CSSクラスの命名規則の1つで、コードの可読性や再利用性を向上させ、CSSの構造を明確にするための手法です。
この記法を活用することで、スタイルシートの管理が容易になり、保守性も高まります。

BEM記法の構成

Block（ブロック）

・独立したUI要素として機能します。

例：
.header（ヘッダー全体）
.button（ボタン全体）

Element（エレメント）

・ブロックの内部構成要素を指します。
・ブロックに依存し、その一部を構成します。（例：ボタン内のアイコン、ヘッダー内のナビゲーション項目）
・命名規則: block__element（アンダースコア2つで接続）。

例：
.header__logo（ヘッダー内のロゴ）
.button__icon（ボタン内のアイコン）

Modifier（モディファイア）

・見た目や状態を表現するためのクラスです。
・命名規則: block–modifier または block__element–modifier（ダブルハイフンで接続）

例：
.button–radius（角丸のボタン）
.header__nav–active（アクティブな状態のヘッダーナビゲーション項目）

具体例

以下は、BEM記法を使用したHTMLコードの例です。

 
この例では、headerというブロックがあり、その中にロゴ（header__logo）やナビゲーション（header__nav）がエレメントとして定義されています。
エレメントは、ブロックの構成要素を表します。

さらに、ナビゲーション項目（header__nav-item）というエレメントを細分化し、それに対して「現在アクティブなページ」を示すモディファイアクラス（header__nav-item–active）を追加しています。
モディファイアは、要素の見た目や状態を変化させるために使用します。

このようにBEM記法を使うことで、構造が明確になり、CSSの再利用性が高まり、管理が容易になります。

BEM記法の利点

1．明確な構造
　クラス名から要素の役割や関係が一目で分かります。
　例：.header__nav-item で、その要素が「ヘッダー内のナビゲーション項目」であることが明確。

2．CSSの再利用性向上
　モディファイア（–）を使用して、簡単にデザインバリエーションを実現可能。

3．名前衝突の回避
　ブロックごとに独立したクラス名を管理でき、大規模プロジェクトでも安全。

4．保守性向上
　新しいデザイン要素や機能の追加時にも、既存構造を壊さずに対応可能。

導入の注意点

1．クラス名の長さに注意
　・BEM記法は可読性を重視するため、クラス名が長くなる場合があります。
　例：header__nav-item--active など、ネストが深い場合に長大化しやすいです。

　・チーム間で命名規則を統一しておくと効率的です。

2．命名規則の統一
　・プロジェクト開始時に、__ や — の使い方を明確に定義しておくことが重要です。

 
BEM記法を導入することで、CSSの可読性とメンテナンス性が向上し、プロジェクト全体の品質向上が期待できます。
適切に活用して、効率的な開発を実現しましょう。