目次
class命名ルールとは？
class命名ルールとは、
HTMLやCSSで使うclass名を、一定の考え方に沿って付けるルールのことです。
単に動けば良いのではなく、
- 自分が後から見ても分かる
- 他人が見ても意味が伝わる
- 修正や追加がしやすい
状態を作ることが、class命名の目的です。
なぜclass命名ルールが重要なのか？
命名を適当にすると、次のような問題が起こります。
- class名を見ても役割が分からない
- 似たclassが量産される
- CSSがどこに効いているのか追えない
- 修正が怖くなる
これはスキル不足ではなく、
命名ルールがないことが原因です。
命名ルールがないと起こる典型例
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>.box1 { margin-top: 20px; }
.box2 { margin-top: 25px; }
.box3 { margin-top: 22px; }この状態になると、
- 何が違うのか分からない
- 再利用できない
- 変更の影響範囲が読めない
という問題が一気に発生します。
class命名の基本原則
初心者の方は、まず次の3つを意識してください。
- 見た目ではなく役割で命名する
- 短すぎず、長すぎない
- 英単語を正しく使う
これだけでも、class設計は大きく改善します。
見た目ではなく「役割」で命名する
悪い例（見た目ベース）
<p class="red-text">エラーです</p>.red-text {
color: red;
}色が変わったら、class名が破綻します。
良い例（役割ベース）
<p class="error-text">エラーです</p>.error-text {
color: red;
}「何の要素か」が分かる命名が理想です。
レイアウト用と装飾用を分ける
classには役割の違いがあります。
- レイアウト用
- 見た目用
- 状態用
これを混ぜると、再利用しにくくなります。
悪い例
<div class="card-center"></div>良い例
<div class="card layout-center"></div>.card {
background: #fff;
}
.layout-center {
text-align: center;
}class名は具体的すぎない方がよい
悪い例
<div class="top-page-main-visual-text"></div>長すぎる命名は、使い回しができません。
良い例
<div class="main-visual-text"></div>「他のページでも使えるか？」を基準に考えましょう。
英単語は意味が通じるものを使う
よくある失敗例です。
<div class="box-area"></div>「box」や「area」は意味が広すぎます。
改善例
<div class="header-nav"></div>
<div class="product-list"></div>HTML構造が想像できる命名が理想です。
初心者向け・最低限のclass命名ルール
まずは、次のルールだけ守れば十分です。
- 数字だけのclass名を使わない
- 色・サイズをそのまま書かない
- 役割が分かる英単語を使う
- 同じ意味のclassを増やさない
これだけで、CSSは一気に読みやすくなります。
有名な命名ルールを無理に使わなくていい
BEMなどの命名ルールは有名ですが、
初心者が最初から使う必要はありません。
大切なのは、
- 一貫性があること
- 自分やチームが理解できること
です。
命名で迷ったときの考え方
迷ったときは、次の質問を自分にしてください。
- このclassは何の役割？
- 他でも使える？
- 見た目が変わっても名前は合う？
この3つに答えられれば、
命名はほぼ正解です。
まとめ：class命名はCSS設計の土台
class命名ルールは、
- CSS設計
- 保守性
- 可読性
すべての土台になります。
最初から完璧を目指す必要はありません。
- 役割で命名する
- ルールを決めて守る
この意識を持つだけで、
あなたのCSSは確実にレベルアップします。
ぜひ、今後のコーディングに活かしてください。