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.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.