Advanced CSS - Pro und Contra - Nachfolgeselektoren

1. Vorwort

Euch ist ja jetzt bekannt, dass Nachfolge-Selektoren für eine höhere Spezifität sorgen, weil man mit mehreren Selektoren arbeitet. Leider ist das eine sehr problematische Sache, die ich nun versuche zu erläutern.

2. Das große Für

Nachfolge-Selektoren erlauben unter bestimmten Umständen eine saubere und unkomplizierte Definition von CSS-Anweisungen, ohne dass man dafür zig Klassen definieren muss. Denn bei letzteren gibt es einen entscheidenden Nachteil. Man muss sie den HTML-Elementen per Attribut (class) zuweisen. Und glaubt mir, das wird immer an mindestens einer Stelle vergessen! Ein Beispiel:

div.navi li a 
{
  background-image: url('pfeil1.gif');
  background-repeat: none;
  background-position: 1px 3px;
  font-size: 1.0em;
}
div.navi li li a 
{
  background-image: url('pfeil2.gif');
}

Um zum Beispiel die Links in einem zweistufigen Navigationsmenü zu definieren, reichen obige Anweisungen völlig aus. Und wenn man sich das Vererbungsprinzip zu Nutze macht, kann man sich obendrein doppelte Deklarationen sparen. Das ist viel eleganter als so was:

a.nav1 
{
  background-image: url('pfeil1.gif');
  background-repeat: none;
  background-position: 1px 3px;
  font-size: 1.0em;
}
a.nav2 
{
  background-image: url('pfeil2.gif');
  background-repeat: none;
  background-position: 1px 3px;
  font-size: 1.0em;
}

3. Das große Wider

Wer nun denkt, dass das Arbeiten mit Nachfolge-Selektoren der Stein der Weisen ist, der irrt sich leider. Denn im Eifer des Gefechts kann man schon mal übertreiben. Und leider stellt sich das dann bei einem komplexeren Layout oder späteren Änderungen als großes Hindernis heraus.

Dazu nehme ich mal ein einfaches Beispiel aus meinem alten Auftritt. Rechts unter "Download" gibt es einen Link zum entsprechenden PDF. Die CSS-Anweisung dazu wurde über eine stinknormale Klasse festgelegt. Käme ich jetzt nun auf die Idee, besagten Link in die linke Navigation zu integrieren, so hätte ich ein Problem.

div.subnav li a
{
  background-image: url(../pics/pfeil_b.gif);
  background-position: 0px 0.4em;
  ...
}
a.pdf
{
  background-image: url(../pics/pdf.gif);
  background-position: 0px 2px;
  ...
}

Hier käme weder das Hintergrundbild zur Geltung noch dessen Positionsangabe. Stattdessen müsste ich a.pdf noch um diesen Eintrag ergänzen ..., div.subnav a.pdf. Gut, das sieht im Moment noch nicht so wild aus, aber glaubt mir. Wenn ihr nicht aufpasst, habt ihr irgendwann Konstrukte wie dieses (oder noch schlimmer) und das ist nicht besonders prickelnd:

div.leftblock div.leftnav ul.mainnav li li.subnav a.pdf

4. Das Problem

... ist diesmal nicht die Spezifität und deren Spezifikation. Die ist so gut wie sie nur sein kann. Nein, das Hauptübel liegt in einer schlechten Planung und unvorhersehbaren Änderungswünschen. An Ersterem seid ihr selber schuld, an Zweitem irgendwelche "kreativen" Designer, die nicht wissen, was sie wollen, oder Kunden, die ebenfalls nicht wissen, was sie wollen.

5. Mein Tipp

Wenn ihr mit Nachfolge-Selektoren arbeitet, so solltet ihr ein paar Dinge beherzigen, weil ihr sonst in des Teufels Küche kommt. Ich werde euch jetzt mal ein paar grundsätzliche Tipps geben, wie ihr dem Chaos Herr werden könnt.

• Baut Nachfolge-Selektoren so einfach wie möglich auf
• Bemüht euch, die "Tiefe" von Nachfolge-Selektoren so gering wie möglich zu halten
• Verseht maximal zwei Nachfolge-Selektoren mit IDs oder Klassen (dazu später mehr)
• Definiert den ersten Selektor als ID oder Klasse und setzt ansonsten nur den Typ-Selektor ein
• Arbeitet lieber mit einer zusätzlichen Klassendefinition, bevor ihr die "Tiefe" der Nachfolge-Selektoren erhöht

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