Jens Oliver Meiert

Eine Sortierung für CSS-Selektoren

Artikel vom 17. Oktober 2013 (↻ 7. Februar 2014). ISSN 1614-3124, #45.

Dieser und viele andere Beiträge sind auch als hübsches, wohlerzogenes E-Book erhältlich: On Web Development. Wer aber einen guten Überblick zum Thema Code-Richtlinien will, mag sich mein kleines Buch zum Thema ansehen: The Little Book of HTML/CSS Coding Guidelines.

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)

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 Typselektoren für Elemente aus HTML 5 – 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.

1. Universell

  • * (wenn ausdrücklich verwendet)

2. Dokument

  • html

3. Metadaten

  • (head)
  • (title)
  • (base)
  • (link)
  • (meta)
  • (style)
  • (script)
  • (noscript)

4. Gliederung und Strukturierung

  • body
  • header
  • footer
  • nav
  • main
  • article
  • aside
  • section
  • p
  • pre
  • blockquote
  • figure
  • figcaption
  • address
  • summary
  • details
  • div

5. Überschriften

  • hgroup
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

6. Listen

  • ul
  • ol
  • li
  • dl
  • dt
  • dd
  • menu
  • menuitem

7. Medien

  • canvas
  • object
  • embed
  • img
  • audio
  • video
  • (param)
  • (source)
  • track
  • map
  • area
  • [svg]
  • [math]
  • iframe

8. Formulare

  • form
  • fieldset
  • legend
  • label
  • input
  • button
  • select
  • optgroup
  • option
  • datalist
  • textarea
  • output

9. Tabellen

  • table
  • caption
  • colgroup
  • col
  • thead
  • tfoot
  • tbody
  • tr
  • th
  • td

10. Formulierung

  • a
  • strong
  • em
  • b
  • i
  • u
  • s
  • sup
  • sub
  • small
  • abbr
  • dfn
  • mark
  • del
  • ins
  • q
  • cite
  • data
  • progress
  • time
  • meter
  • code
  • var
  • samp
  • kbd
  • keygen
  • bdi
  • bdo
  • ruby
  • rt
  • rp
  • span

11. Verschiedenes

  • hr
  • (br)
  • (wbr)
  • dialog

12. Attribute

  • .klasse
  • #id

Diese Ordnung basiert auf Erfahrung und ein wenig Verstand, ist aber dennoch auch etwas willkürlich. Irgendwo musste begonnen werden.

Beispiele

Grobsortierung

Das erste 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

Das zweite Beispiel spiegelt die vollständige Anwendung aller Regeln anhand des Standard-Stylesheets der »längsten Website der Welt« wider; es folgt den Regeln dieses Dokuments sowie denen des Google-HTML- und CSS-Styleguides.

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

@media screen, projection {

  * {
    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.gif) 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. Für den Moment schlage ich eine »lokale« Plazierung wie nachfolgend vor:

#beispiel {
  text-align: left;
}

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

Über den Autor

Jens Oliver Meiert, Foto vom 27. Juli 2015.

Jens Oliver Meiert ist ein deutscher Philosoph und Entwickler (Google, W3C, O’Reilly). Er experimentiert mit Kunst und Abenteuer. Hier auf meiert.com teilt und verallgemeinert und übertreibt er einige seiner Gedanken und Erfahrungen.

Mehr Jens gibt es im Archiv und bei Amazon. Wenn Sie eine Frage oder ein Anliegen (oder eine Empfehlung) zu dem haben, was er schreibt, senden Sie gerne jederzeit eine Nachricht.

Ä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 → Eine Sortierung für CSS-Selektoren

Stand: 7. Februar 2014.

»Lächle.«