Eleganter Code durch kontextuelle Selektoren

Artikel vom 7. Januar 2005 (↻ 17. Juni 2008), exklusiv für Dr. Web. ISSN 1614-3124, #11. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

Dieser und viele andere Beiträge sind auch als hübsches, wohlerzogenes E-Book erhältlich: On Web Development. Wenn Sie sich speziell mit der Optimierung von CSS beschäftigen, ich habe einige Grundlagen in einem kleinen Buch zusammengetragen: CSS Optimization Basics.

Kontextuelle Selektoren ermöglichen es, im HTML-Quelltext einer Seite auf das Setzen einiger id- oder class-Attribute zu verzichten und statt dessen über die Struktur des Dokuments auf Elemente zuzugreifen und diese zu formatieren. Dadurch wird der Code einfacher, Arbeit gespart und insgesamt intelligenter vorgegangen.

»Einfachheit ist das Resultat der Reife«

In der Praxis ist es oft zu beobachten: Jeder Bereich und jedes Element, das ein bestimmtes Aussehen erhalten soll, wird auch gerne sofort mit einer Klasse versehen, heißt, man setzt im betroffenen Markup rasch mal ein class-Attribut, welches als CSS-Selektor herhalten soll, und nimmt dann die Justierung der Darstellung vor. Dies ist ein Problem, wenn man daran denkt, wie oft allein schon ein einfacher Elementselektor (à la h1) reicht, ohne dass man eine ID oder Klasse wählen muss – noch viel häufiger jedoch wird es verpasst, auch aus der Seitenstruktur und damit dem Kontext Nutzen zu ziehen.

Hier ein einfaches Beispiel, (ehemals) ohne großartiges Suchen auf der englischen Website von Yahoo entdeckt:

<div class=ct>
<div class=u></div>
<div class=u></div>
<div class=u></div>
<div class=u></div>
</div>

Der Inhalt der u-Container wurde der Einfachheit halber ausgeblendet, und auf einen Kommentar bezüglich der nicht in Anführungszeichen gesetzten Attributswerte wird an dieser Stelle verzichtet [vor allem, da ich diese Praxis weniger Jahre später ausdrücklich befürwortete]. Es stellt sich vielmehr die Frage, ob die Klasse u tatsächlich notwendig ist – einen semantischen Sinn hat sie offensichtlich nicht (denn auch IDs und Klassennamen verfügen idealerweise über eine Bedeutung, wie es die Klasse error wunderbar verdeutlicht).

Bevor man sich den Quelltext bei Yahoo nochmal näher ansieht, liegt bereits nahe, wie man diesen Code grundsätzlich vereinfacht (zwar noch nicht mit einer semantisch passenderen Liste, aber mit dem in Anführungszeichen gesetzten Attributswert ct sowie eingerückten Kindelementen):

<div class="ct">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Im Stylesheet selbst benutzt man jetzt anstelle des Selektors div.u oder .u einfach .ct div – oder, wenn der Außencontainer nur für analoge Fälle gebraucht wird, lediglich div div, wobei man sich der Klasse ct dann idealerweise gleich ganz entledigt, class="ct" also entfernt. Der Code ist eindeutig einfacher geworden, vergleicht man die beiden Code-Ausschnitte, und die Realisierung ist flexibel – in einem Container example könnte man wiederum div-Elemente verwenden, denen man dann via .example div andere Eigenschaften zuweist.

Grundsätzlich bietet sich der Gebrauch von kontextuellen Selektoren immer dann an, wenn Elemente oder Instanzen eines Elements (natürlich können zum Beispiel auch Attributselektoren mit etwas Kontext eingesetzt werden) in bestimmten strukturellen Zusammenhängen auftauchen und kontextabhängig formatiert werden können.

Von kontextuellen Selektoren ist offiziell übrigens nur in CSS 1 die Rede, ab CSS 2 heißen diese Nachkommenselektoren bzw. »Descendant Selectors«.

Das Vorgehen kann zudem verfeinert werden, indem man absichtlich und gezielt bedeutungsleeres (also nicht semantisches) Markup wie div- oder span-Elemente gebraucht, um in seinen Stylesheets nur Element- und kontextuelle Selektoren zu verwenden, was das HTML noch schlanker werden lässt. Der folgende Quelltext zum Beispiel erlaubt es, zwei ganz unterschiedliche Darstellungen einer Liste auf einer Website zu verwenden, ohne dass irgendein zusätzliches Attribut gebraucht werden muss:

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
</ul>
<div>
  <ul>
    <li>Punkt A</li>
    <li>Punkt B</li>
    <li>Punkt C</li>
  </ul>
</div>

Im darauf angewendeten Stylesheet reichen dann selbstredend die Selektoren ul und div ul, um dem Autor trotz etwaigen Überschreibens von Deklarationen, aber ohne zusätzliche IDs oder Klassen alle Freiheit zu schenken.

Mit ein wenig Gespür können HTML-Code und Stylesheets also leicht vereinfacht werden, indem über den Kontext gezaubert wird. Ob das so exzessiv beherzigt werden muss, wie beispielsweise auf UITest.com, wo überhaupt keine Attributselektoren gebraucht werden (siehe [2005er] Stylesheet), ist allerdings die Frage (dies ist auf UITest.com inzwischen aber auch nicht mehr der Fall). Manchmal nämlich sind IDs und Klassen sehr wohl nützlich, ab und an gar unverzichtbar.

Über mich

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Mit meinem aktuellen Umzug nach Spanien bin ich offen für eine neue Führungsposition im Frontend-Bereich. Beachte und empfehle gerne meinen Lebenslauf oder mein LinkedIn-Profil.

Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.