HTML 要素に注釈を付けるときにクラスと ID のどちらが優れているかを分析する

Web ページには、非常に複雑な HTML 構造があります。CSS を使用して関連するスタイルを定義する場合は、これらの構造に対応するタグを指定し、対応する CSS セレクターを記述して、それらに割り当てられたスタイルを取得する必要があります。最もよく使用される 2 つの注釈属性は id と class です。次に例を示します。

属性セレクターなどの選択方法が増えました。ただし、推奨されません。属性セレクターを使用することで id と class を省略できますが、後々のメンテナンスに不便があったり、初期のブラウザとの互換性が悪くなったり、ブラウザのレンダリング効率に影響が出たりするなどの問題があります。したがって、オプションは他にもありますが、CSS セレクターを構築するには、ID、クラス、要素名を使用することをお勧めします。
id と class の両方を使用して HTML 構造をマークできるため、どちらを最初に選択すればよいでしょうか?これについてはこの記事で説明します。

idとclassの違い

経験豊富な友人はこの部分をスキップできます。

1. 独自性と再現性

ID は Web ページ構造内で一意である必要があります。ID が aa の要素を指定した場合、ID が aa の別の HTML 要素は Web ページに表示されません。強力なブラウザは複数の重複 ID をサポートし、対応するスタイルを割り当てますが、これは標準では許可されていません。

逆に、クラスは Web ページ構造内で再利用できます。ある要素のクラスを bb として指定すると、次の要素のクラスも bb として指定できます。2 つの要素に同時に bb のスタイルを適用できます。また、要素に対して複数のクラス属性値を指定できるため、複数の属性のスタイルを同時に取得することができます。

2. CSSにおける異なる優先順位

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

するとブラウザに赤い背景が表示されます。

3. ジャンプ機能

id 属性を使用すると、アンカー タグ ジャンプ機能を追加できます。ページ内の div の id を aa として指定し、現在の URL の後に #aa を追加すると、ページはすぐに id が aa の div の場所にジャンプします。例: Baidu 百科事典の章ジャンプ。クラスにはこの機能はありません。

なぜ id ではなく class を使用するのですか?

クラスを使用する利点は何ですか?

1. 名前を減らす

複雑な構造に名前を付けるのは本当に面倒です。id を使用してラベルを付ける場合は、各構造に名前を付ける必要があります。 Web ページには、同じスタイルと効果を持つ構造が多数あります (たとえば、統一されたボタン スタイル)。この場合、共通クラス スタイルを記述し、同じスタイルを必要とするすべての構造にこのクラスを割り当てるだけで済みます。

2. 再利用性が高い

クラスは他の構造で再利用でき、複数のクラスを要素に適用できるため、クラス スタイルは高度に再利用できます。より極端な実用的なアプリケーションは、アトミック クラスです。次に例を示します。

クラスをできるだけ小さく簡潔に記述し、スタイルを必要とする要素 (上記のフロートなど) にクラスを直接適用します (例: class="fl")。
一般的なアプリケーションでは、同じスタイルを必要とする一部の構造に対して、1 つのスタイルを記述し、それらの構造に同じクラスを割り当てるだけで済みます。これにより、スタイル コードの再利用度が高まり、変更も容易になります。

3. 優先度が低い

クラスの優先度は要素名よりも高くなりますが、ID よりも低くなります。この低優先度機能を使用すると、デバッグやスタイルのオーバーライドが容易になります。

以前に ID を使用して要素をマークし、この要素のスタイルを変更する場合は、対応する CSS スタイル コードを変更するか、特定のスタイルに対して !important 強調構文を使用して元のスタイルを上書きすることしかできません。

要素にクラスが付けられている場合は、要素に直接 ID を追加し、要素 ID の CSS セレクターを構築して変更および上書きすることができます。

これらの特性のため、後のメンテナンスを容易にするために、クラスを使用して要素をマークするようにしてください。

4.IDも必要です

クラスは万能ではありません。マークするために id も使用する必要がある場所が多数あります。

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

アンカータグを使用してページ内をジャンプしたい場合は、ジャンプ先のidのみ指定できます。クラスは繰り返し使用できるため、ジャンプ機能はありません。

6. 入力に使用

入力を使用する場合、通常はラベル タグを使用して入力の機能を説明する必要があります。ラベルを入力に関連付ける方法は 2 つあります。1 つはラベルの for 属性を使用する方法で、属性値は入力の id 値になります。もう 1 つは対応する入力をラベルで囲む方法です。明らかに最初の方法の方が柔軟で優れていますが、対応する入力に id 属性を指定する必要があります。

さらに、id の使用を必要とする特別な要件がいくつかありますが、ここでは概要を説明しません。

最適な使用の組み合わせ

過去にはクラスに対する批判が多く、W3C はクラス タグを廃止すべきだと主張する人もいました。Stalker m はかつて id 属性の熱心なユーザーでしたが、実際にはクラスの利点に気づき、代わりに使い始めました。

より良い組み合わせは、クラスを使用して大部分の要素と構造を指定し、id を使用して特定の機能を必要とするごく少数の要素をマークすることです。