CSS reloaded

Teil 4: [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets

Indem Sullivan den Container mit drei verschiedenen CSS-Klassen kombiniert, entstehen drei OOCSS-Module.

Die Grundform ist in der Klasse .mod festgelegt. Dieses Modul eignet sich für Kästen mit einfachen Rahmen, die ausschließlich mit den Mitteln von CSS gestyled werden. Benötigen Sie einen Block, der mit grafischen Rändern aufgemotzt werden soll, dann erweitern Sie .mod mit .complex, das die dafür notwendigen zusätzlichen Attribute enthält. Auf die Kombination von .mod und .pop greifen Sie zurück, wenn Sie Ränder mit Transparenz-Effekten benötigen, wie sie sich mit Leslie Sommers Mojo Blocks realisieren lassen.

Für jeden der drei Container liefert Sullivan einige Skins mit, die den Rand der Box definieren sowie Hintergrundbilder. Diese können Sie ganz einfach auf eine Box anwenden. Dazu müssen Sie der Box lediglich den Namen des Skins beziehungsweise des Hintergrunds als Klasse hinzufügen. Eine vollständige Komponente bringt es dann auf bis zu vier Klassen, von denen die letzten beiden für Skin und Hintergrund sorgen:

<div class="mod complex slow login">

Zur Abrundung liefert Blocks auch schon einige passende Skins für Überschriften und Fußzeilen in den Blöcken mit.

Teamfähig

Weil sich Inhalte, Container, Layout- und Skin-Klassen dank OOCSS frei miteinander kombinieren lassen, bietet die Methode eine riesige Gestaltungsvielfalt. Und diese wächst mit jedem Projekt, für das Sie neue Elemente entwickeln. Dass einige Kombinationen optisch nicht funktionieren, tut dem keinen Abbruch.

Auf der Habenseite kann OOCSS außerdem verbuchen, dass sich das strukturierte CSS leichter durch verschiedene Team- Mitglieder pflegen lässt als das monolithische CSS alter Art. Die Team-Mitglieder können einen sehr unterschiedlichen Kenntnisstand bezüglich HTML und CSS mitbringen. Der Praktikant darf Skins entwickeln, kann aber keine Grids oder andere Module kaputtmachen.

Umgekehrt wird der Chef-Designer von Kleinigkeiten wie eben der Skin-Entwicklung entlastet und kann sich auf Aufgaben konzentrieren, die sein Wissen und seine Erfahrung voll auslasten. Insofern ist OOCSS insbesondere für Agenturen ein wichtiges Tool, das eine zeitgemäße Aufgabenteilung und eine bessere Auslastung von Mitarbeitern ermöglicht.

Trotz dieser Vorteile ist OOCSS umstritten, und das nicht nur unter gestandenen Programmierern. Ihnen geht Sullivan zu sorglos mit dem publicityträchtigen Begriff Objektorientierung um. OOCSS setzt CSS auf eine Art und Weise ein, für die es offensichtlich nicht konzipiert wurde.

Die Regel "Trenne Inhalt und Container" steht in direktem Widerspruch zum CSS-Grundkonzept der Kaskade. Elemente, die eine ausdrückliche Vererbung erlauben würden, beispielsweise das von Sullivan vorgeschlagene Attribut extends, gibt es in CSS nicht. Der Preis, den man für konsequent umgesetztes OOCSS bezahlt, ist deshalb unübersehbar: Eine Vielzahl an Klassen, Änderungen am HTML-Code sowie ein geminderter semantischer Wert der entstehenden Dokumente.

Wie viel OOCSS Sie in Ihre eigene Arbeit einfließen lassen können, werden Sie deshalb in Abhängigkeit vom jeweiligen Projekt entscheiden müssen. Kritiker des Konzeptes müssen sich unterdessen die Frage gefallen lassen, inwiefern das 1994 entwickelte Konzept der Kaskade heutigen Entwicklungsprozessen noch gerecht wird.

zm_timkaufmann

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".