Jens Oliver Meiert

CSS: Deklarationen einfach sortieren

Artikel vom 18. März 2015. ISSN 1614-3124, #47.

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.

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 (beziehungsweise 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.

What if CSS sorting… was actually simple.

Abbildung: Warum auch einfach.

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 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 → CSS: Deklarationen einfach sortieren

Stand: 18. März 2015.

»Lächle.«