28. May 2010

Kurz erklärt: OOCSS von Nicole Sullivan

• Aktuelles
• HTML & CSS
• Netzreisen
• 0 Kommentare

Webdesigner kämpfen immer wieder damit, ihre CSS-Dateien ordentlich zu halten. Eine Möglichkeit ist, viele kleine CSS-Dateien zu erstellen, die dann für jeweils einen bestimmten Bereich der Website das Design zur Verfügung stellen. Diese Möglichkeit schützt allerdings nicht vor doppelten Angaben innerhalb des Stylesheets. Dafür gibt es jetzt Object Oriented CSS (kurz OOCSS) von Nicole Sullivan.

Ausgangslage

Normalerweise wird eine Box mit rosa Hintergrund und schwarzer Rahmenlinie so definiert:

.boxmitrosarahmen {
  background: #8f0824; /* oder irgendetwas anderes rosa farbenes */
  border: 1px solid black;
  padding: 10px;
}

Im HTML greift man mittels dieses Konstrukts auf die eben festgelegten Formatierungen zurück:

<p class="boxmitrosarahmen">Lorem ipsum…</p>

Einen zweiten Kasten mit anderen Farbwerten kann man analog zum ersten Beispiel erstellen. Wenn man das gemacht hat, fällt auf, dass gewisse Formatierungen der Boxen doppelt definiert wurden:

• Der Innenabstand, der zweimal 10px beträgt
• die Rahmenstärke und der Rahmentyp

Und wo bleibt jetzt das Object Oriented CSS?

Hier setzt OOCSS von Nicole Sullivan an. Es überträgt den Hintergedanken von Objektorientierung (von Programmiersprachen) auf CSS. Ein Gedanke von Objektorientierung ist die Modularisierung: Alles wird auf kleinste Teilchen reduziert, die dann erweitert werden. Unmittelbar damit verbunden ist das sogenannte DRY-Prinzip. “DRY” steht für “Don’t repeat yourself” und fordert, dass nichts doppelt notiert wird. Unser Ausgangsbeispiel verstößt also ganz radikal gegen das DRY-Gesetz.

Wie können wir dem begegnen? Mit Object Oriented CSS. Überlegen wir uns also, wie wir die doppelten Angaben vermeiden. Wir könnten eine Art Basisklasse festlegen, die die grundlegenden Formatierungen für die Boxen festlegt, und einige andere Klassen, die diese Basisklasse erweitern. Die Basisklasse könnte .box heißen und so aussehen:

.box {
  padding: 10px;
  border-style: solid;
  border-width: 1px;
}

Die Erweiterungsklassen könnten nach folgendem Muster angelegt werden:

.rosablack {
  background: #8f0824; /* Den Kommentar dazu spare ich mir hier.  */
  border: 1px solid black;
}

Diese Namensgebung der Erweiterungsklassen (erst der Hintergrundname in einem Wort und dann die Farbe der Rahmenlinie) widerspricht zwar dem uralten Grundsatz, dass man sprechende Klassennamen wie .note oder .important verwenden soll, weil man aus .rosablack nur schwer ablesen kann, wofür diese Klasse zuständig ist. Natürlich könnte man die Klasse auch .note oder .important nennen. Aber für mich war diese Namensgebung praktischer, weil bei mir eine grüne Box (grüner Hintergrund und grüner Rahmen) nicht automatisch eine “Irgendetwas-ist-gut-gelaufen-Box” heißt.

Im HTML greift man dann auf beide Klassen (Basis- und Erweiterungsklasse) gleichzeitig zu, ganz nach Motto:

<p class="box rosablack">Lorem ipsum…</p>

Vor- und Nachteile von OOCSS

Nach dieser ersten Demonstration stellt sich vielleicht die Frage nach den Vor- und Nachteilen von OOCSS.

Ein Nachteil von OOCSS ist sicherlich, dass man mehr schreiben muss (weil die sogenannten short hands im CSS nicht mehr vorhanden sind, bzw. gemäß dem DRY-Prinzip nicht mehr angewendet werden dürfen). Das betrifft allerdings nicht nur das CSS, sondern auch das HTML.

Der Vorteil jedoch ist, dass man nichts mehr doppelt schreibt und so später einmal bei allen Boxen auf einmal, egal welcher Farbe, die Rahmenstärke ändern kann. Dieser Vorteil der Modularisierung des CSS hat mich voll überzeugt und mich dazu bewogen, das Konzept in Maßen auch auf meiner eigenen Website einzusetzen; ich benutze es bei den Kästen, die manchmal im Fließtext auftauchen, und bei den Erfolgs- und Fehlermeldungen beim Kontaktformular.

Ich hoffe, eine gute kleine Einführung in das Thema gegeben zu haben. Vielleicht regt mein Blogeintrag den ein oder anderen Webdesigner, der meine Website besucht, dazu an, doch mal sein CSS und HTML noch mal zu überdenken und OOCSS bei zukünftigen Projekten konsequent einzusetzen.

Weblinks zum Thema

• OOCSS von Nicole Sullivan — Einführung, Dokumentation, Präsentationsvideo und Download-Paket zum Herumspielen
• Lesenswerter Artikel bei den Webkrauts

Kommentare

Zu diesem Beitrag wurden keine Kommentare verfasst.

Commenting is not available in this weblog entry.