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

CSS Selektor. ID vs. Class

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

 
<section id="footer">
 <p class="error">Fehlertext.</p>
</section>
 

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

 
<section class="main-footer">
 <p class="error">Fehlertext.</p>
</section>
 

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.

Veröffentlicht von

FrontEnd-Entwickler bei der ITS Gruppe in Dortmund. Schwerpunkte sind neben HTML, CSS, JavaScript und CMS vor allem UI/UX und Grafikdesign/Marketing.

2 Kommentare » Schreibe einen Kommentar

  1. alt, aber nicht weniger aktuell:-)
    Auch wenn dein Titel etwas Provokant rüberkommt, du hast ein gutes Beispiel für den Nachteil von IDs gebracht.
    Aber sag niemals nie, ich für meinen Teil verwende gerne Anchors, um die Navigation innerhalb längerer Artikel zu erleichtern.
    wie du schon sagst, ohne es beim Namen zu nennen: Spezifität umgeht das Problem ohne das problematische „! important“ nutzen zu müssen:
    http://php-homepage.com/css/css-tutorial-ueberschreiben-kombinieren.php#spezifitaet

    • In dem Artikel geht es ja auch ausschliesslich um das Styling einzelner Elemente, hier sollte man keine IDs verwenden. Als Sprungziel oder auch als JavaScript-Selector sind IDs natürlich ideal und sollten weiterhin genutzt werden.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.