BEMとは？用語の意味を解説
BEMとは
BEMとは、「Block Element Modifier」の略で、CSSのクラス名を構造的かつ明確に管理するための命名規則および設計手法です。このアプローチは、大規模なWebプロジェクトやチーム開発で特に効果を発揮し、スタイルの一貫性を保ちながら再利用性の高いコードを作成することを目的としています。BEMは、各要素の役割を明確にすることで、開発者やデザイナーがコードをより直感的に理解しやすくするという特徴があります。
BEMの基本構造
BEMは以下の3つの要素から構成されます。それぞれがCSSクラス名における特定の役割を果たし、全体として一貫性のある構造を形成します。
1. ブロック（Block）
ブロックは、独立した機能を持つコンポーネントを指します。たとえば、ナビゲーションバーやボタン、カードなどが該当します。ブロックは、他の要素に依存せずに独立して機能するため、プロジェクト全体で再利用可能なデザインパターンを作りやすくします。
例:
css
コピーする編集する
.navigation {
background-color: #f8f9fa;
padding: 10px;
}
.button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
}
2. エレメント（Element）
エレメントは、ブロックの一部を構成する要素であり、ブロックに依存しています。たとえば、ナビゲーションバー内のリンクやボタン内のアイコンなどがエレメントに該当します。エレメントは、ブロックとの関係性を明示するために「__」（ダブルアンダースコア）で接続します。
例:
css
コピーする編集する
.navigation__link {
color: #007bff;
text-decoration: none;
}
.button__icon {
margin-right: 10px;
}
3. モディファイア（Modifier）
モディファイアは、ブロックやエレメントの状態やバリエーションを示します。たとえば、特定のボタンがアクティブ状態や無効状態であることを表現する際にモディファイアを使用します。モディファイアは「–」（ダブルハイフン）で接続されます。
例:
css
コピーする編集する
.button--primary {
background-color: #007bff;
}
.button--disabled {
background-color: #d6d6d6;
cursor: not-allowed;
}
BEMの命名規則
BEMの命名規則は以下の形式を基にしています：
lua
コピーする編集する
.block__element--modifier
この構造に従うことで、CSSクラス名が論理的かつ直感的になり、コードの可読性が大幅に向上します。また、特定の要素の役割や状態を一目で理解できるため、メンテナンスも効率的に行えます。
具体例:
html
コピーする編集する
<div class="card">
<h2 class="card__title">記事タイトル</h2>
<p class="card__content">記事の概要</p>
<a href="#" class="card__button card__button--primary">続きを読む</a>
</div>
CSS:
css
コピーする編集する
.card {
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
}
.card__title {
font-size: 1.5rem;
margin-bottom: 10px;
}
.card__button {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
}
.card__button--primary {
background-color: #007bff;
color: white;
}
BEMの利点
BEMを採用することで得られる主な利点は以下の通りです：
1. 一貫性のあるコード
命名規則が明確なため、チーム全体で一貫性を保ったコードを記述できます。
2. 再利用性の向上
ブロックやエレメントを独立したコンポーネントとして設計するため、別のプロジェクトやページでも簡単に再利用できます。
3. 可読性の向上
クラス名が役割を具体的に示しているため、新しい開発者がコードを素早く理解できます。
4. 保守性の向上
構造が整理されているため、スタイルの変更や追加が簡単です。また、影響範囲を特定しやすくなります。
5. コンフリクトの防止
各クラスが一意に定義されるため、CSSのクラス名が競合するリスクを減らせます。
BEMの注意点とベストプラクティス
- クラス名をシンプルに保つ クラス名が長くなりすぎると可読性が低下します。必要最小限の単語で役割を表現しましょう。
- モディファイアの適切な活用 状態やバリエーションが明確に伝わるように、モディファイアを適切に使用してください。
- JavaScriptとの統合 BEMのクラス名をJavaScriptのセレクタとして使用する場合は、意味を明確に保ちつつ、スタイルとスクリプトの両方で一貫性を持たせます。
- 設計ガイドラインの作成 プロジェクト開始時にBEMの使用ルールを定め、チーム全員で共有しましょう。
まとめ
BEMとは、CSSのクラス名を論理的に整理し、スタイルシートを構造的かつ効率的に管理するためのアプローチです。この手法を取り入れることで、プロジェクトが大規模化してもスタイルの一貫性を保ち、開発効率を向上させることができます。また、再利用性や保守性の向上にもつながり、特にチーム開発においてその効果を最大限に発揮します。BEMを活用し、管理しやすく高品質なCSS設計を目指しましょう。
