Advanced CSS - Pro und Contra - "id" versus "class"
1. Vorwort
Kommen wir nun zu einem etwas heiklen Thema. Nämlich zu der Frage, wann man mit id und wann mit class arbeiten
sollte/könnte. Nachdem ich dazu mal etliche Leute aus meiner Branche befragt habe, scheint es einen weit verbreiteten Konsens zu geben.
Dabei gehen viele so vor, dass sie einmalig vorkommende Elemente mit einer id versehen und den Rest mit einer
class. Dies gilt offenbar vor allem für div-"Container", mit denen eine Seite in bestimmte Abschnitte unterteilt
wird. Das Hauptargument für diese Vorgehensweise lautet meistens so:
"Ich finde das so übersichtlicher." [Quelle: diverse Kollegen]
Ich nicht!
So, jetzt trete ich mit Sicherheit in unzählige Wespennester, da ich mit meiner Meinung zu einer wohl recht kleinen Minderheit gehöre. Gut, beide Ansichten lassen sich nicht wirklich logisch begründen und es gibt kein wirkliches Argument für die eine oder andere Möglichkeit. Darum bringe ich jetzt einfach mal zwei Beispiele, die meiner Meinung nach gegen die Verwendung von IDs spricht.
2. Ein kleines Wider
Alle die sich auch nur halbwegs mit HTML und CSS auskennen, wissen, dass man auf einer Seite eine ID nur für ein Element vergeben darf. Oder sie sollten es zumindest wissen. Nichtsdestotrotz passiert es auch Profis, dass eine ID im Eifer des Gefechts oder aus Versehen zweimal vergeben wird. Das habe ich schon oft genug gesehen.
<div id="bla">...</div>
...
<!-- Hundert Zeilen später -->
<div id="bla">...</div>
Gut, hier könnte man auch sagen, dass die Leute selber daran schuld sind und besser aufpassen sollten. Aber sind wir mal ehrlich. So etwas kann immer mal passieren, oder anders ausgedrückt
"Shit happens" [Quelle: Forrest Gump]
3. Ein seltenes aber großes Wider
Mit dem folgenden Problem bin ich selber konfrontiert worden. Ich gebe zu, dass es wohl eher selten auftritt, aber wenn dem so ist, hat man
ein echtes Problem. Nehmen wir also mal an, wir sind gezwungen eine "Wildcard" auf ein übergeordnetes div-Element zu setzen
(so wie es bei mir der Fall war).
div.navi li a { color: #00f; }
div#left * { color #000; }
...
<div id="left">
<div class="navi">
<ul>
<li><a href="bla.htm">bla</a></li>
<li><a href="blubb.htm">blubb</a></li>
</ul>
</div>
...
</div>
In diesem Fall werde alle "untergeordneten" CSS-Anweisungen von div.navi li a { color: #00f; } durch die höhere Spezifität
des div#left * { color #000; } überschrieben. Und das ist dann nicht so prickelnd. Hätte man bei diesem Beispiel dagegen nur
mit Klassen gearbeitet, so gäbe es das Problem nicht.
div.navi li a { color: #00f; }
div.left * { color #000; }
4. Ein großes Für
Anstelle eines <a name="blubb">, das man früher immer für Sprungmarken innerhalb Seite benutzen musste, kann man das heutzutage
mit einem beliebigen Element inklusive des Attributes id machen.
<!-- bla.htm -->
<a href="blubb.htm#blubber">...
<!-- blubb.htm -->
<div id="blubber">...
5. Mein Tipp
Auch wenn meine Argumente doch ziemlich dünn sind und viele meiner Kollegen anderer Ansicht sind, so stehe ich doch nach wie vor auf dem
Standpunkt, dass man mit IDs abgesehen von Sprungmarken nur dann arbeiten sollte, wenn man per JavaScript darauf zugreifen möchte (getElementById).
Dadurch erspart man sich in Ausnahmefällen eine böse Überraschung.