CSS BEM命名規則
BEMとは？
BEMはBlock、Element、Modifierの略で、CSSクラスを自己説明的で競合のないものにする命名規則です。
構造
.block { }
.block__element { }
.block--modifier { }
.block__element--modifier { }
サンプル
HTML
<style>
.card { }
.card__title { font-size: 18px; }
.card__content { padding: 15px; }
.card--highlighted { border: 2px solid gold; }
</style>
<div class="card card--highlighted">
<h3 class="card__title">タイトル</h3>
<div class="card__content">コンテンツ</div>
</div>
なぜBEMか？
| 利点 | 説明 |
|---|---|
| 自己文書化 | クラス名がスタイルの内容を説明 |
| 競合なし | 一意の名前がスタイルの衝突を防止 |
| 詳細度戦争なし | フラットなセレクター、ネスト不要 |
| メンテナンス容易 | 1つのクラスを変更しても他のクラスに影響しない |
❓ よくある質問
Q BEMのクラス名が長すぎる怎么办？
A 長い名前はBEMのデザイン上のトレードオフ——スタイルの競合より長い名前が良いです。より短い命名（`card__title`の代わりに`card-t`）を使用できますが、プロジェクト全体で一貫性を保ってください。Sassのネストで繰り返しを大幅に削減できます。
Q BEMで`--`と`__`を混在できますか？
A はい。`block__element--modifier`は標準で、「特定の状態のブロックの要素」を意味します。例えば、`card__title--highlight`は「ハイライト状態のカードのタイトル」を意味します。`block--modifier__element`のように順序を逆にしないでください——順序が重要です。
Q BEMは小さなプロジェクトに適していますか？
A 数ページの小さなプロジェクトでは、BEMはオーバーキルです。シンプルなクラス名（`.title`、`.btn`）で十分です。しかし、プロジェクトが10ページを超えるか、複数の開発者がいる場合、BEMの価値が明確になります。
📖 まとめ
- BEMは最高のCSS命名規則の1つです
- Block、Element、Modifier構造を通じて、CSSクラスは自己説明的、競合なし、メンテナンスしやすいものになります
- BEMはネストされたセレクターを必要とせず、各クラスは独立しており、詳細度戦争を回避します
- どの規則を選択しても、チームの一貫性が最も重要です
📝 演習
- BEM命名を使用して「ユーザーコメント」コンポーネントを作成してください：アバター、ユーザー名、時間、コメントテキスト、いいねボタン。
- このCSSをBEMスタイルで書き直してください：
CSS
.profile { ... }
.profile .photo { ... }
.profile .info { ... }
.profile .info .name { ... }
.profile .actions .btn { ... }
- プロジェクトにBEM命名の導入を検討し、1ページの小さなモジュールで実践してください。