Welche Bedeutung hat das "class" Attribute heute noch?

[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