In diesem Abschnitt möchte ich Ihnen zwei Möglichkeiten zeigen, die Deklarationen zwischen den geschweiften Klammern zu ordnen.

Probieren Sie aus, welche der beiden Methoden Ihnen besser gefällt. Oder denken Sie sich etwas völlig Neues aus, aber irgendwann sollten Sie sich entscheiden. Konsistenz ist in diesem Fall eine Tugend ...

Reihenfolge orientiert sich am Box-Modell

Schauen Sie sich folgende fiktive CSS-Regel an:

#kopfbereich {
  position: relative;
  font-size: 100%;
  letter-spacing: 2px;
  background-color: white;
  padding-top: 10px;
  border-top: 1px solid black;
  margin-top: 20px;
}

Die Reihenfolge der Deklarationen orientiert sich am Aufbau des Box-Modells:

• Positionsangaben wie float oder position und dazugehörige Deklarationen wie top, right, bottom und left bestimmen die Position der Box auf der Seite und stehen ganz am Anfang.
• Danach folgen die Eigenschaften für den Inhaltsbereich des Kästchens: font-size, font-style, letter-spacing und eventuell noch andere.
• Am Ende des Styles werden die Definitionen für das Kästchen selbst aufgelistet: width, height, background, padding, border und margin.

In der am Box-Modell orientierten Sortierung beschreiben die Deklarationen also zuerst die Positionierung auf der Seite und dann das Element selbst, von innen nach außen.

So verinnerlichen Sie beim Ordnen der Deklarationen ganz nebenbei den Aufbau des Box-Modells und können die Gestaltung des Elements schneller visualisieren.

Alphabetisch sortiert

Eine andere weit verbreitete Methode zur Notierung von Deklarationen ist die alphabetische Sortierung. Hier dieselbe CSS-Regel wie oben, aber alphabetisch sortiert:

#kopfbereich {
  background-color: white;
  border-top: 1px solid #003399;
  font-size: 100%;
  letter-spacing: 2px;
  margin-top: 20px;
  padding-top: 10px;
  position: relative;
}

Der Vorteil der alphabetischen Sortierung ist, dass sie immer eindeutig und leicht einzuhalten ist.

Nachteilig hingegen ist, dass verwandte Eigenschaften wie background und padding weit auseinandergerissen werden und wichtige Positionsangaben wie float oder position mitten zwischen den anderen Eigenschaften vergraben liegen.