Wie strukturiere ich eine CSS Datei?

von Rene Grassegger
Der eine schreibt einfach drauflos, der andere gliedert und strukturiert. Rene Grasegger zeigt, wie man es macht und warum sich das lohnt.
1. Der Anfang der CSS Datei
Ich beginne mit zwei Kommentarzeilen, die globale Informationen enthalten.

 /* Standard-CSS für www.meinProjekt.at */ /* Wichtige Farben Dunkelgrün = #007A00 Grün = #009400 */

Erklärung:
In der 1. Kommentarzeile notiere ich die Funktion der CSS Datei (Standard-CSS, Druck-CSS,…) + die jeweilige Projektadresse. In der Zeile zwei notiere ich mir wichtige Farben, die ich auf diese Weise schnell und leicht wieder finde.
2. Abstände aller Elemente werden auf Null gesetzt + weitere Formatierungen

 html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li { margin: 0; padding: 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }

Erklärung:
Alle Innen- und Außenabstände werden auf null gesetzt. Damit ist die Arbeit übersichtlicher und ich habe mehr Kontrolle die Abstände, da diese jetzt einzeln gesetzt werden müssen.
Weiters gebe ich auch hier meist eine Schrift für alle Elemente an und spare mir Zeit und Code.
3. HTML und Body werden mit CSS versorgt

 html, body { background: #fff url(body_bg.gif) no-repeat; font-size: 101%; }

Erklärung:
Ein Tipp: Verwenden Sie bei Grafiken immer ein gewissen Schema. CSS Hintergrundbilder enden meist bei mir mit „_bg“ + Dateiendung. Wird es im Body eingebaut „body_bg“, wird es zum Beispiel in der Navigation eingebaut „navi_bg“. „font-size: 101%;“ hilft bei relativen Schriftgrößenproblemen.
4. Allgemein gültige Formatierungen werden gesetzt

 a:link { color: #666; text-decoration: underline; } a:visited { color: #333; text-decoration: underline; } a:hover { color: #f60; text-decoration: underline; } a:active { color: #f60; text-decoration: underline; } strong { font-weight: bold; } .c { clear: both; } .center { text-align: center; } img { border: 0; } .klein { font-size: 0.7em; } .right { text-align: right; } .top { vertical-align: top; } h1 { font-size: 1.0em; color: #f60; margin: 20px 60px 10px 240px; border-bottom: 1px solid #fff; } h2 { font-size: 0.8em; color: #f60; margin: 15px 60px -5px 240px; } p, ul { font-size: 0.75em; line-height: 1.5em; color: #666; margin: 10px 60px 10px 240px; }

Erklärung:
Hier finden sich Formatierungen, die keinem speziellen Bereich oder einer Sektion zugeteilt sind. Das sind Klassen, die ich sicher zu einem späteren Zeitpunkt benötige (zum Beispiel“.center“). Auch dies spart Zeit.
5. Sektionsweite Formatieren kommen zum Schluss

 /* Header */ #header { border: 1px solid #fff; } #header p { font-size: 0.8em; } /* ENDE Header */ /* Navi */ #navi { border: 1px solid #fff; } #navi a { text-decoration: none; } /* ENDE Navi */

Erklärung:
Sortiert sind alle Sektionen nach Ihrem visuellen Auftreten auf der Seite (zum Beispiel Kopf > Navi > Text > Fusszeile). Jede Sektion beginnt und endet mit einer Kommentarzeile – auch das schafft Übersicht. Hacks und besondere Codeschnipsel werden kommentiert. Das spart Zeit und Nerven, man vergisst Gründe für diesen oder jene Vorgehensweise. Ein wichtiger weiterer Grund, man hat das Problem schon bewältigt und kann es schnell nachschlagen.
Behalten Sie Ihr einmal gewähltes Schema bei jedem neuen Projekt. Meine CSS Dateien ändern sich auch strukturell immer wieder in kleinen Schritten, das grobe Schema jedoch behalte ich immer bei.