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

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

BEM記法（Block Element Modifier）とは

BEM記法（Block Element Modifier）は、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．クラス名が長くなりやすい
　ネストが深い構造では、クラス名が冗長になりやすい点に注意。
　例：header__nav-item–active

→ チームで命名ルールを共有・統一することで、運用しやすくなります。
 
2．命名規則の統一が重要
　__や–の使い方はプロジェクト開始時に明確に定めましょう。
　スタイルガイドやドキュメントに残すのがおすすめです。

 
BEM記法を導入することで、CSSの可読性やメンテナンス性が格段に向上します。
ぜひ、プロジェクトやチームで活用し、効率的なフロントエンド開発を実現しましょう。