連番クラスをつけたくなったら、ちょっと待って！
HTMLやCSSを書いていると、.sec01 .sec02 .sec03 のように、
つい連番をつけたくなることはありませんか？
一見、整理されているように見えますが、
実は「未来の自分を苦しめる」原因になってしまうかもしれません。
例えば、以下のような問題が発生する可能性があります。
- 順番を入れ替えたらクラス名がズレる
- 新しい要素を追加したら管理が面倒
- CSSやJavaScriptの修正が増えて混乱する
では、どうすれば管理しやすいHTMLにできるのか、詳しく解説していきます。
連番クラスを使うことの問題点
1. 順番を入れ替えるとクラス名がズレる
例えば、以下のようなコードを見てみましょう。
悪い例：
<section class="sec01">Section 1</section>
<section class="sec02">Section 2</section>
<section class="sec03">Section 3</section>一見、問題ないように見えますが、
「Section 2」と「Section 3」の順番を入れ替えたくなったときに問題が発生します。
修正前：
<section class="sec01">Section 1</section>
<section class="sec02">Section 2</section>
<section class="sec03">Section 3</section>
<section class="sec04">Section 4</section>
<section class="sec05">Section 5</section>修正後：
<section class="sec01">Section 1</section>
<section class="sec02">Section 2</section>
<section class="sec04">Section 4</section>
<section class="sec05">Section 5</section>
<section class="sec03">Section 3</section> <!-- ここが気持ち悪い！ -->クラス名と順番が一致しなくなり、管理がしづらくなってしまいます。
2. 新しい要素を追加したら管理が大変
例えば、あとから新しいセクションを追加したくなった場合を考えてみます。
<section class="sec01">About</section>
<section class="sec02">Services</section>
<section class="sec03">Contact</section>ここに「Blog」を「Services」と「Contact」の間に追加したいとします。
追加時：
<section class="sec01">About</section>
<section class="sec02">Services</section>
<section class="sec03">Blog</section>
<section class="sec04">Contact</section>
<!-- sec03だったContactをsec04に変更する必要がある -->このままでは、元の「Contact」がsec03のままになってしまい、
連番のルールが崩れてしまいます。
もし全てのクラス名を修正しようとすると、
HTMLだけでなく、CSSやJavaScriptのコードも修正が必要になり、手間がかかってしまいます。
3. CSSやJavaScriptの修正が増えてしまう
連番を使うと、CSSの指定も複雑になります。
悪い例：
.sec01 { background-color: lightgray; }
.sec02 { background-color: lightblue; }
.sec03 { background-color: lightgreen; }新しい要素を追加するたびに、新しいクラス名を追加しなければなりません。
また、JavaScriptでも同じ問題が発生します。
悪い例：
document.querySelector(".sec01").addEventListener("click", function() {
alert("Section 1 clicked");
});
document.querySelector(".sec02").addEventListener("click", function() {
alert("Section 2 clicked");
});
document.querySelector(".sec03").addEventListener("click", function() {
alert("Section 3 clicked");
});
要素を追加すると、JavaScriptの修正も必要になり、コードが煩雑になります。
連番を使わずに適切な命名をする方法
1. 役割に応じたクラス名をつける
連番ではなく、要素の役割を表すクラス名を使うことで、管理しやすくなります。
良い例：
<section class="about">About</section>
<section class="services">Services</section>
<section class="contact">Contact</section>このように命名すれば、順番を入れ替えても問題がありません。
.about { background-color: lightgray; }
.services { background-color: lightblue; }
.contact { background-color: lightgreen; }CSSもシンプルになり、修正が楽になります。
2. 共通のクラス名を使う
連番を使わず、共通のクラス名を活用すれば、CSSやJavaScriptの管理が簡単になります。
良い例：
<section class="section">About</section>
<section class="section">Services</section>
<section class="section">Contact</section>.section {
padding: 20px;
border: 1px solid #ddd;
}document.querySelectorAll(".section").forEach(section => {
section.addEventListener("click", function() {
alert("Section clicked");
});
});3. 命名に便利なウェブサイトの活用
適切なクラス名を考える際に、参考になるウェブサイトがあります。
Classnames
このサイトでは、CSSのクラス名やJavaScriptの関数名を付けるときに役立つ単語がテーマ別にリスト化されています。
例えば、動作を表す「Action」や、包含とグループ化を表す「Collection」などのカテゴリがあります。
詳細は以下のリンクをご覧ください。
Classnames
4. BEMやOOCSSなどの命名規則の活用
CSSの命名規則として、以下のような手法があります。
BEM（Block Element Modifier）
BEMは、CSSクラスの命名規則で、ユーザーインターフェースを独立したブロック（Block）、その中の要素（Element）、および修飾子（Modifier）に分けて考えます。
これにより、再利用性が高く、保守しやすいコードを書くことができます。
例えば、以下のようにクラス名を分かりやすく管理することができます。
<div class="card">
<div class="card__header">Title</div>
<div class="card__body">Content</div>
<div class="card__footer">Footer</div>
</div>.card {
border: 1px solid #ddd;
}
.card__header {
font-weight: bold;
}
.card__body {
padding: 10px;
}
.card__footer {
text-align: right;
}「.card__header」など、要素の役割が明確 なので、
連番なしでも管理しやすくなります。
OOCSS（オブジェクト指向CSS）
OOCSSは、共通のスタイルを使い回すことで、
無駄なクラスを減らす考え方です。
.box { padding: 20px; border: 1px solid #ddd; }
.media { display: flex; }
.media__img { margin-right: 10px; }
.media__body { flex: 1; }<div class="box media">
<div class="media__img"><img src="image.jpg" alt=""></div>
<div class="media__body">Content</div>
</div>「media」などの汎用クラスを使うことで、連番の必要がなくなる のが特徴です。
まとめ
HTMLやCSSで連番のクラス名を使うと、
順番の変更や要素の追加時に管理が大変になり、CSSやJavaScriptの修正が増えてしまいます。
そのため、連番ではなく、
「役割」や「意味のある名前」で命名する ことを意識しましょう。
- 順番を入れ替えても影響が出ない名前をつける
- 共通のクラス名を活用してスタイルを統一する
- 命名規則（BEM・OOCSS）を採用して整理する
- classnamesなどのツールを活用する
適切な命名をすることで、
後から編集しやすく、管理しやすいコードになります。
もし今、連番を使ったコードを書いているなら、
この機会に見直してみてはいかがでしょうか？
1冊ですべて身につくJavaScript入門講座 
モダンHTML&CSS 現場の新標準ガイド 
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 