Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

8.3 Verschiedene Schreibweisen für Styles

In diesem Abschnitt lesen Sie ein paar Gedanken zum übersichtlichen Aufbau von Styles.

Eine typische CSS-Regel

Eine typische CSS-Regel sieht ungefähr so aus:

body {
  background-color: #8c8c8c;
  color: white;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}

Der Aufbau dieses Styles ist recht übersichtlich und folgt einigen bisher unausgesprochenen Konventionen:

  • In der ersten Zeile steht nur der Selektor und die öffnende geschweifte Klammer.
  • Auf jeder Zeile steht – leicht eingerückt – nur eine Deklaration, und jede Deklaration endet mit einem Semikolon.
  • Eigenschaft und Wert werden durch einen Doppelpunkt getrennt.
  • Nach dem Doppelpunkt folgt eine Leerstelle. Sie ist zwar nicht zwingend erforderlich, entspricht aber unserer Rechtschreibung und erhöht die Lesbarkeit.
  • Die schließende geschweifte Klammer steht auf einer eigenen Zeile, bündig mit dem ersten Buchstaben des Selektors.

Alles in einer Zeile

Ausnahmen bestätigen die Regel, und so liegt es bei Styles mit nur einer Deklaration nahe, alles in einer Zeile zu schreiben. Der Einzeiler spart Platz und ist übersichtlich:

h1 { font-size: 150%; }

Manche Autoren schreiben auch Styles mit einer Deklaration konsequent nach dem mehrzeiligen Schema, andere hingegen setzen sogar mehrere Deklarationen in eine Zeile, weil es Platz spart. Das ist eine Frage des Stils und manchmal auch einfach nur abhängig von der Tagesform.

Verschachtelte und gruppierte Selektoren

Verschachtelte Selektoren wie #textbereich a stehen immer in einer Zeile. Bei mit Kommata gruppierten Selektoren hingegen empfiehlt es sich, pro Zeile nur eine Selektorengruppe zu notieren. Nach dem letzten Selektor folgt statt des Kommas die öffnende geschweifte Klammer:

#textbereich a:hover,
#textbereich a:focus {
  ...
}