Advanced CSS - Pro und Contra - Elementkopplung

1. Vorwort

Nachdem ihr jetzt wisst, dass die Kopplung von Selektoren an HTML-Elemente die Spezifität erhöht, wollen wir uns jetzt mal mit den Vor- und Nachteilen beschäftigen. Ich werde jetzt den schwierigen Versuch unternehmen und sie euch zu Gehör bringen.

2. Das große Für

Die Kopplung von Selektoren an Elemente erhöht nicht nur die Spezifität, sondern vermindert meiner Meinung nach auch mögliche Fehler, wenn eine entsprechende Deklaration aus Versehen zweimal erfolgt.

/* irgendwo in der styles.css */
.mark { ... }
/* irgendwo anders in der styles.css */
.mark { ... }
<!-- und dann in einer HTML-Datei -->
<a class="mark">...</a>
<p class="mark">...</p>

In so einem Fall kann man mögliche Überschneidungen (und böse Überraschungen) einfach umgehen.

a.mark { ... }
p.mark { ... }

3. Das große Wider

... kommt meiner Einschätzung nach besonders bei folgendem Fall zum Vorschein. Nehmen wir mal an, wir haben eine Klasse namens alert, bei der zum Beispiel nur die Farbe und die Schreibweise geändert werden soll. Und die kann nun verschiedensten Elementen zugewiesen werden.

<div class="alert">...</div>
<p class="alert">...</p>
<span class="alert">...</span>
<!-- und so weiter -->

In so einem Fall ist es ziemlich sinnfrei, mit einer ellenlangen Selektorliste zu arbeiten.

div.alert, p.alert, span.alert, li.alert

Das ist definitiv nicht im Sinne des Erfinders! Solche "allgemeinen" CSS-Deklaration sollte man tunlichst nicht an HTML-Elemente koppeln.

4. Fazit

Die Vor- und Nachteile der Kopplung von HTML-Elementen an die Selektoren lassen sich also so zusammenfassen:

• Vorteile
  • Höhere Spezifität
  • Vermeindung von doppelten Anweisungen
  • Größere Genauigkeit
• Nachteile
  • Geringere Flexibilität
  • Bei "allgemeinen" Deklaration können HTML-Elemente vergessen werden

5. Mein Tipp

Ich persönlich versuche(!), beim Aufbau meiner CSS-Anweisungen so weit wie möglich mit der Elementkopplung zu arbeiten, also div.irgendwas anstelle von .irgendwas. Nur bei wirklich allgemeinen Anweisungen verzichte ich darauf. Bisher bin ich damit eigentlich immer ganz gut gefahren. Und daher empfehle ich euch, auch so vorzugehen.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt