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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017