CSS reloaded

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

Davon unterscheidet sie Container. Das sind komplexere Strukturen, beispielsweise eine aus mehreren <div> bestehende Box. Diesen Containern ordnet sie über mehrere CSS-Klassen Layout und Design (Skins) zu. Für die so entstandenen Verbindungen verwendet sie die Bezeichnungen Komponenten und Objekte.Wenn Nicole Sullivan die Trennung von Struktur und Design fordert, dann bezieht sie sich damit auf das CSS von Inhalten und Containern. Nur wenn Sie Layout und Design in unterschiedlichen Klassen ablegen, wird es möglich werden, Objekte in verschiedenen Projekten einzusetzen. Die "Trennung von Container und Inhalt" ist die logische Fortsetzung dieser Regel. In Code gegossen bedeutet sie den Abschied von Definitionen wie

Objektorientierte Stylesheets

© Archiv

Die OOCSS-Bibliothek Blocks enthält unter anderem ein Grid-System zur Unterteilung von Webseiten in Spalten.
#sidebar h1
#aktuelles ul
.produkt table

bei denen ein Element sein Layout und/oder Erscheinungsbild in Abhängigkeit davon ändert, in welchem Kontext - vulgo:Container - es auf einer Seite eingefügt wird. Angenehmer Nebeneffekt: Als Entwickler bleiben Sie von Überraschungen verschont, die bei herkömmlichen Websites an der Tagesordnung sind, wenn man beispielsweise ein h1 aus div.content nach div.sidebar verpflanzt.

Anpassungen nehmen Sie nur noch über Klassen vor, die einander erweitern. Um diesen Zusammenhang im CSS festzuhalten, führt Nicole Sullivan das undefinierte Attribut extends (erweitert) ein:

.box {
border: 1px solid gray;
background-color: white;
border-radius: 5px;
}
.redbox {
/* extends: .box; */
background-color: red;
}<div class="box redbox">
...</div>

Außerdem schlägt Sullivan auch vor, bevorzugt Klassen anstelle von IDs zu verwenden und Selektoren ohne Tags zu schreiben (.box statt div.box).

Diese Maßnahmen sollen die Einsatzmöglichkeiten für das vorhandene CSS erweitern und den Bedarf an zusätzlichem Code begrenzen.

OOCSS in der Praxis

Wie OOCSS in der Praxis aussieht, zeigen die HTML- und CSS-Dateien aus der Blocks-Bibliothek. Im Ordner CSS finden Sie gleich neun Stylesheets. Drei davon werden nur zum Debugging eingebunden. Die übrigen dienen in ihrer Vielfalt hauptsächlich der Verdeutlichung der Struktur, die Sullivan gedanklich zugrunde gelegt hat. Die Unterteilung in mehrere Dateien erleichtert aber auch die Teamarbeit.

Sullivan hat aktiv am YSlow-Projekt mitgearbeitet und sich darauf spezialisiert, große Websites wie die von Yahoo auf hohe Geschwindigkeit zu trimmen. Deshalb darf man davon ausgehen, dass ein Live-Betrieb der zahlreichen Stylesheets keine nennenswerten Performance-Nachteile mit sich bringen würde.

Am besten gehen Sie die CSS-Dateien in der Reihenfolge durch, in der sie im HTML eingebunden werden. Zuerst lädt Sullivan die libraries.css, in der CSS-Frameworks Dritter platziert werden. Aktuell besteht der Inhalt aus den YUI-CSS-Bibliotheken Reset und Fonts . Sie bringen aktuellen Browsern ein einheitliches Rendering elementarer HTML-Tags bei und sorgen so für eine gemeinsame Ausgangsposition.

Eigenes Grid-System

Unterschiedliche Seitenraster realisiert Sullivan überraschenderweise nicht mit YUI-CSS Grids. Sie entwickelt stattdessen ein eigenes Grid-System, das in den Dateien template.css und grids.css steckt. Template.css enthält dabei die großen Strukturen, also Vorgaben für den Body, die linke, die rechte und die mittlere Spalte.

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