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コードの例です。
1 2 3 4 5 6 7 |
<div class="header"> <div class="header__logo"></div> <ul class="header__nav"> <li class="header__nav-item header__nav-item--active"><a href="#">Home</a></li> <li class="header__nav-item"><a href="#">About</a></li> </ul> </div> |
この例では、.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の可読性やメンテナンス性が格段に向上します。
ぜひ、プロジェクトやチームで活用し、効率的なフロントエンド開発を実現しましょう。