Deklarationsreihenfolge von CSS Eigenschaften unterteilt in Gruppen

Die Reihenfolge der Deklaration von CSS Eigenschaften innerhalb eines Selectors folgt keinen festgelegten Regeln. Es bleibt jedem selbst überlassen, in welcher Reihenfolge die Eigenschaften deklariert werden. Ohne Struktur führt dies schnell zu einem großen Durcheinander und mutiert, spätestens in größeren Projekten und in Teamarbeit, zu einem echten Problem. Um dem entgegenzuwirken, gibt es verschiedene Ansätze oder Richtlinien, CSS Eigenschaften zu sortieren. Ich habe mich früh auf eine Variante, die alphabetische Sortierung, festgelegt:

.selector {
	background-color: #999;
	border: 1px solid #666;
	color: #333;
	display: block;
	float: left;
	font-family: Helvetica, Arial, sans-serif;
	height: 30px;
	margin-bottom: 10px;
	overflow: hidden;
	padding: 10px;
	text-transform: uppercase;
	width: 300px;
}

Bisher kam ich mit dieser Schreibweise immer gut klar. Durch die alphabetische Sortierung hat alles seinen festen Platz und ich weiß sofort wo ich welche Eigenschaft finde. Vor Kurzem stellte ich mir jedoch die Frage, ob diese Reihenfolge der Deklaration wirklich das Optimum ist und, mit Blick auf die Projektarbeit im Team, ob es Richtlinien mit größerer Verbreitung gibt.

Neben der alphabetischen Schreibweise gibt es noch andere Ansätze, wie z.B. die Gruppierung nach Typ oder die Anordnung der Eigenschaften absteigend nach Länge dieser… Kein Kommentar zu letzterer Variante.

Bei meiner Recherche hat das Projekt codeguide.co von @mdo, unter anderem Schöpfer von Bootstrap, meine Aufmerksamkeit geweckt. Mark Otto empfiehlt die gruppierte Deklaration nach Eigenschafts-Typ und unterscheidet dabei zwischen:

  1. Positionierung
  2. Box-Modell
  3. Typografie
  4. Optisches
  5. (Diverses)

Auf meine Nachfrage hin, ob es eine umfangreichere Auflistung der Eigenschaften, als im Beispiel auf codeguide.co, gibt, verlinkte er mich auf eine Referenz von Primer. Diese Auflistung ist laut ihm nicht mehr ganz aktuell, reicht als Referenz für den alltäglichen Einsatz aber allemal. Das Beispiel von oben sieht nach dieser Richtlinie übrigens dann so aus:

.selector {
	display: block;
	float: left;
	width: 300px;
	height: 30px;
	padding: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	color: #333;
	text-transform: uppercase;
	background-color: #999;
	border: 1px solid #666;
}

In meinen Augen macht die Deklaration nach dieser Richtlinie durchaus Sinn, da zusammengehörige Eigenschaften beinander sind und die Abhängigkeiten zwischen Positionierung und Box-Modell berücksichtigt werden. Derzeit bin ich dabei, die Richtlinie in aktuellen und kommenden Projekten anzuwenden und zu verinnerlichen. Zudem stelle ich zur angenehmeren Übersicht die Auflistung von Primer, in angepasster Form und mit der Zeit bestimmt auch aktualisiert, auf dieser Seite als Nachschlage-Referenz zur Verfügung.


Kommentare

Keine Kommentare vorhanden.