設計なしのCSS地獄から抜け出す｜実装レベルで始める命名規則の選び方

こんにちは！

今日は「設計なしのCSS地獄から抜け出す｜実装レベルで始める命名規則の選び方」について解説します。

僕が経験したCSS命名地獄のリアルな話

ほんま、これ言うのが恥ずかしいんですけど…。
僕も駆け出しの頃、CSSの命名ルールなんて気にしてませんでした。
クラス名は気分で .button-red だったり .btn-large だったり、統一性なくめっちゃ命名してたんです。

半年後、機能追加で古いコードを見返したら、もう何がなんだかわかりませんでした。
.box というクラスが40個あるんですよ。
どれがどの用途で使われてるのか、もう誰にも分からない状態。
結局、既存のスタイルを上書きするために新しいクラスを作る…という負のループに入ってました。

その時に気づいたんです。
「ちゃんと命名規則を決めておくって、ほんまに大事やな」って。
今はその経験を活かして、後輩たちには最初の段階で命名ルールを伝えるようにしてます。

命名規則を選ぶときの3つの判断軸

世の中にはいろんなCSS命名規則があります。
BEM、SMACSS、OOCSS…いろいろ聞きますよね。
でも「どれを選べばいいの？」って最初は迷うと思います。
僕が現場で使ってる判断軸をお話しします。

軸1：チームのスキルレベル

複雑な設計思想は、初心者にはハードルが高いです。
もし後輩や新人さんがいる環境なら、シンプルで直感的な命名規則から始めるといいですよ。
むずかしい設計よりも、「全員が理解して使える」ことの方がめっちゃ大事です。

軸2：プロジェクトの規模と期間

小規模なサイト制作なら、シンプルな命名で十分。
むしろ複雑な設計をすると、オーバーエンジニアリングになります。
一方、長期的に保守するLPやWebアプリなら、最初から構造を意識した命名をしておくと後が楽です。

軸3：既存プロジェクトの状況

既存プロジェクトに参加する場合、既に使われてる命名スタイルに合わせるのが鉄則です。
「この規則の方が良い」と思っても、混在させるともっとカオスになります。
統一性が最優先です。

BEM風の命名で実装レベルから始める方法

実装の現場で一番実用的だと感じるのが、BEM（Block Element Modifier）の思想です。
難しく聞こえるかもしれませんが、実はシンプルなルールなんです。

BEMの基本ルール

BEMは ブロック__エレメント--モディファイア という構造です。
具体例で説明します。

ブロック：独立した部品
例：.card（カードコンポーネント）

エレメント：ブロック内の子要素（2つのアンダースコア __ で繋ぐ）
例：.card__title、.card__image、.card__description

モディファイア：状態やバリエーション（ハイフン2つ -- で繋ぐ）
例：.card--featured、.card__title--large

実装例で見てみましょう

悪い例（命名が一貫していない）：

<div class="product-item">
  <h3 class="product-title large">商品名</h3>
  <img class="product_image" />
  <p class="desc">説明</p>
  <button class="btn btn-primary">購入</button>
</div>

良い例（BEM形式で統一）：

<div class="product">
  <h3 class="product__title product__title--large">商品名</h3>
  <img class="product__image" />
  <p class="product__description">説明</p>
  <button class="product__button product__button--primary">購入</button>
</div>

どう違うかわかりますか？
良い例では、すべてのクラス名が .product を軸に構成されています。
だから「あ、このクラスは product ブロック内の要素だな」って一目瞭然です。
CSSを書くときも、スタイルを上書きする不安がありません。

BEM命名で実装するときの注意点

1つだけ大事なポイントがあります。
ネストを深くしすぎないこと。
たとえば .card__item__title__text みたいに4階層になると、もうそれはBEMじゃなくなってます。
最大でも ブロック__エレメント までにしておくといいですよ。

まとめ

CSS命名規則は、一見地味に見えるかもしれません。
でも設計なしのコードほど、後々の保守コストを増やすものはないです。
正直、命名規則を決める時間なんてほんの数分。
それで半年後のカオスが防げるなら、めっちゃ安い投資だと思います。

「どれが正解か」じゃなくて、「チームで統一できてるか」が大事。
BEM、SMACSS、独自ルール…なんでもいいんです。
大切なのは「なぜこの規則を選んだのか」をチーム全体で理解することです。

最初は少しめんどいかもしれません。
でも続けてると、それが当たり前になって、むしろ命名がないと気持ち悪く感じるようになります。
そうなったらもう、あなたのCSS設計スキルは確実に上がってますよ。