目次
- class命名ルールとは？まず一文で
- なぜclass命名がそこまで大事なのか
- 命名ルールがないと起こる典型トラブル
- class命名の基本原則3つ
- 1. 見た目ではなく役割で命名する
- 2. 同じ意味のclassを増やさない
- 3. 影響範囲が想像できる名前にする
- 見た目ベース命名が危険な理由
- 悪い例
- 良い例（役割ベース）
- レイアウト用と装飾用を分ける
- 悪い例
- 良い例
- 長すぎるclass名も危険
- 悪い例
- 改善例
- よくある初心者の誤解
- 「短い方が良い」
- 「英語っぽければOK」
- DevToolsで命名の良し悪しを確認する方法
- 横スクロール問題と命名の関係
- 最低限これだけ守ればOKチェックリスト
- 少しステップアップ：設計を意識する
- class命名で迷ったときの質問
- まとめ：命名はCSS設計の土台
class命名ルールとは？まず一文で
class命名ルールとは、HTMLやCSSで使うclass名に一貫した意味を持たせ、崩れにくく・直しやすいコードにするための考え方です。
動けばOK、ではありません。
- 後から見て理解できるか
- 3ヶ月後の自分が修正できるか
- スマホ崩れが起きたときに原因を追えるか
ここまで考えて初めて「良い命名」です。
なぜclass命名がそこまで大事なのか
CSSが少ないうちは問題になりません。
でも、ページが増えるとこうなります。
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>これ、どれが何なのか分かりますか？
正直、1週間後には自分でも分からなくなります。
私は昔、.redというクラスをサイト全体で使っていました。
ある日ブランドカラーが変わり、全部修正する羽目に。
影響範囲が読めず、スマホだけ文字色が変わらないバグも発生。
原因は「見た目ベースの命名」でした。
命名ルールがないと起こる典型トラブル
- CSSがどこに効いているか分からない
- 修正したら別ページが崩れる
- 横スクロール問題が急に発生する
- スマホ表示だけ崩れる
スキルの問題ではありません。
設計の問題です。
class命名の基本原則3つ
まずはこの3つだけ守ります。
1. 見た目ではなく役割で命名する
2. 同じ意味のclassを増やさない
3. 影響範囲が想像できる名前にする
これだけで一気に整理されます。
見た目ベース命名が危険な理由
悪い例
<p class="red-text">エラーです</p>.red-text {
color: red;
}色が変わったらどうしますか？
名前と中身がズレます。
良い例（役割ベース）
<p class="error-text">エラーです</p>.error-text {
color: red;
}赤じゃなくなっても成立します。
「何のための要素か」で命名します。
レイアウト用と装飾用を分ける
よくある崩れの原因は、役割の混在です。
悪い例
<div class="card-center"></div>何のcard？
なぜcenter？
良い例
<div class="card layout-center"></div>.card {
background: #fff;
}
.layout-center {
text-align: center;
}部品とレイアウトを分離します。
これだけで再利用性が上がります。
長すぎるclass名も危険
悪い例
<div class="top-page-main-visual-text-large"></div>ページ限定になります。
他で使えません。
改善例
<div class="main-visual-text"></div>ページ名は外します。
コンポーネント単位で考えます。
よくある初心者の誤解
「短い方が良い」
違います。
.boxや.areaは意味が広すぎます。
「英語っぽければOK」
意味が通じない単語は避けます。
DevToolsで命名の良し悪しを確認する方法
- 右クリック → 検証
- Elementsタブでclassを見る
- 名前だけで構造が分かるか確認
もし、
- box
- item
- content
- wrapper
だらけなら要注意です。
横スクロール問題と命名の関係
スマホで横スクロールが出る原因。
実は「影響範囲が広すぎるCSS」が多いです。
.container div {
width: 1200px;
}こんな指定が入ると、
想定外の要素まで影響します。
命名が曖昧だと、セレクタも曖昧になります。
最低限これだけ守ればOKチェックリスト
✔ 数字だけのclass名を使わない
✔ 色やサイズを直接書かない
✔ 再利用できる名前か考える
✔ DevToolsで影響範囲を確認する
✔ 同じ意味のclassを増やさない
少しステップアップ：設計を意識する
クラス命名は「設計」です。
- コンポーネント単位で考える
- レイアウトと部品を分ける
- 状態は別クラスにする
例えば：
<button class="button is-active"></button>.button { ... }
.is-active { ... }状態は分離します。
これで管理が楽になります。
class命名で迷ったときの質問
- これは何の部品？
- 見た目が変わっても成立する？
- 他のページでも使える？
この3つに答えられれば、大きく外れません。
まとめ：命名はCSS設計の土台
class命名は地味です。
でも、
- 修正のしやすさ
- 崩れにくさ
- チーム開発の安定感
全部ここに直結します。
完璧なルールは不要です。
まずは、
「役割で名前を付ける」
ここから始めてみてください。
CSSがぐっと扱いやすくなります。