BEMとは何か？ ─ CSS設計が必要とされた背景

Webサイト制作の現場では、CSSはしばしば「膨らみすぎて制御不能になる」問題に直面します。
例えば、あるページにボタンのスタイルを追加したら、別のページのボタンまで崩れてしまう──そんな経験はないでしょうか。

これはCSSの特性であるカスケード（継承と上書き）に起因します。便利な仕組みである一方で、規模が大きくなるほど「どのルールがどこに効いているのか」が不透明になり、修正が修正を呼ぶスパゲッティ化が起こりやすいのです。

こうした背景から、「CSSを設計する」という考え方が必要になりました。

BEMの登場と基本ルール

BEM（Block, Element, Modifier）は、2010年代にロシアの検索サービスYandexが大規模開発の中で生み出した命名規則です。
ポイントは 「役割を名前で明示する」 こと。

• Block：独立したコンポーネント（例：card）
• Element：Blockの一部として存在する要素（例：card__title）
• Modifier：見た目や状態のバリエーション（例：card–featured）

<article class="card card--featured">
<h2 class="card__title">おすすめ商品</h2>
<p class="card__desc">期間限定セール中</p>
</article>

このようにクラス名をつけると、構造と役割が明確になり、誰が見ても「どのCSSがどこに効いているのか」が分かりやすくなります。

一般的なBEMのイメージと受け止められ方

BEMは特別なツールを導入しなくても、「命名ルールを守るだけ」で始められるのが特徴です。
そのため大規模サイトやチーム開発では「保守性が上がる」「クラスの衝突が減る」と評価され、現在でも一つのスタンダードとして紹介されることが多い手法です。

一方で「クラス名が長くなる」「小規模サイトでは大げさ」という声もあり、現場の評価は分かれています。

まずはBEMを知っておく価値

BEMはCSS設計の数ある手法のひとつであり、万能の正解ではありません。
しかし「なぜ命名規則が必要なのか」を理解する入口として、非常に学びやすいアプローチです。

次回は、BEMが実際にどんな業務や業界で役立つのかを掘り下げていきます。