Wie im letzten “Terrific-Post”:http://blog.namics.com/2010/06/terrific-part1.html angetönt, geht es in dieser Episode ein bisschen ans Eingemachtere… also dann, auf gehts…
h3. Wieso OOCSS?
Terrific basiert auf “OOCSS”:http://wiki.github.com/stubbornella/oocss. Um die Vorteile von OOCSS zu begreifen, muss man zuerst die Schwachstellen und Probleme von CSS verstehen.
_Code ist sehr “fragil”_
Eine falsche Änderung kann durch die “Kaskadierung”:http://www.thestyleworks.de/basics/cascade.shtml unvorhersehbare Effekte hervorrufen – zum Beispiel Layoutfehler auf Seite xx.
_Parallele Entwicklung im Team ist extrem schwierig_
Die CSS-Regeln beeinflussen sich gegenseitig. Ohne genaue Kenntnisse über die Arbeit der Teamkollegen, ist die parallele Entwicklung praktisch unmöglich.
_Code-Reuse ist sehr selten_
Wir “vertrauen” nicht auf den Code von anderen. Dies nicht aufgrund egomanischen Zügen, sondern weil uns die Erfahrung gelehrt hat, dass wir oftmals eleganter und schneller zum Ziel kommen, wenn wir CSS-Code von Grund auf selber schreiben. Nicht selten bedient man sich dabei stark gekapselten CSS-Selektoren à la “#id .class”, die einen Reuse wegen ihrer hohen Spezifität und Individualität praktisch ausschliessen.
_Konsequenzen_
* Code wird unübersichtlich und unstrukturiert
* Der Code wächst linear zur Projektgrösse = Performanceprobleme
Beides hat zur Folge, dass die Fehleranfälligkeit stark ansteigt und der Code unwartbar wird.
h3. Wie macht man es besser?
OOCSS wurde von “Nicole Sullivan”:http://www.stubbornella.org/content/ (Yahoo) entwickelt und stellt einen wiederverwendbaren Baukasten an CSS-Klassen zur Verfügung. Oberstes Ziel von OOCSS ist es, vorhersagbares Verhalten ohne Seiteneffekte sicherzustellen. Dies wird erreicht, indem das Markup und die dazugehörigen CSS-Klassen stark standardisiert werden.
Alle “Terrific Komponenten”:http://blog.namics.com/2010/06/terrific-part1.html werden entsprechend den OOCCS-Regeln umgesetzt:
h4. Elements
Grundlegende Definition der HTML Elemente
/* Link */
a.base, a.base:link, a.base:visited {
color: #434343;
text-decoration: underline;
}
Als Namenskonvention wird.base verwendet. Dadurch kann man von Module zu Module selbst entscheiden, ob man den Basisstyle eines Elements verwenden will oder nicht.
h4. Layout
Aufteilung in einzelne, voneinander getrennte Bereiche (z.B. Header, Footer, 3 Spalten)
Das zugehörige Markup ist beinahe selbsterklärend:
Head
Left Column
// more leftCols
Right Column
// more rightCols
Main Content
Foot
Mit den OOCSS-Klassen _page_, _head_, _foot_, _leftCol_, _rightCol_ und main lassen sich in kürzester Zeit Layouts erstellen, die bis und mit IE 5.5 abwärtskompatibel sind.
h4. Grid
Seitenspezifische Unterteilung in Lines und Units
Und das Markup? Et Voilà!
1/5
// repeat 3 times
1/5
1/5
1/5
Lines und Units können beliebig verschachtelt werden. So können auch komplexeste Grids mühelos erstellt werden. Lediglich bei den Units muss darauf geachtet werden, dass die Summe aller Breitenangaben nicht die umgebendende Line sprengt. Mit den von OOCSS mitgelieferten size-Klassen (size1of5, size3of5 etc.) wird dieses Problem durch prozentuale Breitenangaben umgangen. Bei eigenen Grids muss dieser Umstand jedoch berücksichtigt werden.
h4. Modules
Module sind in Terrific das zentrale Thema. Praktisch sämtliche Inhalte und Funktionalitäten stammen aus den Inhaltsmodulen.
Beispiel: Currency Converter
Um den Entwickler nicht einzuschränken, gibt OOCSS nur die Wrapper-Divs vor. Terrific erweitert das ganze noch durch eine modulspezifische Klasse (modCurrencyConverter), welche für die Kapselung des CSS und das Terrific JavaScript System benötigt wird.
Sämtliche CSS-Regeln werden mit der spezifischen Modulklasse prefixed. Die “Kaskade”:http://www.thestyleworks.de/basics/cascade.shtml von CSS übernimmt also quasi die “Objektorientierungs”-Rolle.
.modCurrencyConverter .bd {
background: #fff;
padding: 10px 10px 18px 10px;
}
...
h4. Skins
Skins bieten die Möglichkeit, das Aussehen von Modulen gezielt zu überschreiben. So können zum Beispiel mandantenfähige Systeme problemlos umgesetzt werden – ein Modulegrundstyle und ein Skin pro Mandant – ohne sämtlichen Code duplizieren zu müssen.
Der Skin erbt sämtliche Regeln des Moduls. Um den Hintergrund zu verändern, muss im Skin-CSS also lediglich die entsprechende Regel überschrieben werden:
.skinCurrencyConverterHighlighted .bd {
background: #aebbcb;
}
Skins sind auch nützlich, um “ähnliche” Inhalte in einem einzigen Modul zusammenzufassen. Die voneinander abweichenden Definitionen werden dabei in die Skins ausgelagert.
h3. Wie weiter?
Die HTML/CSS Problematik wird von OOCSS sauber gelöst. Das beschriebene “5-Komponenten-Prinzip”:http://blog.namics.com/2010/06/terrific-part1.html von Terrific unterstützt dabei die modularisierte Frontendentwicklung optimal.
Aber wie sieht es mit dem JavaScript Part aus? Mehr dazu im nächsten Terrific-Post!
h4. Weitere Terrific Informationen
Open Source Projekt: Terrific und TerrificJS
Terrific – Modulare Frontendentwicklung
Terrific und OOCSS
The Terrific Way Of JavaScript
Terrific im Projekprozess
Wenn ich Nicole Sullivan richtig verstanden habe, sollte die Basis nicht “a.base”, sondern nur “a” oder nur “.base” sein. Ich möchte sicher nicht zukünftig alle meine Links noch zusätzlich mit einer Klasse versehen müssen… ;)
Danke für den fundierten Beitrag Remo. Schön auch so tolle, konstruktive Kommentare und angeregte Diskussionen mit super Verbesserungsvorschlägen zu sehen.
@Martin:
Richtig, Nicole Sullivans OOCSS-Vorschlag sieht keine .base-Konvention vor.
Nicole Sullivan geht jedoch auch davon aus, dass das Aussehen von Elementen wie h2, h3, a etc. innerhalb eines Designs immer identisch ist und nur in seltenen Ausnahmefällen voneinander abweicht.
Aus diesem Blickwinkel betrachtet macht die .base-Konvention zugegebenermassen nur begrenzt Sinn, da fürs Resetten der CSS-Definitionen im entsprechenden “Ausnahme”-Modul relativ wenig Aufwand anfällt. Doch auch hier besteht die Gefahr, dass bei einer Änderung der Grunddefinition (z.B. h2) die entsprechende Reset-Anpassung im “Ausnahme”-Modul vergessen geht.
Analysiert man jedoch bestehende, anspruchsvolle Designs, so stellt man fest, dass unterschiedliche optische Ausprägungen von Elementen eher die Regel als die Ausnahme darstellen. Somit würde die Pflege der Reset-Rules definitiv mehr Aufwand erfordern als die Einhaltung der .base-Konvention und zudem das potentielle Fehlerrisiko drastisch erhöhen.
Deshalb haben wir uns nach intensiver Diskussion und mehreren alternativen Vorschlägen für die .base-Konvention entschieden. Eine retrospektive Analyse der ersten Terrific Projekte gibt uns dabei recht.