Was ist ein CSS Objekt?

Grundsätzlich ist ein CSS Objekt ein sich wiederholendes Muster, welches als unabhängiges Code Snippet von HTML, CSS und Javascript abstrahiert werden kann. Einmal erstellt kann so ein CSS Objekt dann mehrfach auf der Webseite erzeugt und verwendet werden. CSS Objekte können also genauso verwendet werden, wie Objekte die wir aus anderen Hochsprachen kennen.

Um CSS objektorientiert zu verwenden gibt es 2 grundsätzliche Prinzipien an die man sich halten muss.

Struktur und Aussehen trennen

Darunter versteht man das Trennen von strukturrelevanten Styles, wie zum Beispiel die Höhe und Breite eines Elements von den Styles, die für das Aussehen (=Skin) des Elements verantwortlich sind, zum Beispiel Hintergrundfarbe, Schatten und Textfarbe.

Es kommt oftmals vor, dass Webseiten Elemente verwenden die exakt dieselbe Struktur haben, aber andere Farben/Skins darauf anwenden. Ein Beispiel dafür ist die Navigationsleiste auf Staticfloat. Von Home bis Feedback haben alle Elemente die gleiche Struktur aber eine unterschiedliche Schriftfarbe.

Ein Stylesheet, welches nicht objektorientiert angelegt ist, könnte folgende Klassen enthalten.

.box {
	width: 300px;
	overflow: hidden;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: 2px 2px 3px black;
}

.comment {
	width: 100%;
	height:90px;
	overflow: auto;
	border: solid 1px black;
	background: linear-gradient(#ccc, #222);
	box-shadow: 2px 2px 3px black;
}

Man sieht auf den ersten Blick, dass Struktur und Skin nicht getrennt sind. Dies hat zur Folge, dass Klassen nur eingeschränkt wiederverwendet werden können. Außerdem haben alle Klassen gemeinsame Styles, wodurch eine gewisse Redundanz entsteht.

Wenn wir nun das Konzept von objektorientiertem CSS auf das Stylesheet anwenden erhalten wir folgende Klassen.

.box {
	width: 300px;
	overflow: hidden;	
}

.comment {
	width: 100%;
	height:90px;
	overflow: auto;
}

.skin {
    border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: 2px 2px 3px black;
}

Am Ende entstehen 2 Klassen welche die Struktur der Elemente festlegen und eine Skinklasse. Nun haben wir zwar eine Klasse mehr, aber insgesamt trotzdem weniger Code und keine Redundanz mehr.
Außerdem können die Strukturelemente nun auch mit anderen Skins verwendet werden, wodurch der Code viel besser wiederverwendet werden kann.

Container und Inhalt trennen

Separation of Containers and Content ist der zweite wichtig Aspekt in der Anwendung von objektorientiertem CSS. Damit ist gemeint, dass man keine Styles von einem Element, über ein Elternelement von diesem definieren darf.

Beispiel:

#container h1 {
	font-size: 1.5rem;
	line-height: 50px;
	color: black;
	text-shadow: 3px 3px 6px blue;
}

Solche Definitionen werden in der Realität sehr häufig vorgenommen, doch was ist, wenn wir in einem anderen Element wieder genau dieselben Styles verwenden möchten nur mit einer anderen Schriftgröße.

Die Lösung könnte dann folgendermaßen aussehen:

#container h1, #container2 h1 {
	font-size: 1.5rem;
	line-height: 50px;
	color: black;
	text-shadow: 3px 3px 6px blue;
}

#container h1 {
        font-size:2rem;
}

Dadurch erreicht man das gewünschte Ergebnis aber nur, indem man Überschreibungen eines bereits definierten Styles vornimmt. Außerdem sind die Styles nicht wiederverwendbar, da sie von dem Elternelement abhängig sind. Diese Lösung entspricht also nicht dem objektorientiertem Ansatz.

Besser wäre es den Elementen wieder explizit eine Struktur- und Skinklasse zuzuweisen.

Vorteile

Dadurch, dass Redundanzen eliminiert werden, wird der gesamte Code kompakter und kleiner. Dies sorgt nicht nur dafür, dass weniger Zeit in die Entwicklung und Weiterentwicklung gesteckt werden muss, es minimiert auch den Traffic der Webseite. Da der Benutzer weniger Daten laden muss, wird die Webseite am Ende schneller dargestellt.

Ein weitere Aspekt ist, dass die Wartung vereinfacht wird. Das Aussehen von Elementen kann auf einfache Weise geändert werden, ohne die Struktur und das Layout zu zerstören.