Struktur und Dokumentation von CSS Dateien
Jeder Webdesigner kennt folgende Problematik: Das Projekt abgeschlossen, die letzten Dateien hochgeladen und die Struktur der CSS Dateien ist Geschichte. Das böse Erwachen kommt spätestens bei der ersten Anpassung.
Beim Betrachten der CSS Dateien stellt man sich die Frage: Habe wirklich ich diese Dateien bearbeitet? Diese Frage ist in den meisten Fällen auf mangelnde Strukturierung sowie Dokumentation von CSS Dateien zurückzuführen. Der nachfolgende Artikel soll daher Möglichkeiten der Strukturierung und Dokumentation von CSS Dateien aufzeigen.
Struktur
Nach jahrelanger Entwicklung von CSS Dateien habe ich meinen eignen Best Practice entwickelt. Dabei unterteile ich die Website zuerst in folgende Bereiche:
- #header
- #header_logo
- #header_navigation
- #banner
- #corpus
- #corpus _navigation
- #corpus _content
- #corpus _sidebar
- #footer
- #footer_company
- #footer_legal
Dokumentation
Anschließend erstelle ich zwei Stylesheets, welche ich layout.css und content.css nenne. In layout.css befinden sich alle Definitionen zur Positionierung der einzelnen Elemente. Die Datei content.css enthält alle Definitionen zum Stylen der einzelnen Elemente. Als nächstes lege ich die Grundstruktur meiner CSS Dateien fest. Dabei schreibe ich die einzelnen Bereiche, welche ich oben aufgeführt habe, in die CSS Datei. Meine CSS Datei sieht nun wie folgt aus:
/***************************************
Author : Niels Lange <niels@tinami.de>
Date : 2009.12.28
File : css/content.css
***************************************/
/* GENERAL ****************************/
/* HEADER *****************************/
/* HEADER_LOGO ************************/
/* HEADER_NAVIGATION ******************/
/* BANNER *****************************/
/* CORPUS *****************************/
/* CORPUS_NAVIGATION ******************/
/* CORPUS_CONTENT *********************/
/* CORPUS_SIDEBAR *********************/
/* FOOTER *****************************/
/* FOOTER_COMPANY *********************/
/* FOOTER_LEGAL ***********************/
Anschließend fülle ich die einzelnen Bereiche der Reihe nach mit den einzelnen Elementen auf. Verwende ich beispielsweise innerhalb von #corpus_content einen H1-Tag, so definiere ich diesen wie folgt:
/* CORPUS_CONTENT ************************/
#corpus_content h1 {
border-bottom: 1px solid;
color: #444;
font: 1.5em Verdana, sans-serif;
}
Ferner sortiere ich alle einzelnen Definitionen innerhalb einer Sektion alphabetisch. Das Beispiel oben veranschaulicht diese Vorgehensweise.
Weitere Informationen
Vor einiger Zeit bin ich auf das CSS Framework Blueprint CSS gestoßen und habe damit die letzten 3 bis 4 Projekte umgesetzt. Auf den ersten Blick hinterlässt das Framework einen soliden Eindruck. Browsersichere Layouts lassen sich damit extrem schnell realisieren.
Ferner bin ich vor einigen Tagen auf CSS Doc, ein Vorschlag zur Dokumentation von CSS Dateien, gestoßen. Auch dieser Ansatz sieht auf den ersten Blick sehr gut aus. Da ich mit CSS Doc im Augenblick jedoch noch nicht gearbeitet habe, kann ich an dieser Stelle leider noch kein Fazit diesbezüglich abgeben.
Hier gelangt man zu den besagten Projekten:
Tags: CSS Tipps und Tricks
Nach obenLesezeichen
Hier kannst du ein Lesezeichen zu diesem Artikel ablegen. Wähle einfach aus den folgenden Lesezeichen deinen persönlichen Anbieter aus. Durch einen Klick auf das jeweilige Icon wird das Lesezeichen erstellt.
