HTML要素にラベル付けする際のidに対するclassの優位性を分析する

Webページには複雑なHTML構造があり、CSSで関連するスタイルを定義する場合、これらの構造に対応するフラグを指定し、それに対応するCSSセレクタを書いて、スタイルを取得する必要がある。最も一般的なマークアップ属性は id と class の二つで、例えば

この他にも、属性セレクタなどの選択方法があります。しかし、属性セレクタの使用は、idやclassを省略できる反面、後々のメンテナンスが容易でない、初期のブラウザとの互換性が悪い、ブラウザの描画効率に影響するなど、あまりお勧めできるものではありません。そのため、選択肢は増えたものの、やはりidとclass、要素名を使ってCSSセレクタを構成することをおすすめします。
idとclassはどちらもHTMLの構造をマークアップすることができるので、どちらを使うのがいいのでしょうか？それがこの記事で説明することです。

idとclassの違い

経験者はこの部分を読み飛ばしてください。

1. 独自性・リピート可否

IDはウェブページの構造においてのみ一意であることが可能です。もし、idがaaの要素を指定した場合、ウェブページ内にidがaaの別のHTML要素が存在することはできません。強力なブラウザは、重複する複数のidとそれに対応するスタイルをサポートしますが、これは標準では認められていません。

ある要素のクラスを bb、次の要素のクラスを bb と指定し、両方の要素を同時に bb でスタイリングすることができます。また、1つの要素に対して複数のclass属性値を持つことができ、複数の属性のスタイルを同時に取得することができます。

2. CSSにおける優先順位の違い

CSSのセレクタでは、idとclassのスタイルに異なる優先順位が適用されます。idはclassよりもスタイルの優先順位が高く、idがaaでclassがbbのdivに以下のようなスタイルを指定した場合、idはclassよりも優先されます。

そうすると、ブラウザは赤色の背景として表示します。

3. ジャンプ機能

id属性を使用すると、アンカータグのジャンプ機能が追加されます。ページ内のdivにaaというidを割り当てた場合、現在のURLの後に#aaを追加すると、そのページは直ちにaaというidのdivの場所にジャンプするようになるのです。例えば、Baiduの百科事典のセクションジャンプのようなものです。クラスにはこの機能はありません。

なぜidの代わりにclassを使うのか

クラスを使うと、具体的にどのようなメリットがあるのでしょうか？

1. ネーミングを減らす

複雑な構造に名前をつけるのは本当に面倒で、マークアップにidを使うとなると、構造ごとに名前をつけなければなりません。多くの構造体が同じスタイルと効果を持つWebページ（例えば、統一されたボタンスタイル）では、汎用的なクラススタイルを書いて、同じスタイルを必要とするすべての構造体にそのクラスを割り当てればいいのです。

2. 再利用性が高い

クラスは他の構造で再利用でき、1つの要素に複数のクラスを適用できるため、クラススタイルの再利用性が高い。より極端な実用例として、アトミッククラスがある。

いくつかのクラスをできるだけ小さく短く書いて、このスタイルが必要な要素（例えば上のフロート）に直接クラスを書きます（例：class="fl")。
一般的な用途では、同じスタイルを必要とするいくつかの構造体については、単一のスタイルを記述し、それらの構造体に同じクラスを割り当てるだけで、スタイルコードの高い再利用性と修正の容易性を実現することができます。

3. 優先順位が低い

クラスは要素名より優先度が高く、idより優先度が低いので、デバッグやスタイルのオーバーライドが容易になります。

以前にある要素に id を付けておき、その要素のスタイルを変更したい場合、対応する CSS スタイルコードを修正するか、スタイルに !important 強調構文を使用して元のスタイルを上書きする必要があります。

要素にclassが付与されている場合は、要素にidを付与し、そのidに対してCSSセレクタを構築して上書きすることが可能です。

このような特徴があるため、メンテナンス性などを考えると、できるだけclassで要素に注釈をつけることが重要です。

4.idも必須です

クラスは万能ではなく、アノテーションのためにidも使わなければならないところがたくさんあります。

5. アンカータグのジャンプ

アンカータグをページ内ジャンプに使うには、classは複数回再利用できるので、ジャンプ先のidを指定するだけで、ジャンプの機能はない。

6. 入力での使用

input を使用する場合、label タグを使用して入力の機能を記述するのが一般的です。ラベルを入力に関連付けるには、ラベルのfor属性（その値は入力のid）を使用する方法と、ラベルを対応する入力に巻き付ける方法があります。明らかに前者の方が柔軟で良い方法ですが、対応する入力にid属性を指定する必要があります。

さらに、ここではまとめていませんが、idを使用しなければならない特殊なニーズもあります。

最適な組み合わせの使い方

クラスに対する批判は多く、W3Cはクラスタグを非推奨とするべきだという話もあります。ストーカーmは、かつてid属性の熱心なユーザーだったが、時間の経過とともにclassの良さを知り、classに切り替えた。

より良い組み合わせは、ほとんどの要素や構造体などにはclassを使い、特定の機能を必要とするごく少数の要素にはidを使うことです。