フロントエンド - CSS・スタイリング

BEM（Block Element Modifier）べむ

CSS設計クラス命名規則BlockElementModifierコンポーネント設計

BEMについて教えて

簡単に言うとこんな感じ！

CSSのクラス名の付け方ルールだよ！「ボタン」「ボタンの中のテキスト」「押せない状態のボタン」みたいに、部品・部品の中身・状態をダブルアンダースコアとダブルハイフンで区切って名前を付けるんだ。チームで作業しても名前がかぶらなくて見やすくなるってこと！

BEMとは

BEM（Block Element Modifier）は、CSSのクラス名を一定のルールに従って命名するためのCSS設計手法です。Yandex（ロシアの検索エンジン企業）が大規模なWebサービス開発の現場で生み出したもので、「Block（ブロック）」「Element（エレメント）」「Modifier（モディファイア）」の3つの概念を組み合わせてクラス名を構成します。

CSSは書き方の自由度が高い反面、プロジェクトが大きくなるにつれてクラス名の衝突・スタイルの意図しない上書き・どこに何が書いてあるかわからない「スパゲッティCSS」問題が起きやすい言語です。BEMはそうした混乱を防ぐために、クラス名だけを見てHTML上の役割・階層・状態がわかることを目指した命名規則です。

発注側・非エンジニアにとって重要なのは、「BEMを採用しているか？」という問いがコード品質・保守性の指標になるという点です。BEMが徹底されたCSSは、後から別のエンジニアが修正しやすく、長期運用コストを下げる効果があります。

BEMの3要素と記法

BEMは3つの概念と、それを表す記号によって成り立っています。

要素	英語	役割	記法
B	Block	独立した意味を持つUI部品（例: ナビゲーション、カード、ボタン）	`.block`
E	Element	Blockを構成する子要素（Block単体では意味を持たない）	`.block__element`（アンダースコア2つ）
M	Modifier	BlockやElementの見た目・状態・バリエーション	`.block--modifier`（ハイフン2つ）

クラス名の具体例

<!-- カードコンポーネントの例 -->
<div class="card card--featured">
  <img class="card__thumbnail" src="..." alt="...">
  <div class="card__body">
    <h2 class="card__title">記事タイトル</h2>
    <p class="card__description">説明文...</p>
    <a class="card__button card__button--disabled">続きを読む</a>
  </div>
</div>

/* 対応するCSS */
.card { /* カード全体 */ }
.card--featured { /* 注目カードのスタイル */ }
.card__thumbnail { /* カード内のサムネイル */ }
.card__title { /* カード内のタイトル */ }
.card__button { /* カード内のボタン */ }
.card__button--disabled { /* 無効状態のボタン */ }

覚え方：「部品__中身—状態」

BEMの記法は「ダブルアンダーは子供（Element）、ダブルハイフンは状態（Modifier）」と覚えると混乱しません。アンダースコアが2本で「部品の内側に潜る」、ハイフンが2本で「見た目が変わる」イメージです。

BEM命名の3原則

クラス名はBlock名から始める — .title より .card__title のほうが「どのBlockのtitleか」が明確
Elementはネストしない — .card__body__title ではなく .card__title と書く（階層は名前で表現しない）
Modifierは単独では使わない — .card__button--disabled は必ず .card__button と一緒に使う

歴史と背景

2005年頃 — Yandexの開発チームが大規模サービスの保守性向上のために社内でBEMを考案
2010年 — Yandexが外部に向けてBEMの概念を公開・ドキュメント化
2012年頃 — 英語圏の開発コミュニティに広まり、CSS設計の「定番手法」として認知される
2013〜2015年 — CSS設計の議論が活発化。OOCSS・SMACSS・BEMが三大手法として比較されるように
2015年以降 — ReactやVue.jsなどのコンポーネント指向フレームワークが普及。CSSモジュールやCSS-in-JSが登場するが、BEMの考え方はコンポーネント設計の基礎として影響し続けている
現在 — Tailwind CSSなどのユーティリティファーストCSSが台頭する一方、BEM自体は中・大規模プロジェクトやデザインシステム構築で今も広く採用される

他のCSS設計手法との比較

CSSの設計手法はいくつか存在します。BEMがどのような位置づけにあるか比較してみましょう。

手法	特徴	向いているプロジェクト規模
BEM	クラス名の命名規則に特化。シンプルで学習コストが低い	中〜大規模
OOCSS	CSSをオブジェクト（構造と見た目）に分離する設計思想	中〜大規模
SMACSS	スタイルをBase/Layout/Module/State/Themeの5カテゴリに分類	大規模
FLOCSS	OOCSSとSMACSSをベースにした日本発の設計手法	中〜大規模
CSS Modules	ビルドツールでクラス名を自動でユニーク化。衝突をツールで防ぐ	コンポーネントフレームワーク利用時
Tailwind CSS	ユーティリティクラスを直接HTMLに記述。命名不要	小〜大規模（スタイル統一重視）