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
- Spezifität hat Vorrang
- Teil I: Allgemeine Sortierung
- Teil II: Elementsortierung
- Beispiele
- Mit dieser Sortierung arbeiten
- Nachtrag (7. Februar 2014)
- 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.
1. Universell
*
- Pseudoklassen (wenn nicht auf bestimmte Elemente angewandt)
- Pseudoelemente (wenn nicht auf bestimmte Elemente angewandt)
2. Dokument
html
3. Metadaten
- (
head
) - (
title
) - (
base
) - (
link
) - (
meta
) - (
style
) - (
script
) - (
noscript
) - (
template
) - (
slot
)
4. Gliederung und Strukturierung
body
header
footer
nav
main
article
aside
section
p
pre
blockquote
figure
figcaption
address
details
summary
search
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
picture
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 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. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)
Ähnliche Beiträge
Das könnte dich ebenfalls interessieren:
- Ăśbersicht aller CSS-Eigenschaften
- Browser-Stylesheets: Grundlagen und Beispiele
- Wartbarkeit kompakt: 200 Tipps und Ressourcen
Die Webentwicklung gut überblicken? Probier WebGlossary.info – und The Web Development Glossary 3K. Mit Erklärungen und Definitionen zu tausenden Begriffen aus Webentwicklung, Webdesign und verwandten Feldern, aufbauend auf Wikipedia sowie MDN Web Docs. Erhältlich bei Apple Books, Kobo, Google Play Books und Leanpub.