クラス名の付け方に迷わなくなる考え方

red、box2、aaa——クラス名が思いつかないのは、名前を見た目で付けようとしているからです。名前は「どう見えるか」ではなく「何のためのものか」で付ける。これだけで迷いはほとんど消えます。

見た目で名づけると、あとで困る

.red {
  color: #e5484d;
}

一見よさそうですが、「やっぱり青にしよう」と思ったときに詰みます。

<!-- クラス名はredなのに青い、という地獄 -->
<p class="red" style="color: blue;">セール中</p>

役割で名づけていれば、色を変えても名前はそのままで済みます。

.price-sale {
  color: #e5484d;
}

「これは何か」と自分に聞いて、その答えを英語にする——これが基本の作法です。

BEM——迷わないための定番ルール

とはいえ、名前を自由に付けていくと、今度は「似た名前だらけ」になります。世界的によく使われている命名ルールがBEMです。読み方は「ベム」。

block__element--modifier

実例で見る

<div class="card">
  <h3 class="card__title">しまちゃん</h3>
  <p class="card__text">ゆきぐにに住んでいます。</p>
</div>

<div class="card card--highlight">
  <h3 class="card__title">おしらせ</h3>
  <p class="card__text">あたらしい絵をかきました。</p>
</div>

.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
}
.card__title {
  font-size: 18px;
  margin: 0 0 8px;
}
.card--highlight {
  border-color: #ff8a3d;
  background: #fff8f3;
}

ポイントは、変化を付けるときに元のクラスを消さずに足すこと（class="card card--highlight"）。共通の見た目はcardに書いたまま、違いだけをcard--highlightに書けます。

ゆるくても構わない。大事なのは一貫性

BEMを完璧に守る必要はありません。個人のサイトなら、次の3つだけでも十分に効果があります。

1. 役割で名づける（redではなくprice-sale）
2. かたまりごとに接頭辞をそろえる（hero、hero-title、hero-image）
3. 同じサイトの中で書き方を混ぜない（camelCaseとkebab-caseを行き来しない）

いちばん困るのは、ルールが無いことではなくルールがバラバラであることです。

classとidの使い分け

見た目はclass、と覚えてください。idでスタイルを書くと、後から少しだけ変えたいときに上書きできず苦労します。

名前に使ってよい文字

• 半角英小文字とハイフンが基本（profile-card）
• 数字は途中や末尾ならOK（step2）。ただし先頭に数字は使えない（2stepはエラー）
• 日本語やスペースは避ける

まとめ

1. クラス名は見た目ではなく役割で付ける（redではなくprice-sale）
2. BEMはblock__element--modifier。かたまり・部品・変化の3階層で名づける
3. 完璧さより一貫性。見た目はclass、idはJavaScriptとページ内リンクに使う

名前が整っているCSSは、1か月後の自分が読んでも意味が分かります。それがいちばんの効果です。