Wie sortiert man CSS-Deklarationen? Eins der Themen im neuesten Beitrag von Pisto. Autor Andreas Dölling sortiert sein CSS in Gruppen.

Aufbauend auf die Gedanken des Kollegen teilte ich die CSS-Eigenschaften in Gruppen ein. Diesen wies ich anschließend einen Rang zu, der so ungefähr die Wichtigkeit der jeweiligen Gruppe von Eigenschaften widerspiegelte: je größer die Auswirkungen von Eigenschaften auf das Layout, desto wichtiger.

Da steht dann layoutänderndes Verhalten wie float, display und position am Anfang und Dinge wie background und color kommen an das Ende.

Nico Brünjes hingegen sortiert alphabetisch:

Das ist einfach, versteht jeder, ist eine nachprüfbare, also durchsetzbare Regel und super umsetzbar. Und führt auch auf lange Sicht zu lesbaren Stylesheets.

Ich persönlich finde beide Ansätze recht seltsam. Was die Gruppierungs-Methode bringen soll, erschließt sich mir nicht so recht und die Einteilung erscheint mir recht subjektiv. Und bei der bürokratischen ABC-Ordnung könnte ich mir allenfalls vorstellen, dass sie dann zu etwas gut ist, wenn man mit einer Vielzahl von Leuten zusammenarbeiten muss, die etwas anderes nicht kapieren. Der Preis ist dann, dann man Dinge, die logisch eigentlich zusammen gehören (z.B. position und z-index) auseinander reißt. Nicht so toll.

Das Patentrezept habe ich freilich auch nicht und mein Vorgehen entspricht vielleicht einer typischen Einzelkämpfer-Sortierung, aber mir hilft sie.

Ich frage mich immer: Wie wahrscheinlich ist es, dass in näherer Zukunft mal Eigenschaft X geändert werden muss? Sehr wahrscheinlich (Farben, Textgröße)? Ab an den Anfang. Sehr unwahrscheinlich (Layout, Position)? An das Ende. Ein einfaches Beispiel:

div.foobar { color:#CC0000; text-decoration:underline; position:relative; }

Während ich die Seite baue wird die Farbe des Links mit absoluter Sicherheit das eine oder andere Mal einem Tuning unterzogen werden. Dass der Link aber unterstichen sein soll, ist etwas, das wird sich im Designprozess nicht gar so oft ändern. Deswegen kommt text-decoration an das Ende. Und das Layout ist von Anfang an geplant und wird nach Möglichkeit auch durchgezogen, also versammeln sich Dinge wie position, margin und Konsorten am Ende. Innerhalb dieser Einteilung ist es ganz sinnvoll zusammenhängende Eigenschaften auch zusammenzuhalten (z.B. font-size, line-height und text-align).

Damit kann ich flott arbeiten, weil einem die Eigenschaften, an denen man die meiste Arbeit zu verrichten hat, gleich am Anfang einer Deklaration entgegen springen. Meine Meinung.

Wenn man wirklich etwas tun will, um einen Stylesheet für die Allgemeinheit lesbarer zu machen, muss sich vor allem für eine Sortierungsmethode entscheiden und diese Methode dann auch durchziehen. Ich hab schon so manche seltsame Sortierung gesehen, aber verzweifelt bin ich immer nur, wenn überhaupt kein Muster erkannt habe. In alles, was eine Art System hat, kann man sich reinkämpfen und ganz loswerden kann man die WTFs nie.

WTFs/Minute