CreaTools LogoCreaTools
Tech Notes
Case Converter

CSSクラス名の命名規則とBEM｜BEMが破綻した案件の話

2025-12-20

:::note ※BEMを使うか迷っている人向けの「判断用」記事です :::

結論（私の判断基準）

  • CSS は kebab-case が基本
  • BEM は「コンポーネント単位のCSS」に向いている
  • Tailwind を使うなら BEM は不要
  • BEM が破綻するケースもある。私は経験した

🚀 kebab-case に変換 → Case Converter

私がBEMをやめた案件の話

ある案件で BEM を導入した。最初は良かった。

.card { }
.card__title { }
.card__body { }
.card--featured { }

問題は、コンポーネントがネストしたとき。

<div class="card">
  <div class="card__header">
    <h2 class="card__header__title">...</h2>
    <span class="card__header__title__icon">...</span>
  </div>
</div>

card__header__title__icon。長すぎる。読めない。

BEM のルールでは Element は1階層まで。でも実務ではネストする。ルールを守ろうとすると、クラス名が爆発する。

結局、この案件では BEM をやめて、シンプルな kebab-case に戻した。

BEM が向いているケース

  • コンポーネント単位でCSSを管理する
  • チームでルールを共有できる
  • ネストが浅い

BEM が向いていないケース

  • ネストが深い
  • デザインが複雑
  • Tailwind を使っている

BEM は万能ではない。向いていないケースでは、無理に使わない。

CSS は kebab-case が基本

HTML/CSS の世界では kebab-case が標準。

<div class="user-profile">
  <h2 class="user-profile-title">...</h2>
</div>

camelCase や snake_case を使っても動くが、慣習に反する。

BEM 記法（参考）

Block / Element / Modifier の略。

.block
.block__element
.block--modifier

実例

<div class="card card--featured">
  <h2 class="card__title">タイトル</h2>
  <p class="card__body">本文</p>
</div>
種類記法例
Block単語card
Element__ で繋ぐcard__title
Modifier-- で繋ぐcard--featured

BEM のメリット（理論上）

名前衝突を防げる

.card__title { }
.header__title { }
.modal__title { }

構造が読める

クラス名を見ただけで、どのブロックに属するか分かる。

Tailwind 時代の BEM

Tailwind を使うなら、BEM を書く機会は減る。というか、ほぼない。

ただし：

  • レガシーコードの保守
  • Tailwind を使わないプロジェクト
  • デザイントークンの命名

では今でも使う。

Tailwind が使えるなら、Tailwind を使う。BEM は必要なときだけ。

迷ったときの判断

迷い私の判断
CSSの命名規則kebab-case
BEM を使うかコンポーネント単位で管理するなら使う
ネストが深いときBEM をやめる
Tailwind が使えるときTailwind を使う

この記事で解決しない場合

BEM は便利だが、万能ではない。ネストが深いと破綻する。無理に使わない。