CSS reloaded

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

Einfaches HTML, aber komplexe, schwer zu pflegende Stylesheets - so sehen Web-Projekte heute aus. Objektorientiertes CSS verspricht einen Ausweg aus der Krise. Der Workshop zeigt, wie es funktioniert.

CSS-Eigenschaft float

© Archiv

CSS-Eigenschaft float

Es steht heute außer Frage, dass Inhalt und Design einer Website in HTML- und CSS-Dokumente aufgespaltet werden müssen. Nur so lassen sich Websites effizient entwickeln und pflegen. Dieser Erkenntnis verdanken wir HTML-Seiten, die deutlich schlanker daherkommen als noch vor fünf Jahren.Unterdessen bringen es selbst die Stylesheets kleinerer Websites auf 500 bis 1.000 Zeilen - jedes ein kleines Kunstwerk, das mit vertretbarem Zeitaufwand nur von seinem ursprünglichen Entwickler zu durchschauen ist. Und CSS muss von Experten entwickelt werden, welche die Materie mehr oder weniger vollständig durchschauen.

Eine arbeitsteilige Entwicklung des CSS ist kaum möglich. Wer das CSS einer Website nicht durchschaut, weil er es lange nicht mehr angefasst hat, in Eile ist oder es einfach von einem Kollegen übernahm, der flickt die gerade benötigten Erweiterungen einfach unten an und klopft sie möglichst genau fest, damit sie nicht von der Kaskade überstimmt werden. Oder man vergreift sich gleich am HTML und platziert das CSS inline.

Problematisches CSS

Diese nahe liegende Vorgehensweise bringt mehrere grundlegende Probleme mit sich. Das CSS wird über den Lebenszyklus einer Website hinweg immer undurchsichtiger. Jedes neue Seitenelement erfordert zusätzliches CSS. Außerdem lässt sich der Code kaum projektübergreifend wiederverwenden, weil er sehr speziell angelegt wird.

Und das, obwohl die meisten Seiten derart viele ähnliche Seitenelemente (etwa Boxen mit eckigen und runden Ecken, Kontaktformulare, Warenkörbe, Bilder mit und ohne Unterschriften) aufweisen, dass solches Code-Recycling mehr als nahe liegt. Andere Web-Techniken sind da weiter.

Beispielsweise können PHP- und Javascript-Entwickler unter einer riesigen Vielfalt verschiedener Frameworks und Libraries wählen, die ihre Arbeit beschleunigen und vereinfachen. Für Frontend-Codierer gibt es hingegen bestenfalls Frameworks wie YAML oder Yahoos YUI CSS, mit denen sich - vereinfacht ausgedrückt - das Layout einer Seite rasch und browserübergreifend einheitlich anlegen lässt.

In diese Lücke stößt die Webdesignerin Nicole Sullivan mit ihrer "Objektorientiertes CSS" (OOCSS) genannten Methode, die sie kürzlich in einem rund 45 Minuten langen Video () vorgestellt hat.

OOCSS ist keine neue Technik, sondern besteht aus einer Reihe von Regeln für die CSS-Gestaltung, deren Einhaltung alle genannten Probleme lösen soll. Das System lässt sich mit den aktuellen Browsern und Standards für HTML/CSS sofort umsetzen.

Konkretisiert hat Sullivan OOCSS in ihrer eigenen Komponentenbibliothek namens Blocks, die Sie für die nächsten Schritte dieses Workshops benötigen. Zu finden ist Blocks in einer Alpha-Version unter .

Bottom-Up statt Top-Down

OOCSS bedeutet eine komplette Umkehr des Template-Entwicklungsprozesses. Bisher beginnt dieser typischerweise mit der Umsetzung des Startseiten-Designs in HTML und CSS. Anschließend werden die für Unterseiten angelegt und noch fehlende Seitenelemente zu diesem Zeitpunkt dazucodiert.

Bei OOCSS hingegen beginnen Sie mit einer Code-Bibliothek, die bereits viele generische Seitenelemente enthält, die Sie oder andere Entwickler für frühere Projekte codiert haben. Diese Bibliothek vervollständigen Sie mit den für das aktuelle Projekt notwendigen Elementen und stecken die Website anschließend wie mit Legos zusammen.Damit verschiebt sich der Schwerpunkt der Entwicklung auf das Design der Seitenelemente, was deren jeweiliger Qualität zugutekommen soll. Außerdem beschleunigt sich die Entwicklung. Und sie lässt sich auf mehrere Schultern verteilen.

Objektorientierte Stylesheets

© Archiv

In der Google-Gruppe Object Oriented CSS wird die Weiterentwicklung der Blocks-Bibliothek koordiniert.

Getrennt marschieren, vereint schlagen

Damit das funktioniert, gibt OOCSS zwei besonders wichtige Regeln vor. "Trenne Struktur und Design" und "Trenne Container und Inhalt". Um diese zu verstehen, müssen wir tiefer in Sullivans Terminologie einsteigen.

Als Inhalte bezeichnet sie simple Elemente wie ein <h1> oder <p>, die zumeist nur aus einem einzigen HTML-Tag und dem zugehörigen CSS bestehen.

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​".