Hier ein farbiger Hintergrund, dort eine andere Schriftart: Die Möglichkeiten von CSS verleiten vor allem bei WYSIWYG-Editoren dazu, einfach darauflos zu formatieren. Je sorgfältiger die Stylesheets strukturiert und dokumentiert werden, desto weniger Aufwand entsteht beim Aufbau und der Pflege der Webseite. Damit man als Webmaster bei einer Vielzahl von Projekten oder Projektversionen den Überblick nicht verliert, sollten an den Anfang einer externen CSS-Datei, Informationen nach dem folgenden Muster gesetzt werden:
/*
Projekt: www.projektname.de
Type: CSS-Datei
Beschreibung: Grundformate für sämtliche Browser
Erstellt am: 05.11.2009, Vorname Familienname
Zuletzt geändert: 07.11.2009, Vorname Familienname
*/
Die Zeichen /* und */ kennzeichnen den dazwischen liegenden Text als Kommentar.
Ein weiterer Tipp:
Alle Farben die im Projekt verwendet werden, zusammenfassen. Dies geschieht ebenfalls mit Hilfe der Kommentarzeichen.
/*
...
====Farben====
Seitenhintergrund: #ffffff
Menühintergrund: #eecc00
usw.
*/
Soll nun eine Farbe der Webseite geändert werden, muss die immer noch an der jeweiligen Stelle im Quelltext geschehen. Mit der Übersicht stellt die Suche nach dem Farbcode jedoch kein Problem mehr dar. Hilreich ist zudem, dass auf dem ersten Blick zu erkennen ist, welche weiteren Dateien mit der CSS-Datei verknüpft sind.Dafür müssen die entsprechenden Namen ebenfalls in den einleitenden Kommentar hinein:
/*
...
====externe Dateien====
Hintergrundbild für Tabellenkopf: ../img/bild1.jpg
usw.
*/
Schlussendlich sollten alle Stellen im Code, die nicht selbsterklärend sind, mit einem Hinweis dokumentiert werden. Wer darüber hinaus noch informieren möchte, dem empfehle ich folgende Literatur:
- Webdesign mit (X)HTML und CSS: Ein Praxisbuch zum Einsteigen, Auffrischen und Vertiefen
- CSS-Praxis: Modernes Webdesign mit CSS, Grundlagen, Praxisbeispiele, Referenz, inkl. Prototyping, CSS-Frameworks, SEO u.v.m
- CSS pur! – Ultimative Weblösungen mit Stil – komplett in Farbe – mit ausführlicher Referenzkarte
