Eine Sortierung für CSS-Selektoren

Artikel vom 17. Oktober 2013 (↻ 18. Januar 2024). ISSN 1614-3124, #45. 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.

Es gibt eine Vielzahl von Möglichkeiten, Stylesheets zu schreiben. Styleguides befassen sich genau mit diesem Thema. Was ich selbst trotz der Arbeit an einer Reihe von Styleguides (wie der von Google, GMX und Aperto) immer vermisst habe, ist eine verbindliche Referenz zum Sortieren von Selektoren und Regeln. Ich habe in dieser Hinsicht eher immer mit einem groben Entwurf gearbeitet, doch war dieser eben grob und weit davon entfernt, vollständig zu sein.

Dieses Dokument schlägt ein System zur Selektoren- und Regelsortierung vor für jeden, der Bedarf nach mehr Struktur hat. Auch wenn ich generell vom Nutzen alphabetischer Sortierung überzeugt bin, sehe ich einen solchen Ansatz nicht als nützlich an, wenn es um Selektoren geht. Leider bedeutet dies ein etwas komplizierteres Regelwerk.

Inhalt

1. Spezifität hat Vorrang
2. Teil I: Allgemeine Sortierung
   1. Nach Funktion
   2. Nach Wichtigkeit
   3. Vom Allgemeinen zum Spezifischen
3. Teil II: Elementsortierung
   1. Universell
   2. Dokument
   3. Metadaten
   4. Gliederung und Strukturierung
   5. Überschriften
   6. Listen
   7. Medien
   8. Formulare
   9. Tabellen
   10. Formulierung
   11. Verschiedenes
   12. Attribute
4. Beispiele
   1. Grobsortierung
   2. Beispiel-Stylesheet
5. Mit dieser Sortierung arbeiten
6. Nachtrag (7. Februar 2014)
7. Nachtrag (24. September 2023)

Spezifität hat Vorrang

Bevor wir beginnen, sollten wir festhalten, dass die Position einer Regel wichtig ist: Wenn zwei Deklarationen dasselbe Gewicht, denselben Ursprung und dieselbe Spezifität haben, gewinnt die, die später folgt. Wir sollten dies im Hinterkopf behalten, wenn wir Stylesheets sortieren, besonders dann, wenn eine Regel von einem Ende eines Stylesheets ans andere verschoben wird. Auch wenn diese nicht häufig erforderlich sind, ist es nötig, Ausnahmen zuzulassen.

Teil I: Allgemeine Sortierung

Im Folgenden einige hochrangige Sortierideen. Sie mögen sich in Einzelfällen überschneiden. Diese Sortierungen gelten für die Selektoren jeder einzelnen Regel, Regeln selbst, sowie Sektionen, das heißt Gruppen von Regeln (solche Sektionen werden idealerweise durch Kommentare abgegrenzt und gekennzeichnet).

1. Nach Funktion

Sortieren Sie zunächst konzeptionell: Welchem Zweck dienen die Regeln und Sektionen? Alles allgemeine Styling sollte in eine Sektion wandern. Raster-/Grid-Regeln in eine andere. Navigationsregeln in wieder eine andere.

Wenn eine Regel konzeptionell zu zwei oder mehr Gruppen gehört, ziehen Sie in Erwägung, nach dem ersten Selektor zu gehen, oder mit einer »Allgemein«- oder »Verschiedenes«-Sektion zu arbeiten.

2. Nach Wichtigkeit

Sortieren Sie nun nach Wichtigkeit. Wichtige Regeln und Abschnitte sollten vor weniger wichtigen stehen.

3. Vom Allgemeinen zum Spezifischen

Danach folgt Einfluss: Was die größere Zahl von Elementen sowie höherrangige Elemente betrifft, sollte vor spezifischeren Selektoren kommen. Obwohl dieselbe Zahl von Elementen von Selektoren betroffen sein könnte, betrifft dies auch unterschiedliche Typen von Selektoren: Gehen Sie von Typ- über Klassen- über Attributs- (die nicht @class oder @id betreffen) hin zu ID-Selektoren.

Bei Sequenzen von einfachen Selektoren oder »komplexen« Selektoren wie p em oder .fehler strong, sortieren Sie nach dem ersten einfachen Selektor, dann dem nächsten, dann dem wieder nächsten, &c.

Um die Position einer Regel zu ermitteln, orientieren Sie sich an dem ersten Selektor jeder Regel, was innerhalb einer Sektion aber auch innerhalb des Stylesheets gilt. Tun Sie das, nachdem alle Selektoren einer Regel geordnet wurden. Dies bedeutet tatsächlich auch, dass section.warnung anstatt .warnung eine unterschiedlicher Position der Regel innerhalb des Stylesheets bedeuten kann, da Sie dann nach dem Element (section) und nicht der Klasse (.warnung) sortieren.

Teil II: Elementsortierung

Es folgt nun eine spezifische Reihenfolge, wie Selektoren exakt sortiert werden sollten. Vergleichbar mit der hochrangigen Sortierung betrifft dies alle Selektoren, sowohl innerhalb von Regeln als auch Sektionen.

Die Liste umschließt generell Selektoren für Elemente aus HTML [zum Stand von November 2022] – auf Anfrage können all die anderen ergänzt werden. In runden Klammern: Elemente, die normalerweise nicht angezeigt und gestylt werden. In eckigen Klammern: Elemente nicht aus HTML.

Diese Ordnung basiert auf Erfahrung und Verstand, ist aber dennoch etwas willkürlich. Irgendwo müssen wir anfangen.

Beispiele

Grobsortierung

Dieses Beispiel demonstriert das allgemeine Sortieren anhand einiger zufälliger Regeln, die wir von

#bio {}
#bio, p {}
.autoren {}
html {}
#galerie, .autoren {}

in

/* Kommt zuerst aufgrund der Funktion: */
html {}
/* Umgekehrte Reihenfolge, vom Allgemeinen zum Spezifischen;
   zudem wichtiger: */
p, #bio {}
/* Umgekehrte Reihenfolge, vom Allgemeinen zum Spezifischen;
   verschoben, um Gruppierung mit anderer .autoren-Regel zu ermöglichen: */
.autoren, #galerie {}
/* Gruppiert mit .autoren-/#galerie-Regel, und derer folgend, da spezifischer: */
.autoren {}
/* Als letztes, da am Spezifischsten: */
#bio {}

umwandeln.

Beispiel-Stylesheet

Dieses Beispiel zeigt die vollständige Anwendung aller Regeln anhand des [2013er] Standard-Stylesheets der »längsten Website der Welt«. Es folgt diesem Dokument sowie dem Google-HTML- und CSS-Styleguide:

@import url(//fonts.googleapis.com/css?family=Droid+Sans:400,700);

@media screen {

  * {
    margin: 0;
    padding: 0;
  }

  html {
    background: #000;
    color: #ccc;
    font: 87.5%/1.7 'droid sans', optima, arial, sans-serif;
    text-align: center;
  }

  body {
    margin: 1em 0;
  }

  h1,
  h2 {
    font-size: 1em;
    font-weight: normal;
  }

  h1 {
    background: url(/media/logo.jpg) no-repeat;
    height: 366px;
    text-indent: -999em;
    width: 620px;
  }

  h2,
  p {
    margin: 0 .5em;
  }

  p + p {
    text-indent: 1em;
  }

  p#ref {
    background: url(/media/end.jpg) no-repeat bottom center;
    margin: 1.5em 0 0;
    padding-bottom: 179px;
  }

  ul {
    margin: .5em 0 .5em 1.5em;
  }

  ul#lang {
    list-style: none;
    margin: .5em 0 1em 1.5em;
  }

  ul#lang li {
    display: inline;
  }

  a,
  strong,
  em,
  kbd {
    color: #fff;
  }

  strong {
    font-size: 1.3em;
    line-height: 1;
  }

  em {
    font-style: normal;
  }

  kbd {
    font-family: 'droid sans', optima, arial, sans-serif;
  }

  #show {
    margin: auto;
    text-align: left;
    width: 619px;
  }

  #whws {
    background: url(/media/tape.png) repeat-y top center;
    font-size: 100cm;
    height: 4734em;
    line-height: 1;
    margin: 42px 0;
  }

  #whws + div {
    position: relative;
  }

}

/* [Druckregeln ausgelassen] */

Mit dieser Sortierung arbeiten

Auch wenn die Beispiele der Orientierung helfen sollen, gibt es sicher noch bessere Wege, den Einsatz der hier vorgeschlagenen Ordnung zu demonstrieren. Zum einen ist sie nicht trivial, zum anderen hängt immer noch einiges von Ihren eigenen Vorlieben ab. So mögen Sie es vorziehen, die Position jeder Regel dann zu bestimmen, während Sie Ihr Stylesheet schreiben. Sie könnten sich um die Sortierung nach Sektionen als erstes kümmern und erst später um den Rest. Vielleicht wollen Sie auch erst dann sortieren, wenn alles andere erledigt ist. Oder Sie könnten es vorziehen, einfach nur die Selektorenordnung zu gebrauchen, die in Teil II vorgeschlagen wird. Ich freue mich über Kommentare, ob ein Tutorial nützlich wäre, und wie man das Tutorial selbst am hilfreichsten gestalten kann.

Vielen Dank an Tony Ruscoe für Kommentare zur Originalfassung sowie an Steffen Grunwald für das Gegenlesen dieses Artikels.

Nachtrag (7. Februar 2014)

Diese Ordnung behandelt bisher keine RTL-Selektoren. [Falls die später verfügbar gewordenen logischen Eigenschaften Sortierungsfragen nicht bereits beantworten, und bis ich dazu komme, den Artikel zu ergänzen,] schlage ich eine »lokale« Platzierung wie folgt vor:

#beispiel {
  text-align: left;
}

[dir=rtl] #beispiel {
  text-align: right;
}

Nachtrag (24. September 2023)

Dieser Artikel bedarf einer Aktualisierung (und wird diese wahrscheinlich auch erhalten).

Eine der interessanteren Lücken, die ich hier zwischenzeitlich beobachten konnte, betrifft die :is()- und :where()-Pseudoklassen. Bei diesen erachte ich es aktuell für am besten, sie zu ignorieren. Im Sinne dieser Selektorensortierung heißt dies, dass etwas wie :is(a, b) wie a, b behandelt und entsprechend sortiert werden würde.

(Ich neige auch dazu, :is() und :where() nur dann zu benutzen, wenn durch sie mindestens drei Selektoren zusammengefasst werden. Das ist aber eher eine erste Daumenregel, die ich noch ausgestalten muss, bevor sie in eine Aktualisierung dieses Dokuments eingehen könnte.)

Über mich

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Sei kritisch, interpretiere wohlwollend und gib Feedback.)