Es ist eine Glaubensfrage wie CSS Dateien am sinnvollsten strukturiert werden. Hierüber wurden Artikel und ganze Bücher geschrieben, es gibt unzählige Empfehlungen und “Best-Practices”, doch am Ende muss der Autor die Entscheidung treffen, wie er sein Markup und das dazugehörige CSS strukturiert.

Eine wenig verbreitete Möglichkeit ist die Anwendung on Techniken, die in objektorientierten Programmiersürachen, wie z.B. Java, C++ o.ä, verwendet werden. Folgt man konsequent dieem Ansatz, so erleichtert einem dies den fliessenden Wechsel zwischen verscheidenen Codeumgebungen ohne große Eingewöhnungsphasen.

Zu den Grundlagen der Objektorientierung gehört einerseits das Klassenmodell, sowie die Vererbung. Dies findet sich auch in CSS wieder, steht CSS doch für den Ausdruck “Cascading Stylesheets”, also kaskadierende oder vererbende Stilangaben.

Behält man dies im Hinterkopf, lässt sich eine CSS-Datei, sowie das zugehörige HTML-Markup logisch strukturieren. Nehmen wir an, ihr möchtet in eurem HTML Dokument eine Reihe von Rechtecken platzieren. Diese sollen unterschiedliche Größen und Farben haben. Der einfachste und am häufigsten gesehene Ansatz ist wohl dieser:

HTML

<div id="Rechteck1">Ich bin ein Rechteck</div> <div id="Rechteck2">Ich bin noch ein Rechteck!</div> <div id="Rechteck3"> Und noch eines...</div>

CSS

#Rechteck1{ Width: 400px; height:100px; background-color: red; color:#fff; } #Rechteck2{ width: 200px; height: 100px; background-color:green; color:#fff; } #Rechteck3{ width:200px; height:100px; background-color:#444; color:#fff; }

Zuegegeben, das Beispiel ist sehr rudimentär, soll euch aber einen Eindruck geben, wie man das Ganze einfacher und übersichtlicher gestalten kann. Wozu das gut ist? Klar funktioniert der obere Code problemlos. Für eine Seite, die nie wieder geändert wird, könnte man das ganze so umsetzen. Allerdings geht das ganze auch einfacher und übersichtlicher. Das bietet euch Vorteile bei der späteren Bearbeitung. Wenn ihr dann noch ordentlich kommentiert, kann später auch jemand anderes euren Code problemlos weiterbearbeiten.

HTML

<div class="rechteck" id="Rechteck1">Ich bin ein Rechteck</div> <div class="rechteck" id="Rechteck2">Ich bin noch ein Rechteck!</div> <div class="rechteck" id="Rechteck3">Und noch eines...</div>

Unterschied gefunden? Richtig, die Klasse “rechteck” ist dazugekommen. Aber was soll das bringen, ausser das HTML “aufzublähen”? Ganz einfach. In objektorientierten Programmiersprachen werden zunächst sog. Objektklassen definiert. Diese legen grundsätzliche Eigenschaften von Objekten fest. Möchte man nun ein Objekt erzeugen, so ist dieses immer einer Klasse zugehörig, Objekte können nicht direkt erzeugt werden. Bei der Verwendung von CSS wird Einsteigern oft suggeriert, daß ein id-Attribut “ höherwertig” ist, als eine Klasse. Das kann man allerdings so nicht sagen. Es ist zwar anfangs einfacher oder verständlicher mit id-Attributen zu arbeiten, aber gleichzeitig legt uns diese Vorgehensweise auch eine wichtige Beschränkung auf. Ids müssen eindeutig sein und dürfen (pro HTML Seite) nur einmal verwendet werden. Das macht den Quelltext zwar eindeutig und ggf. leicht verständlich, führt aber zu unverhältnismäßig großen CSS Dateien, da man jeden Tag mit id-Attribut, also einfacher gesagt jedes “Objekt” einzeln formatieren muss – kann man machen, ist aber nicht die eleganteste oder gar praktibelste Lösung. Wäre es nicht viel sinniger unnötigen Code direkt zu vermeiden? Jeder Student, der Informatik oder ein verwandtes Studienfach gewählt hat, begegnet in seinem Studium irgendwann dem Grundsatz der Sparsamkeit. Auch wenn die möglichen Folgen unnötig umfangreicher Codewüsten für HTML-Projekte normalerweise nur begrenzte Effekte haben, ist es auch hier sinnvoll auf sauberen Code zu achten. Wenn wir uns hierzu nochmal unsere Rechtecke und das angepasst HTML-Markup vornehmen, lässt sich dies auch so umsetzen:

CSS

.rechteck{ width:200px; height: 100px; color:#fff; } #Rechteck 1{ background-color:red; width:400px; } #Rechteck 2{ background-color:green; } #Rechteck3{ background-color:#444; }

Sieben Codezeilen anstatt zwölf, mathematisch gesehen 41,7% weniger Code – wenn das keine Ersparnis ist. Schaut man sich die neue CSS-Datei an, fällt auf, daß die Klassendefinition für die Klasse “rechteck” dazugekommen ist. Diese definiert alle grundlegenden Formate eines (in unserem Beispiel) Rechtecks. Alle Rechtecke haben so z.B. eine Höhe von 100px und enhaltener Text ist weiss. Für unsere drei Rechtecke haben wir dann bei den einzelnen Objekten vom Typ Rechteck nur noch Abweichungen vom Standardrechteck definiert. Welche Vorteile bringt und das? Ganz einfach. Kommt nun z.B. ein Rahmen dazu, müssen wir nur noch die Klassendefinition anpassen:

CSS

.rechteck{ width:200px; height:100px; color:#fff; border: 1px solid #eee; }

Alle Rechtecke der Klasse bekommen nun einen grauen Rahmen mit einem Pixel Breite. Merkt ihr nun, daß euch die Textfarbe nicht mehr passt, könnt ihr diese einfach anpassen:

CSS

.rechteck{ width:200px; height:100px; color:#eee; border: 1px solid #eee; }

Das lässt sich so beliebig fortsetzen. Die Klasse “rechteck” vererbt Ihre Eigenschaften an alle Objekte der Klasse weiter, bis Sie explizit überschrieben werden. So könnte man nun z.B. das Objekt “Rechteck1” optisch etwas herausarbeiten wollen und es einfach in der Höhe verdoppeln:

CSS

#Rechteck1{ background-color:red; width:400px; height:200px; }

Wenn ihr jetzt so richtig in Fahrt seit und etwas ganz Verrücktes machen wollt, könnt ihr auch ein neues Rechteck einbauen:

HTML

<div class="rechteck" id="Rechteck1">Ich bin ein Rechteck</div> <div class="rechteck" id="Rechteck2">Ich bin noch ein Rechteck</div> <div class="rechteck" id="Rechteck3">Und noch eines...</div> <div class="rechteck">Ein neues Rechteck</div>

Wie, diesmal keine ID? Geht das? Ja, geht. Das neue Rechteck bekäme in diesem Fall alle Standardformatierungen, aber kein eigenes id-Attribut. Damit ließe sich dieses spezielle Rechteck zwar nicht mehr direkt anpassen, aber, wenn der betreffende Tag (hier: div) z.B. nur die Funktion hat, Text einen Rahmen (sichtbar oder nicht) zu geben, reicht das vollkommen aus. Man nutzt dies z.B. gerne bei Konstrukten mit sog. Container-divs, die den eigentlichen Inhalt einer Website in einem (unsichtbaren) Rahmen halten.

Folgt man streng der Hierarchie eines CSS-Dokuments, müsste man eigentlich sogar noch vor der Klassendefinition ansetzen, also die allgemeinen Formatierungen direkt auf Selektorebene durchführen. Das kann man machen, hat aber unter Umständen den Nachteil umfangreiche Anpassungen erforderlich zu machen, falls an bestimmter Stelle eine vom Standard abweichende Slektorformatierung gewünscht ist. Ausserdem hat der Ansatz einer allgemeinen Klassendefinition den Vorteil “typübergreifend” verfügbar zu sein. So könnten wir in unserem Beispiel z.B. auch einen Absatz oder ein Bild mit der Klasse “rechteck” auszeichnen und hätten auch diese Elemente direkt in der passenden Formatierung.

Sicherlich sind hier noch weitere, deutlich komplexere Beispiele denkbar. Für den Anfang will ich es aber hierbei belassen, immerhin möchte ich Einsteigern in die Thematik hier nur einige Denkanstöße liefern. Für Programmieraufgaben gibt is in der Regel mehr als eine sinnvolle Lösung, auch muss der hier gezeigte Ansatz nicht unbedingt für jeden Anwendungsfall der Optimale sein. Was in jedem Fall (noch) fehlt, sind Variablen. Diese sind so in der aktuellen CSS-Spezifikation nicht vorgesehen. Es gibt allerdings bereits CSS-Frameworks, die diesen Umstand beheben.