Stylesheets sind nicht selten mehrere hundert Zeilen lang. Deshalb sollten Sie von Beginn an versuchen, das CSS so übersichtlich wie möglich zu schreiben. Dazu bietet es sich an, das Stylesheet mit mehrzeiligen Kommentaren in verschiedene Abschnitte zu unterteilen.

Im folgenden Beispiel habe ich das bisherige Stylesheet, wie im Anfangskommentar oben angedeutet, in vier Teile untergliedert:

/* =======================================
1. Kalibrierung und Restauration
======================================= */

/* =======================================
2. Allgemeine Styles
======================================= */

/* =======================================
3. Styles für die Layoutbereiche
======================================= */

/* =======================================
4. Sonstige Styles
======================================= */

Statt des Gleichheitszeichens können Sie innerhalb der Kommentare auch eine Raute (#) oder ein beliebiges anderes Zeichen nutzen. Wichtig ist nur, dass die gesamte Konstruktion jeweils mit /* beginnt und mit */ endet.

Teil 1 – Kalibrierung und Restauration

Dieser oft eher kurze Abschnitt enthält die Regeln zur Kalibrierung
und zur Restaurierung der wichtigsten Abstände.

Teil 2 – Allgemeine Styles

Im zweiten Abschnitt legen Sie die allgemeinen, für die ganze Seite geltenden Einstellungen fest. Die meisten Selektoren in diesem Teil gelten für die gesamte body-Kiste, wobei sich folgende Reihenfolge anbietet:

1. die Elemente html und body
2. Block-Elemente wie Überschriften, Absätze, Listen, Zitate etc.
3. Inline-Elemente: Hyperlinks, Bilder und Elemente wie strong und em
4. allgemeine Klassen und IDs wie .infobox oder img#logo

Im Zweifelsfall ordnen Sie die Selektoren einfach nach dem Punktesystem für Selektoren in umgekehrter Spezifität: Styles mit einem Punkt zuerst, IDs zuletzt.

Teil 3 – Styles für die Layoutbereiche

Im dritten Abschnitt folgen Selektoren, die nur in einem bestimmten Bereich der Seite gelten. Die Reihenfolge entspricht dabei der des Auftretens im HTML-Quelltext, von oben nach unten.

Verschachtelte Selektoren, die nur für einen bestimmten Bereich gelten, können Sie dabei leicht einrücken, sodass leicht erkennbar wird, wo der folgende Bereich beginnt.

Im Beispiel-Stylesheet könnte das im Überblick so aussehen, wobei ich das div vor den IDs ab jetzt meist weglasse:

/* =======================================
3. Styles für die Layoutbereiche
======================================= */
#wrapper { ... }
#kopfbereich { ... }
#kopfbereich p span { ... }
#navibereich { ... }
#textbereich { ... }
#fussbereich { ... }