Welche Bedeutung hat das "class" Attribute heute noch?

[Michael_K]

Moderne Browser können sehr gut mit den data-* Attributen in HTML5 Seiten umgehen. Auch die CSS Selektoren sin dinzwichen sehr mächtig und irgendwie nutze ich nicht mehr die class Attribute. Welche Gründe sprechen dafür, trotzdem das class Attribute zu verwenden? Performance kann ich keine Unterschiede feststellen.

Gruss

[Der Martin]

Hallo,

Moderne Browser können sehr gut mit den data-* Attributen in HTML5 Seiten umgehen. Auch die CSS Selektoren sin dinzwichen sehr mächtig und irgendwie nutze ich nicht mehr die class Attribute. Welche Gründe sprechen dafür, trotzdem das class Attribute zu verwenden? Performance kann ich keine Unterschiede feststellen.

es ist einfach eine Frage der Semantik. Wenn ich mehrere Elemente habe (egal ob gleiche oder unterschiedliche Elementtypen), die ein gemeinsames charakteristisches Merkmal haben, dann ist das class-Attribut immer noch das Mittel der Wahl - es sei denn, man kann dieses gemeinsame Merkmal z.B. an einem gemeinsamen Vorfahrenelement festmachen. Dann ist natürlich dieses mit dem Nachfahrenselektor sinnvoller.

Eine allgemeingültige Aussage dazu gibt es vermutlich nicht.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Michael,

das class Attribut ermöglicht Dir über die classList Eigenschaft das Hinzufügen oder entfernen einer oder mehrerer Klassen zu einem Element. Bei data-Attributen müsstest Du pro Klasse ein eigenes Attribut erzeugen. Eine space-getrennte Aufzählung in einem einzigen data-Attribut wird Dir sicherlich nicht vorschweben (vor allem, weil man dann kaum einen CSS Selektor zustande bringt, der abfragt, ob ein Element 2 von 5 möglichen „data-Klassen“ hat.

Class-Selektoren sind viel kompakter als Attribut-Selektoren. D.h. eine große CSS Datei, in der viel mit Klassen gearbeitet wird, könnte auf diese Weise ein paar Prozent größer werden. Dem Desktop ist's egal, dem schmalbandig angebundenen Mobiltelefon nicht.

Zum Beispiel li.foo.bar vs li[data-foo][data-bar].

Klassen sind boolesche Schalter. "Element hat Klasse" vs "Element hat Klasse nicht". Attribute sind Strings. D.h. du kannst damit deutlich mehr machen als mit Klassen, und dieses Potenzial bedeutet, dass ein Attribut auch mehr Speicher braucht. Eine Klasse ist ein Wert in einer DOMTokenList. Ein Attribut ist ein vollwertiger AttributeNode im DOM, mit Name, Wert und optionalem Namespace. Ein Attribut herauszusuchen bedeutet (mutmaßlich), die AttributeNodes eines Elements sequenziell zu scannen. Eine Klassenabfrage greift auf eine spezialsierte DOMTokenList zu.

Dass Du keinen Performance-Unterschied feststellst, muss nicht heißen, dass da keiner ist. Man sollte davon ausgehen, dass der Umgang mit class speziell in den Layout-Engines optimiert ist. Ich habe jetzt keine Lust auf Benchmarks, aber um das wirklich zu bemerken, wird man ein großes Dokument mit vielen Klassen und vielen Styles brauchen. Der Unterschied wird vermutlich nicht groß sein. Aber auch nur 1% macht sich auf Dauer bemerkbar, z.B. wenn die Seite auf einem Mobiltelefon dargestellt wird. Der Prozessor braucht dann 1% Zeit mehr für das Layout, und das belastet den Akku.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Eine space-getrennte Aufzählung in einem einzigen data-Attribut wird Dir sicherlich nicht vorschweben (vor allem, weil man dann kaum einen CSS Selektor zustande bringt, der abfragt, ob ein Element 2 von 5 möglichen „data-Klassen“ hat.

Hold my beer.

Ein Klassenselektor .foo ist – aus CSS-Sicht – nicht anderes als eine kürzere Schreibweise für einen Attributselektor [class~="foo"]. .foo.bar ist nichts anderes als [class~="foo"][class~="bar"].

Und statt class kann man im Attributselektor ja auch andere Attribute abfragen.

Man sollte davon ausgehen, dass der Umgang mit class speziell in den Layout-Engines optimiert ist.

Ja. Deshalb oben „aus CSS-Sicht“. Aus Browser-Engine-Sicht mag das in der Tat anders aussehen.

😷 LLAP

[Robert B.]

Hallo Michael,

Moderne Browser können sehr gut mit den data-* Attributen in HTML5 Seiten umgehen.

je nach Anwendungsfall gibt es auch noch genug ältere oder schlankere User-Agents, die mit data-* nichts anfangen können.

Auch die CSS Selektoren sin dinzwichen sehr mächtig und irgendwie nutze ich nicht mehr die class Attribute. Welche Gründe sprechen dafür, trotzdem das class Attribute zu verwenden?

Es gibt den Tipp „class with semantics in mind“ zu nutzen. class und seine API sind standardisiert, dein data-Ansatz ist proprietär. Ohne zusätzliche Informationen sind deine data-* nicht semantisch. Und jeder proprietäre Ansatz, der versucht die Funktionalität einer standardisierten API nachzubauen scheitert, wenn sich die API gravierend ändert. Warum also nicht diese Gefahr ausschließen und die Standard-API verwenden?

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

class und seine API sind standardisiert, dein data-Ansatz ist proprietär.

Mitnichten. data und sein(!) API sind ebenfalls standardisiert.

Ohne zusätzliche Informationen sind deine data-* nicht semantisch.

Nicht weniger semantisch als class. (Wir reden hier nicht über microformats.org.)

😷 LLAP

[Robert B.]

Hallo Gunnar,

class und seine API sind standardisiert, dein data-Ansatz ist proprietär.

Mitnichten. data und sein(!) API sind ebenfalls standardisiert.

natürlich ist data-* und sein API standardisiert, aber nicht das, was Michael darauf aufgebaut hat. Das Wort dein steht da nicht ohne Grund.

Viele Grüße
Robert