HTML 要素をマークするときに ID よりもクラスの利点を分析する

Web ページには非常に複雑な HTML 構造があり、CSS を使用して関連するスタイルを定義する場合、これらの構造に対応するフラグを指定し、対応する CSS セレクターを作成して、それらに割り当てられたスタイルを取得する必要があります。最も一般的に使用される 2 つのアノテーション属性は、id と class です。例:

<p class=”header” id=”header” ></p>

現在、属性セレクターなどの選択メソッドがさらに増えています。ただし、属性セレクターを使用することでidやclassを省略することは可能ですが、後のメンテナンスが不便であること、初期のブラウザとの互換性が低いこと、ブラウザの描画効率に影響を与えることなどの問題がありますので、使用はお勧めしません。したがって、さらに多くのオプションがありますが、CSS セレクターを構築するには要素名とともに id と class を使用することをお勧めします。
ID とクラスの両方で HTML 構造に注釈を付けることができるため、最初に何を使用するかを選択する必要がありますか?この記事ではこれについて説明します。

IDとクラスの違い

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

1. 一意性と再現性

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

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

2. CSS の異なる優先順位

CSS セレクターでは、ID とクラスにスタイルを適用する優先順位が異なります。 ID のスタイル優先度は、クラスのスタイル優先度よりも高くなります。ID aa およびクラス bb の p に次のスタイルを指定すると、ブラウザには赤い背景が表示されます。

3. ジャンプ関数

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

ID の代わりにクラスを使用する理由

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

1. 名前の付け方を減らす

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

2. 再利用性が高い

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

#aa{background:red;}   
.bb{background:blue;}

いくつかのクラスをできるだけ小さく簡潔に記述してから、このスタイルを必要とする要素 (例: 上の float) のクラスを直接記述します (例: : クラス = "fl")。

一般的なアプリケーションの場合、同じスタイルを必要とする一部の構造では、1 つのスタイルを記述し、これらの構造に同じクラスを割り当てるだけで済みます。これにより、高度なスタイル コードの再利用が実現でき、また、より便利になります。修正する。

3. 低優先度

class は、要素名よりも高く、 id よりも低い優先度を持ちます。この低優先度の機能を使用すると、デバッグとスタイル カバレッジが容易になります。 以前に id を使用して要素をマークし、この要素のスタイルを変更したい場合は、対応する CSS スタイル コードを変更するか、特定のスタイルの ! important 強調構文を使用して元のスタイルをオーバーライドすることしかできません。

要素が class でマークされている場合、要素に ID を直接追加し、要素 ID の CSS セレクターを構築して変更し、上書きします。

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

4.id も必須です。

class は同時にマークする必要がある場所がたくさんあります。

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

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

6. 入力で使用されます

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

さらに、いくつかの特別な要件では ID も使用する必要がありますが、ここでは要約しません。

使い方のベストな組み合わせ

クラスについてはこれまでも多くの批判があり、W3C はクラス タグを廃止すべきだとさえ言う人もいました。ストーカー m はかつて id 属性の熱心なユーザーでしたが、実際にはそれ以上です。などなど、クラスの利点を発見し、代わりに使用するようになりました。

より良い組み合わせは、クラスを使用してほとんどの要素と構造を指定し、特定の関数を必要とするごく少数の要素に ID アノテーションを使用することです。

HTML 要素をマークする際の ID よりもクラスの利点に関する詳細な分析については、PHP 中国語 Web サイトに注目してください。