Webkrauts

id vs. class

Don’t use ids in selectors!? – Ein Web-Mythos

Gelegentlich hört oder lest ihr die Empfehlung, doch bitte keine ids im CSS zu verwenden. Als Gründe werden die Wiederverwertbarkeit, Performance oder der schwierige Umgang mit der Spezifität genannt. Dabei kommt es nur darauf an, ids richtig zu verwenden!

Im Netz findet ihr diverse Artikel, die sich entschieden gegen den Gebrauch von ids in CSS wenden – teils mit harschen Worten, etwa:

• Screwlewse: Don’t use ID selectors in CSS
• Harry Roberts/csswizardry.com: When using IDs can be a pain in the class...
• Oli Studholme: Don’t use IDs in CSS selectors?

Die wiederkehrenden Argumente lauten:

• ids sind nicht wiederverwendbar
• ids sind langsam
• ids wirken so stark auf HTML-Elemente, dass ihr nur schwer entgegengewirkt könnt

Einsatz von id und class beim W3C

Grundlegende Informationen über den Einsatz von id- und class-Attributen findet ihr in den Spezifikationen des W3C:

Das id-Attribut kann für verschiedene Zwecke verwendet werden [...] und ist eine Möglichkeit, ein spezielles Element über CSS zu stylen
(frei übersetzt, W3C: the-id-attribute).

Werden einem Element class-Attribute hinzugefügt, wird darüber ein Bezug zum Selektor im CSS hergestellt
(frei übersetzt, W3C: classes).

Sprich: Die Spezifikationen des W3C sehen sowohl id- als auch class-Attribute für den Einsatz im CSS vor. Der Einsatz des class-Attributs ist vielen ausschließlich im Zusammenhang mit CSS vertraut, da class zumeist für nichts anderes verwendet wird. Aber ebenso wie ids sind Klassen nicht ausschließlich auf Layout/CSS beschränkt; class-Attribute können auch zu anderen Zwecken verwendet werden: zum Beispiel als eine "is-open"- und "is-closed"-class in einem Akkordeon – was an der Stelle als Darstellungsstatus verstanden werden kann und nicht als Style-Anweisung.

Die Spezifikationen sehen also beides vor. Und: Es wird keine Empfehlung darüber ausgesprochen, wann eine id und eine class einzusetzen sind. Auch ein Verbot der Verwendung von ids ist nicht zu finden.

CSS LINT – Der Ursprung des Mythos?

CSS LINT ist eine Webseite/ein Testtool, das CSS-Code überprüft. Dabei werden Fehlermeldungen, Warnungen und Hinweise ausgegeben, die für einen besseren Code dienen sollen. Einer der Hinweise lautet: »Don’t use ids in selectors.« Warum Webentwickler das nicht tun sollen, wird an dieser Stelle nicht erklärt.

Auf der About-Seite von CSS LINT ist dann die Erklärung zu finden: »ids shouldn’t be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It’s much preferred to use classes in selectors and then apply a class to an element in the page.«

Frei übersetzt: ids sollten nicht verwendet werden, da die Regeln zu eng ans HTML geknüpft sind und keine Möglichkeit der Wiederverwendung haben. Stattdessen ist deutlich zu bevorzugen, class-Attribute in Selektoren zu verwenden und die class dem HTML-Element hinzuzufügen.

ids sind nicht wieder verwendbar

Das in oben genannten Blogbeiträgen genannte Argument taucht hier wieder auf. Und diese Aussage ist verwirrend. Natürlich ist eine id nicht wiederverwendbar. Genau das ist das Wesen einer id, sie ist immer eindeutig. Das ist ihr Zweck, wie zum Beispiel als Anker für einen bestimmten Bereich einer Seite, um diesen mit einem Link anspringen zu können, oder als Verbindung zum for-Attribut eines Labels, wenn Webentwickler ein Label eindeutig mit einem Eingabefeld verknüpfen möchten.

Was aber genau ist jetzt das Kritische, wenn eine id im CSS nicht wiederverwendbar ist? Es drängt sich der Eindruck auf, dass es nicht um die böse id geht, sondern schlicht um falsch eingesetzte ids. Ein Quelltext wie der Folgende könnte zu diesem Schluss führen:

Um die Links über ids zu steuern, werden im CSS drei Regeln benötigt. In der Tat, hier greift das Argument, dass ids nicht wieder verwendbar sind. Der bessere Quelltext sähe sicher so aus:

Damit wäre für die Steuerung des Aussehens der Links nur noch eine CSS-Regel notwendig. Aber: Hier geht es nicht um böse oder gute ids, sondern um den zielgerichteten Einsatz dieses Attributs.

Der obige HTML-Code mag albern aussehen, ist jedoch so oder vergleichbar im HTML diverser Webseiten zu finden. Es stellt sich eher die Frage, ob jedem einzelnen Element eine Klasse zugewiesen oder eher die Klasse einem darüber liegenden Element hinzugefügt wird, um das HTML einfacher und übersichtlicher zu halten:

So können die Links über einen Kombinationsselektor gesteuert werden:

Es geht in diesen Beispielen darum, wie effektiv oder elegant ein gut lesbarer und schlichter HTML-Code geschrieben werden kann und weicht von der eigentlichen Frage, warum keine ids verwendet werden sollen, ab. Also: zurück zum Thema ids.

ids haben eine unberechenbare Wirkung

Harry Roberts schreibt in seinem Artikel , dass der Einfluss einer id unberechenbar sei und man Kopfschmerzen bekomme, wenn die Anweisung einer id überschrieben werden soll. Er vergleicht ids sogar mit !important. Eine Aussage, die nicht haltbar ist.

Einen Blick auf sein jsfiddle-Beispiel erklärt, wie Roberts zu seiner Aussage kommt: Er setzt ids lediglich falsch ein; falsch wie in den Beispielen oben auf dieser Seite. Er verwendet ids als seien es class-Attribute und ist sich der unterschiedlichen Spezifität der verschiedenen Attribute nicht bewusst. (Oder genauer: Er wird das Beispiel absichtlich so gebaut haben, um es als Argument gegen ids zu nutzen.)

Das, was er als böse verpönt, ist genau das Gegenteil: Es ist die Kraft einer id, und eine sinnvoll eingesetzte id ist genau das, was CSS ausmacht. Folgende CSS-Regeln sind beispielhaft dafür, wie ids sinnvoll und zielgerichtet eingesetzt werden können:

Diese zwei Regeln steuern das Aussehen von Links. Die erste Regel definiert die Farbe aller Links und fügt einen Unterstrich hinzu. Die zweite definiert die Linkfarbe für den Fuß der Webseite.

Das Argument einer nicht möglichen Wiederverwendbarkeit von ids greift hier nicht. Denn: Alle Webseiten haben nur einen Footer, und der Einsatz einer id für diesen ist legitim. Viele Webworker würden dies sogar als guten Stil bezeichnen.

Mit diesen CSS-Regeln wird die höhere Spezifität der id genutzt: Das #footer a stellt sicher, dass die Links im Seitenfuß grau sind. Er ist zwar ebenfalls möglich, dem Footer eine class="footer" zuzuweisen und dann über .footer a die CSS-Regel aufbauen – in dem Fall besteht jedoch die Gefahr, durch den Einsatz einer anderen class im Footer und einer anderen CSS-Regel genau diese Regel zu überschreiben. Mit einer id wird dies hingegen nicht passieren.

Die Diskussion um das Verbot von ids kann mit persönlichen Vorlieben erklärt werden. Einige empfinden die höhere Spezifität als Nachteil, andere als Vorteil. Besser als ids generell zu verbieten ist es, sich ihrer Spezifität zu widmen, um sie dann gezielt einzusetzen (Bestimmung der Spezifität). Diese Gewichtung bzw. Spezifität ist nichts Zufälliges, sondern ist explizit in den Spezifikationen des W3C vorgesehen. Das elegante Spielen mit Gewichtungen, um auch ohne !important auszukommen, ist das, was CSS ausmacht.

ids im CSS auszulassen ist, wie ein Auto ausschließlich im 1. Gang zu fahren, und das damit zu begründen, dass man im 4. Gang nicht anfahren kann.

ids sind langsam

Oli Studholme hat die Performance von ids und class-Attributen getestet und ist bei 1.000 Elementen zu einem Unterschied von 12.7 Millisekunden gekommen! Also dem Bruchteil einer Lidschlags. Auch wenn Studholme den Verzicht von ids befürwortet, trifft er in Bezug auf die Geschwindigkeit eine wichtige Aussage: »The performance difference between classes and ids is irrelevant.« (Der Geschwindigkeitsunterschied spielt keine Rolle)

JS und CSS-Dateien können minifiziert werden, Grafiken sollten immer fürs Web optimiert sein; im HTML-Code kann auf Kommentare verzichtet werden und es kann geprüft werden, ob wirklich alle JavaScript-Dateien benötigt werden, die beim Aufsetzen einer Webseite »einfach mal so« eingebunden werden, um eine Webseite und damit die Ladezeit zu optimieren. Jedoch für gerade einmal 12.7 Millisekunden Zeitersparnis ids zu verbieten (den 4. Gang im Auto zu verbieten) wäre absurd.

id-Verbot als Coding-Guidelines

Ein Verbot von ids kann weder mit dem W3C-Standard noch aus technischen Gesichtspunkten begründet werden. Allerdings kann sich ein Team darauf einigen, keine ids für das CSS zu verwenden. Coding-Guidelines haben eine Berechtigung und verbessern mit Sicherheit die Qualität von Quelltexten. Allerdings ist und bleibt es Geschmackssache, ob ids verwendet werden oder nicht. Aus technischer Sicht ist es genauso irrelevant wie beispielsweise, ob ihr bei CSS-Regeln die Klammern hinter oder in der Zeile nach dem Selektor schreibt.

Fazit

»Don’t use ids in selectors« ist ein Mythos der Webentwicklung. Auf ids im CSS zu verzichten ist nicht sinnvoll. Im Gegenteil. Wer auf ids verzichtet, der beraubt sich einer großartigen Möglichkeit, die CSS genauso vorgesehen hat und die CSS ausmacht.