Webstandard & Webdesign - CSS, HTML

 

Die Organisation und Strukturierung von CSS Dateien

Die Organisation von CSS Dateien, bekommt gerade bei aufwendigen Projekten in Zusammenarbeit mit mehreren Kollegen ein immer höheren Stellenwert. Eine gute und vor allem selbsterklärende Struktur sollte hier ebenso gewählt und berücksichtigt werden, wie üblicherweise in (X)HTML, JSP oder Java-Dateien. Es gibt unter anderem die schon vielen bekannte Möglichkeit mittels eines CVS ( Concurrent Versions System ) zu arbeiten. So kann man während mehrere Kollegen an einer Datei arbeiten, zu unterschiedlichen Zeitpunkten "einchecken" ( die aktuellste Version einer Datei dem aktuellen Projektstand zuführen ) und bei Konflikten gegebenenfalls diesen aufheben. Nichts desto trotz, sollte wie bereits erwähnt auch eine CSS Datei gut strukturiert sein. Damit sind in erster Linie nicht unbedingt CSS-Hacks gemeint, sondern eher die Gesamtstruktur der Datei. CSS Kommentare geben einem die Möglichkeit dies innerhalb der ausgelagerten Datei zu tun. Dies beginnt wie in der Programmiersprache C oder Java üblich mit "/*" und endet mit "*/".

Ziel ist es, dem Benutzer ein schnelles Auffinden der jeweiligen Elemente zu ermöglichen. Man kann dazu im oberen Bereich der CSS Datei beispielsweise den Autor, das Datum der Erstellung und den Zeitpunkt der letzten Änderung vermerken. Dies kann den Vorteil haben, wenn mehrere oder die Nachfolger an einem Projekt arbeiten, dass diese schnell einen Ansprechpartner haben und nicht erst fragen müssen: wer, wann und wo die letzte Änderung durchgeführt hat. Wer eben nicht wie ein vorher von mir angesprochenes Versionierungssoftware nutzt, kann auch somit bei Einhalten der Regeln, den Kollegen einiges an Zeit ersparen. Und Zeit ist bekanntlich Geld.

/*****************************
File: styles.css
*****************************
initial author: XXXXX XXXX
last editor: XXXXX XXXX
firstVersion: 05.10.2005
lastVersion: 02.02.2006
****************************/

Fragen bezüglich bereits verwendeter Styles, Definitionen oder Hacks ergeben sich häufig, wenn man nicht Elemente mit denselben Eigenschaften ( Schriftgröße, Position und Hintergrundgrafik ) mehrfach anlegen will. Entwickler haben ihren eigenen Stil Arbeiten zu erledigen und viele Köche kommen ( idealerweise ) auf unterschiedliche Art und Weise zum Ergebnis mit denselben Auswirkungen ( Layoutergebnis ). Wer möchte einen Submit Button oder Absätze in bestimmten Bereichen, doppelt oder gar dreifach definiert innerhalb einer CSS vorfinden? Um eben Fehler wie diese vermeiden zu können und auch neuen Kollegen einen optimalen Einstieg innerhalb eines Projektes zu gewährleisten, sollten eben diese gut und vor allem übersichtlich erklärt werden.

Eine Struktur kann man auf zwei verschiedene Arten anlegen. Mittels der inhaltlich/funktionellen oder der layoutorientierten Struktur. Ersteres richtet sich eher nach den Funktionen der einzelnen Elemente. Beispielsweise können Überschriften, Listen, Links, Absätze oder Tabellen.

inhaltlich/funktionelle Struktur

/*****************************
FileStructure of styles.css
*****************************
- 1.0 FontZone
1.1 Titles
1.2 Paragraphs
1.3 TextBtn
- 2.0 ColorZone
2.1 ColorDefinitions
- 3.0 Table
- 4.0 Form
******************************/

Die layoutorientierte Struktur der CSS Datei ermöglicht es dem Entwickler, der Struktur der HTML Datei gedanklich zu folgen und so an das Ziel seiner Begierde zu gelangen. Dem zu ändernden Element. Hierbei werden einzelne Hauptbereiche festgelegt ( dem jeweiligen Layout entsprechend ) und gegebenenfalls mit entsprechenden Untergruppierungen versehen, die eine einfachere Erklärung der Dokumentation zur Folge haben und somit auch dem Neuling einen schnellen Einstieg in durchaus umfangreiche und komplexe Dateien ermöglichen kann.

layoutorientierte Struktur

/*****************************
FileStructure of styles.css
*****************************
- 1.0 LayoutStructure
- 2.0 HeaderZone
2.1 Head & Quote
2.2 SkipLinks
- 3.0 ContentZone
3.1 ArticleArea
3.2 CodeExample
3.3 Meta- & CommentZone
3.4 CommentForm
- 4.0 Navigation
4.1 MainNavigation
4.2 NavigationForm
- 5.0 FooterZone
******************************/

Oberhalb der einzelnen Bereiche sollte man dann noch einen Kommentar (bspw. /**** ContentZone ****/ ) bezüglich des jeweiligen Bereiches hinterlassen. So kann man wenn man oben den Titel kopiert, einfach und gezielt danach suchen. Und bei 750 Zeilen langen Dateien, kann eine suche schon eine Weile dauern. Wenn man aber 20 oder 30x mal am Tag Elemente suchen muss, hat dies eine enorme Zeiteinsparung zur Folge. Da auch nicht jeder CSS Editor Syntax-Highlighting verwendet und Kommentare somit zumindest optisch nicht auf den ersten Blick sichtbar sind, kann ein optimal gesetzter Strukturaufbau(kommentar) immer eine Hilfe darstellen, auf die man nicht verzichten sollte.