TECH BLOG

マークリープス技術ブログ

open

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の可読性やメンテナンス性が格段に向上します。
ぜひ、プロジェクトやチームで活用し、効率的なフロントエンド開発を実現しましょう。

よく読まれている関連記事

関連最新記事