Objektorientiertes CSS (OOCSS)

29.01.2011 4.446 Aufrufe Web & Co 5,00

Die strikte Trennung von Design und Inhalt bei Webprojekten führte dazu, dass die HTML-Konstrukte immer einfacher und die CSS-Dokumente immer komplexer wurden. So bringen es sogar die Stylesheets kleiner Websites recht schnell auf über 500 Zeilen Code und werden über den Projektlebenszyklus hinweg immer undurchsichtiger. Bei umfangreicheren Webprojekten stellen die Stylesheets nicht selten ein kleines „Kunstwerk“ dar, das mit vertretbarem Zeitaufwand nur vom ursprünglichen Entwickler komplett durchschaut wird.
Diese Tatsache macht es auch sehr schwierig im Team an den Styles einer Website zu arbeiten. Auch eine Wiederverwendung von CSS-Dokumenten für andere Projekte ist nur eingeschränkt möglich.

Die Lösung: OOCSS

Die Webentwicklerin Nicole Sullivan versucht mit ihrer Objektorientiertes CSS (OOCSS) genannten Methode einen Lösungsansatz zu finden.
OOCSS versucht die Idee der Objektorientierung auf CSS zu übertragen. Objektorientiertes CSS ist dabei keine neue Technik, sondern vereint eine Reihe von Regeln für die Gestaltung von CSS-Dateien. Grundgerüst von OOCSS ist eine von Nicole Sullivan auf ihrer GitHub Projektseite bereitgestellte Code-Bibliothek im Alpha-Stadium. Um das CSS-Framework einsetzen zu können, müssen wie schon erwähnt einige Regeln beachtet werden.
Die zwei wichtigsten:

Trenne Container und Inhalt
Gemäß Sullivans Terminologie bildet ein simpler HTML-Tag (z.B. <h1>, <p>, <li>, …) mit zugehörigem CSS einen Inhalt. Komplexere Strukturen bestehend aus mehreren <div>-Elementen werden als Container bezeichnet. Ordnet man diesen Containern jetzt noch über mehrere CSS-Klassen Layout und Design (Skins) zu, dann entstehen Sullivans Objekte.
Trenne Struktur und Design
Nicole Sullivan bezieht sich hier auf das CSS von Containern und Inhalten. Durch die Verwendung unterschiedlicher Klassen für Layout- und Design-Elemente wird die Wiederverwendbarkeit von Objekten in anderen Projekten ermöglicht.

Generell sollten CSS-Deklarationen vermieden werden, die HTML-Elemente in Abhängigkeit eines Containers bringen. Also keine derartigen Konstrukte:

#sidebar h1 {}
#content ul {}
div.news p {}Code-Sprache: CSS (css)

Alle CSS-Anpassungen werden ausschließlich über Klassen vorgenommen, die einander erweitern. Beispiel:

.box {
  background: #fff;
  border: 3px solid #036;
  padding: 5px;
}
.graybox { /* extends: .box; */
  background: #ccc;
}Code-Sprache: CSS (css)

HTML:

<div class="box graybox">
  ...
</div>Code-Sprache: HTML, XML (xml)

Weiters empfiehlt Sullivan bevorzugt Klassen statt IDs zu verwenden und Selektoren ohne Tags zu schreiben (.box statt div.box).
Grund: Einsatzmöglichkeiten erweitern, Redundanzen im Code minimieren.

OOCSS in der Praxis

Sullivans CSS-Framework besteht derzeit aus 12 CSS-Dateien, von denen drei nur zum Debugging verwendet werden. Einen guten Ausgangspunkt für eigene Entwicklungen bildet die Datei template.html, die das Grundlayout umsetzt und als Basis für alle weiteren Seiten dient.
Die Breite der linken und rechten Spalte wird beispielsweise durch Erweiterung des Spalten-Objektes gesetzt:

.myColumn {
  width: 400px;
}Code-Sprache: CSS (css)

HTML:

<div class="leftCol myColumn">
  ...
</div>Code-Sprache: HTML, XML (xml)

Wichtig dabei ist, dass Sullivans CSS-Deklarationen unberührt bleiben!
Die Klasse .leftCol im Beispiel sollte also keinen eigenen CSS-Code erhalten. Schon allein deshalb nicht um schnell und unkompliziert ein Update des Frameworks durchführen zu können.

Don’t think of this as overwriting my classes, but rather extending the objects provided by the framework. I give you columns, headings, and other objects. You can extend those objects by adding another class that only specifies the differences between my base object and your implementation of the same. Mixins may be a good analogy here.
Nicole Sullivan

Mit Grids können die Seiten weiter in kleinere Bereiche unterteilt werden.
Beispiel:

<div class="line">
  <div class="unit size2of3">
    <h3>2/3</h3>
  </div>
  <div class="unit size1of3 lastUnit">
    <h3>1/3</h3>
  </div>
</div>Code-Sprache: HTML, XML (xml)

Sobald das Raster einer Seite aufgebaut ist, können Inhaltsobjekte wie Überschriften, Absätze, Listen, usw. der Datei content.css hinzugefügt werden. Die Datei konzentriert sich hauptsächlich auf die Definition von Ausrichtungen, Abständen, Listendarstellungen, Schriftgrößen, Schriftfarben und dem Verhalten von Links.

Module und Skins

Besonders interessant ist die Datei module.html, die einen Überblick über die mit dem Framework realisierbaren Blockstrukturen gibt. Sullivans HTML-Grundgerüst für alle Arten von Boxen schaut wie folgt aus:

<div class="mod">
  <b class="top">
    <b class="tl"></b>
    <b class="tr"></b>
  </b>
  <div class="inner">
    <div class="hd">
      <h3>mod</h3>
    </div>
    <div class="bd">
      <p>Mod ist der Basis-Container.</p>
    </div>
  </div>
  <b class="bottom">
    <b class="bl"></b>
    <b class="br"></b>
  </b>
</div>Code-Sprache: HTML, XML (xml)

Durch Kombination dieses Containers mit drei verschiedenen CSS-Klassen entstehen drei OOCSS-Module. Für jeden der drei Container gibt es wiederum eigene Skins, die den Rand und die Hintergrundbilder der Boxen definieren. Eine vollständige Komponente besteht aus bis zu vier Klassen, von denen die letzten beiden für Skin und Hintergrund sorgen.

<div class="mod complex flow foo">
  ...
</div>Code-Sprache: HTML, XML (xml)

würde unsere Box folgendermaßen darstellen:

Mit Sullivans Grundformen lassen sich bereits über 200 verschiedene Boxen generieren. Das CSS-Framework bietet auch schon einige Styles für Tabs und „Sprechblasen“.

Mein Fazit

OOCSS ist prädestiniert für die gemeinsame Erstellung von CSS-Dateien im Team und fördert die Wiederverwendbarkeit und Strukturierung von CSS-Dokumenten. OOCSS hat auch viele Kritiker, da die Regel „Trenne Container und Inhalt“ in direktem Widerspruch zum CSS-Grundkonzept der Kaskade steht – jedoch wird dieses 1994 entwickelte Konzept heutigen Entwicklungsprozessen überhaupt noch gerecht?
Ich finde Sullivans Ansätze jedenfalls sehr interessant und kann mir gut vorstellen ihr Framework bei einem umfangreicheren Teamprojekt einzusetzen.