CSS bietet viele nützliche Funktionen. So können wir hiermit schnell und einfach komplexe Layouts umsetzen. Um uns unnötige Programmierarbeiten zu sparen, sollten wir stets darauf bedacht sein mit unserem Code sparsam umzugehen. Programmierern wird nachgesagt von Haus aus faul zu sein. Ohne dies jetzt näher zu bewerten, gehört es zum Handwerk vorhandenen Code wenn möglich nicht nur einmal, sondern mehrfach zu verwenden.

Das Coderecycling bietet einige Vorteile. So können wir uns unnnötige, mehrfache Schreib- bzw. Tipparbeit sparen und damit gleichzeitig die zukünftige Wartbarkeit des Codes verbessern. Doch was bringt und das im Bezug auf CSS-Formatierungen bei Webseiten?

Ganz einfach. Wir können mit CSS Eigenschaften vererben (dies ist strenggenommen sogar der eigentliche Zweck eines CSS Stylesheets) . Diese Kaskadierung sorgt dafür, daß wir ausgehend von einer allgemeinen Formatierung auf Selektorebene vom Allgemeinen zum Speziellen “durchformatieren” können. Alternativ können wir auch ein an objektorientierte Programmiersprachen angelehntes Kozept von allgemeinen Klassendefinitionen und speziellen Objektformatierungen (Tags mit id-Attribut) implementieren.

Was vielen Webseitenerstellen, ob Entwickler, Designer oder Hobbybastlern nicht bewusst ist, ist die Möglichkeit CSS Klassen kombinieren zu können. So lässt sich z.B. ein einheitlicher Schatten definieren, der später auf mehrere Objekte angewendet werden kann:

CSS

.schatten{ box-shadow: #000 0px 0px 20px 30px; }

Dieser sehr einfache Schatten kann nun beliebig im HTML Dokument auf verschiedene Elemente angewendet werden. So lassen sich z.B. Boxen oder Eingabefelder mit einem (konsistenten) Schatten hinterlegen. Gehen wir weiter, sind auch diverse weitere Optionen denkbar:

CSS

.schatten{ box-shadow: #000 0px 0px 20px 30px;
}

Diese allgemeinen Eigenschaften lassen sich nun auf (fast) beliebige Elemente innerhalb des HTML Quelltextes anwenden:

HTML

<div class="schatten">Ich bin eine Box mit Schatten. Ich beinhalte ein Eingabefeld <input type="text" class="schatten rahmen_grau" name="irgendwas" /> mit Schatten und Rahmen, sowie einen Knopf mit rahmen und runden Ecken <input type="submit" class="rahmen_grau runde_ecke" /> </div>

Hier sehen wir, wie sich einfach CSS-Klassen kombinieren lassen. Die jeweiligen Klassennamen werden dazu einfach im class-Attribut durch Leerzeichen getrennt “aufgerufen”. Dabei lässt sich auch direkt erkennen, worin der Vorteil des Einsatzes von spezifschen Klassen gegenüber einer direkten Formatierung, z.B. auf Selektorebene liegt. Wir können unsere Eigenschaften-Klassen für fast alle Elemente im Quelltext verwenden und erhalten so ein harmonisches Erscheinungsbild, ohne Formatierungen durch überflüßige “Kopieren und Einfügen”-Orgien übernehmen zu müssen. Weniger Code bedeutet weniger Fehler auf der einen und bessere Wartbarkeit auf der anderen Seite. Ist euch nämlich der Schatten irgendwann zu schwarz, könnt ihr ihn an zentraler Stelle anders einfärben, ohne jede entsprechende Formatierung mühselig anpassen zu müssen.

Viele Frameworks (insbesondere Grid-Systeme) nutzen kombinierte CSS Klassen um ein einheitliches Erscheinungsbild zu gewährleisten.