Analyse der Vorteile von Klassen gegenüber IDs beim Kommentieren von HTML-Elementen

Webseiten enthalten sehr komplexe HTML-Strukturen. Wenn wir CSS verwenden, um verwandte Stile zu definieren, müssen wir entsprechende Tags für diese Strukturen angeben und dann entsprechende CSS-Selektoren schreiben, um die ihnen zugewiesenen Stile zu erhalten. Die beiden am häufigsten verwendeten Annotation-Attribute sind ID und Klasse, zum Beispiel:

Es gibt jetzt mehr Auswahlmethoden, wie z. B. Attributselektoren usw. Dies wird jedoch nicht empfohlen. Obwohl die ID und die Klasse mithilfe von Attributselektoren weggelassen werden können, treten Probleme auf, wie z. B. Unannehmlichkeiten bei späteren Wartungsarbeiten, schlechte Kompatibilität mit früheren Browsern und Beeinträchtigung der Rendering-Effizienz des Browsers. Obwohl es mehr Optionen gibt, empfehle ich dennoch, zum Erstellen von CSS-Selektoren IDs, Klassen- und Elementnamen zu verwenden.
Da sowohl die ID als auch die Klasse zum Markieren der HTML-Struktur verwendet werden können, welche sollte ich zuerst wählen? Darum geht es in diesem Artikel.

Der Unterschied zwischen ID und Klasse

Erfahrene Freunde können diesen Teil überspringen.

1. Einzigartigkeit und Wiederholbarkeit

Die ID kann nur in der Struktur der Webseite eindeutig sein. Wenn Sie ein Element mit der ID aa angeben, kann auf der Webseite kein weiteres HTML-Element mit der ID aa erscheinen. Obwohl leistungsstarke Browser mehrere doppelte IDs unterstützen und entsprechende Stile zuweisen, ist dies im Standard nicht zulässig.

Im Gegenteil, Klassen können in der Webseitenstruktur wiederverwendet werden. Wenn Sie die Klasse eines Elements als bb angeben, können Sie auch die Klasse des nächsten Elements als bb angeben. Die beiden Elemente können gleichzeitig mit dem Stil bb angewendet werden. Darüber hinaus können Sie für ein Element mehrere Klassenattributwerte angeben, sodass die Stile mehrerer Attribute gleichzeitig abgerufen werden.

2. Unterschiedliche Prioritäten in CSS

In CSS-Selektoren haben auf ID und Klasse angewendete Stile unterschiedliche Vorrang. Die Stilpriorität der ID ist höher als die der Klasse. Wenn ich den folgenden Stil für ein Div mit der ID aa und der Klasse bb angebe:

Dann zeigt der Browser einen roten Hintergrund an.

3. Sprungfunktion

Durch die Verwendung des ID-Attributs kann die Sprungfunktion des Ankertags hinzugefügt werden. Wenn wir die ID eines Divs auf der Seite als aa angeben, fügen wir nach der aktuellen URL #aa hinzu, und die Seite springt sofort zum Speicherort des Divs mit der ID aa. Beispiel: Kapitelsprung in der Baidu-Enzyklopädie. Klassen verfügen nicht über diese Funktionalität.

Warum Klasse statt ID verwenden?

Welche Vorteile bietet die Verwendung von Klassen?

1. Reduzieren Sie die Namensgebung

Es ist wirklich mühsam, komplexe Strukturen zu benennen. Wenn ich sie mit einer ID beschrifte, muss ich jeder Struktur einen Namen geben. Auf einer Webseite gibt es viele Strukturen mit demselben Stil und Effekt (z. B. einen einheitlichen Schaltflächenstil). In diesem Fall müssen wir nur einen gemeinsamen Klassenstil schreiben und diese Klasse allen Strukturen zuweisen, die denselben Stil benötigen.

2. Hohe Wiederverwendbarkeit

Klassen können in anderen Strukturen wiederverwendet werden und auf ein Element können mehrere Klassen angewendet werden, sodass ein Klassenstil häufig wiederverwendet werden kann. Eine extremere praktische Anwendung sind atomare Klassen, zum Beispiel:

Schreiben Sie Klassen so klein und prägnant wie möglich und wenden Sie die Klasse dann direkt auf das Element an, das den Stil benötigt (z. B. den Float oben) (z. B. class="fl").
In allgemeinen Anwendungen müssen Sie für einige Strukturen, die denselben Stil erfordern, nur einen Stil schreiben und diesen Strukturen dann dieselbe Klasse zuweisen. Dadurch wird ein hoher Grad an Wiederverwendung des Stilcodes erreicht und die Änderung ist auch einfacher.

3. Niedrige Priorität

Die Priorität der Klasse ist höher als der Elementname, aber niedriger als die ID. Diese Funktion mit niedriger Priorität kann verwendet werden, um das Debuggen und das Überschreiben von Stilen zu erleichtern.

Wenn wir zuvor eine ID zum Markieren eines Elements verwendet haben und den Stil dieses Elements ändern möchten, können wir nur den entsprechenden CSS-Stilcode ändern oder die Hervorhebungssyntax !important für einen bestimmten Stil verwenden, um den ursprünglichen Stil zu überschreiben.

Wenn das Element mit einer Klasse markiert ist, können wir dem Element direkt eine ID hinzufügen und dann einen CSS-Selektor der Element-ID erstellen, um sie zu ändern und zu überschreiben.

Aufgrund dieser Eigenschaften sollten wir versuchen, Klassen zum Markieren von Elementen zu verwenden, um die spätere Wartung zu erleichtern.

4.id ist ebenfalls erforderlich

Klasse ist nicht allmächtig. Es gibt viele Stellen, an denen wir auch ID zur Markierung verwenden müssen.

5. Anker-Tag-Sprung

Wenn Sie ein Ankertag zum Springen innerhalb einer Seite verwenden möchten, können Sie nur die ID eines Sprungziels angeben. Da die Klasse mehrfach verwendet werden kann, verfügt sie nicht über die Sprungfunktion.

6. Wird in der Eingabe verwendet

Wenn Sie Eingaben verwenden, müssen Sie normalerweise ein Beschriftungstag verwenden, um die Funktion der Eingabe zu beschreiben. Es gibt zwei Möglichkeiten, einer Eingabe ein Label zuzuordnen. Eine besteht darin, das for-Attribut des Labels zu verwenden, wobei der Attributwert der ID-Wert der Eingabe ist. Die andere besteht darin, das Label um die entsprechende Eingabe zu wickeln. Offensichtlich ist die erste flexibler und besser, aber Sie müssen ein ID-Attribut für die entsprechende Eingabe angeben.

Darüber hinaus gibt es einige spezielle Anforderungen, die die Verwendung einer ID erfordern und hier nicht zusammengefasst werden.

Optimale Nutzungskombination

In der Vergangenheit gab es viel Kritik an Klassen und einige sagten sogar, dass W3C das Klassen-Tag abschaffen sollte. Stalker m war einst ein begeisterter Benutzer des ID-Attributs, aber in der Praxis entdeckte er zunehmend die Vorteile von Klassen und begann, diese stattdessen zu verwenden.

Eine bessere Kombination besteht darin, die überwiegende Mehrheit der Elemente und Strukturen mithilfe der Klasse anzugeben und die ID zum Markieren der wenigen Elemente zu verwenden, die bestimmte Funktionen erfordern.