ID vs. Class – Verwende niemals ID’s als CSS-Selektor

CSS-Selektor ID (#element)

ID’s sind performance-technisch der beste weil schnellste CSS-Selektor, allerdings bringt die Verwendung von IDs als Selektor jede Menge Nachteile mit sich, vor allem bei Veerbungen von Klassen. Und gerade die Vereerbung innerhalb von Stylesheets ist eine der mächtigsten und wichtigsten Werkzeuge, diese sollte man aber immer berücksichtigen bzw. ermöglichen, gerade in größeren Projekten. Und deshalb sage ich seit einiger Zeit:

Verwende niemals ID’s als CSS-Selektor!

Wieso? Hier ein kleines Beispiel:

Markup

 
Fehlertext.

CSS

#footer p{
 color: #000;
}
 
p.error{
 color: #F00;
}

In diesem Beispiel ist der ausgegebene Text beim untenstehenden Markup in p.error schwarz, der ID-Selektor hat also Vorrang und wirkt ähnlich einem !important. Man müsste den ID-Selektor an dieser Stelle also entweder mit #footer p.error{color: #F00;} oder mit p.error{color: #F00 !important;} überschreiben. Bei der Verwendung von IDs erzeugen wir also unsauberen, unübersichtlichen und vor allem unnötigen Code, der nicht vererbbar ist. Das ist gerade bei größeren Projekten sehr problematisch.

Anstelle von IDs kann man hier auch mit einer einfachen Klasse, beispielsweise .main-footer, das gewünschte Ergebnis erzielen ohne Styles mehrfach im Nachhinein überschreiben zu müssen. Desweiteren kann man diese Elemente bei Bedarf nun auch mehrfach auf der Seite verwenden, was bei ID’s ja ohnehin ausgeschlossen ist.

Markup

     
Fehlertext.

Mit dem oben aufgeführten CSS hat man nun auch das gewünschte Verhalten.

IDs eignen sich hingegen sehr gut als Selektor für JavaScript Funktionen, und sind natürlich weiterhin als Sprungmarkenziel innerhalb von HTML-Seiten geeignet.