Jens Oliver Meiert

Eleganter Code durch kontextuelle Selektoren

Artikel vom 7. Januar 2005 (↻ 17. Juni 2008), exklusiv für Dr. Web. ISSN 1614-3124, #11.

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. Es stellt sich vielmehr die Frage, ob die Klasse u wirklich 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 wenigstens mit einem 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 Codeausschnitte, 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 beziehungsweise »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 Stylesheet), ist allerdings die Frage. (Leider ist dies auf UITest.com inzwischen nicht mehr der Fall.) Manchmal nämlich sind IDs und Klassen sehr wohl nützlich, ab und an gar unverzichtbar.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Oder vielleicht auf Google+, Twitter oder XING hallo sagen?

Fehler entdeckt? Belohnung! E-Mail an jens@meiert.com.

Sie sind hier: StartseitePublikationen → Eleganter Code durch kontextuelle Selektoren

Stand: 17. Juni 2008.