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.

© 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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.