CSS: Deklarationen einfach sortieren

Artikel vom 18. März 2015. ISSN 1614-3124, #47. 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.

Man sieht es immer wieder: »Sortiert Deklarationen nach Kategorie.« Und man fragt sich: Warum kursiert diese Idee noch immer?

Die Sortierung von CSS-Deklarationen nach Kategorie (bzw. Bereich oder Typ) ist immens ineffizient. Sie ist langsam und unzuverlässig. Selbst leitende Entwickler werden beobachtet, wie sie entsprechende Sortierregeln vergessen und brechen – Regeln, die sie selbst aufgestellt haben. Dazu kommt das Problem der Kategoriesortierung, dass permanent neue CSS-Eigenschaften nachströmen, was häufige Rekategorisierung erfordert. Dementsprechend beobachten wir dann auch CSS-Sortierungsskripte, die es verlangen, Eigenschaftentabellen und ähnliches zu verwalten. Kategoriesortierung ist weder eine effiziente noch eine praxisnahe Methode, um Deklarationen zu sortieren.

/* Kategoriesortierung */
foo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #000;
  color: #fff;
  font-family: fantasy;
  font-size: 1.5em;
}

Deklarationen sind jedoch äußerst leicht alphabetisch zu sortieren. Alphabetische Sortierung ist so einfach, dass sie sich schon vor Jahren – und ich bin sicher, dass dies jemand standardisiert hatte, bevor ich selbst dies 2008 vorschlug – als schnellste und verlässlichste Sortiermethode erwies. Alphabetisches Sortieren ist einfach zu automatisieren (Werkzeuge wie Clean CSS bieten die Funktion schon eine Weile an), ist aber auch robust, wenn manuell durchgeführt.

/* Alphabetische Sortierung */
bar {
  background: #000;
  color: #fff;
  font-family: fantasy;
  font-size: 1.5em;
  height: 100px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}

Nach vielen Jahren Erfahrung in den unterschiedlichsten Webentwicklungsumgebungen kann ich nur, und das stark, empfehlen, Deklarationen alphabetisch zu sortieren. Wir können es hier einfach halten. Die einzige Alternative, die es uns ermöglicht, weniger Aufwand zu investieren, ist nicht zu sortieren. Und nicht sortieren ist nicht nützlich, da strukturierter Code leichter zu verwalten und zu warten ist.

Nachdem dies nun alles gesagt ist, wo es knifflig wird und wo wir stark hinterherhinken, ist beim Sortieren von Selektoren und Regeln. Ein paar von uns haben probiert, auch hier einen organisierten Anlauf zu unternehmen, aber was wir bisher haben – und ich schmeisse den umfassenden 2013er Entwurf zur Selektorensortierung mit in den Ring – kann noch verbessert werden. Was unsere Arbeit hier erschwert, ist, dass wir aufgrund der Kaskade keinen guten Hebel haben, um dies so einfach mittels Werkzeugen zu lösen. Insgesamt ist die Sortierung von Selektoren und Regeln ein interessanteres und wichtigeres Thema für uns, als uns das Leben selbst schwer zu machen, weil wir unbedingt Deklarationen »nach Kategorie« ordnen müssen.

Ü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.)