Sobald das HTML-Dokument und CSS vom Browser geladen wurden, gilt es, anhand der Selektoren die damit verbundenen Deklarationen auf die Elemente des Dokumentenbaums abzugleichen. Dabei richtet sich der Browser nach dem Schlüsselelement im Selektor: Damit ist das eigentliche Element gemeint, das vom Selektor angesprochen werden soll. Es steht in der Regel an letzter Stelle im Selektor, also ganz rechts.

Von diesem Schlüsselelement ausgehend arbeitet der Browser nun die im Selektor notierten Vorfahren ähnlich dem arabischen Schriftsystem von rechts nach links ab. Und zwar so lange, wie die Elemente im Dokumentenbaum zutreffen beziehungsweise bis ein Element im Selektor nicht mehr mit dem Dokumentenbaum übereinstimmt.

Beispiel: article aside p.post ul#top_ten { text-indent: 5px; }: Das Schlüsselelement ist ul#top_ten. Der Browser sucht nun die ID top_ten. Um sicherzugehen, dass das richtige Element gefunden wurde, arbeitet er sich durch den Selektor und sucht nach dem Element ul, der Klasse post, dem Element p, aside und article.

Das Beispiel zeigt Folgendes ganz deutlich:

1. Je weniger Elemente im Selektor notiert sind, desto schneller kann der Browser das CSS verarbeiten.
2. Je eindeutiger das Schlüsselelement im Selektor bezeichnet ist, desto weniger aufwendig wird der Abgleich mit dem Dokumentenbaum.

Auch wird klar ersichtlich, dass die Notierung einer ID im Selektor ohne Element-Tag die effizientere Variante ist.

Effiziente CSS-Selektoren sind insbesondere für dynamische AJAX-Anwendungen interessant, da beim asynchronen Laden eine bessere Browserperformance erzielt werden kann.

Kompakt: Die Effizienz von CSS-Selektoren definiert sich durch die Zeit, die der Browser benötigt, um die Selektoren gegen die Elemente im Dokumentenbaum abzugleichen.

2.1 Richtlinien für effiziente CSS-Selektoren

Die folgenden ausgewählten Richtlinien bestehen weitgehend aus von der Autorin übersetzten Richtlinien des Artikels „Writing Efficient CSS for use in the Mozilla UI“ von David Hyatt [1].

Vermeide universale Selektoren

Stelle sicher, dass ein Selektor nicht mit einer universalen Kategorie endet!

Hinweis: Unter universaler Kategorie versteht Hyatt nicht allein den universalen Selektor *, sondern auch alle Selektoren, deren Schlüsselelement weder durch eine ID, eine Klasse, noch durch einen Tag definiert ist.

* { background: #fff; }
[hidden="true"] { display: none; }

Schränke ID-Selektoren nicht durch Elemente oder Klassen ein

Wenn ein Selektor eine ID als Schlüsselelement hat,...