2. Ausgangslage(n)
• Seiten- und inhaltorientiertes Programmieren
• Programmierung von Inseln
• Vermischung von Struktur, Design und Inhalt
• „Es muss schnell gehen, also mache ich es (mir) einfach“
• „Kenn ich nicht, ess ich nicht!“
• Individueller Code-Stil macht unentbehrlich
2
2
3. Auswirkung(en)
• CSS Dateien wachsen linear mit neuen HTML-Inhalten
• Fehlende Flexibilität durch On-Top Prinzip
• Wiederverwendbarkeit von Quelltext ist nicht gegeben
• Hoher initialer Aufwand bei verteilter Pflege im Team
• Fragiler Code
• Keine Code Reviews möglich, ø Qualitätskontrolle
• Betriebswirtschaftliche Ineffizienz
3
3
4. Was wir wollen...
• Wenig Quelltext
• Robusten Quelltext
• Intuitiv begreifbarer Quelltext
• Überprüfbaren Quelltext
• Wiederverwendbaren Quelltext
• Skalierbaren Quelltext
• Semantik. Semantik. Ach ja. Sematik ;-)
4
4
10. Über OOCSS
• Projekt von Nicole Sullivan
• OOCSS == Objektorientiertes CSS
• Angelehnt an die Paradigmen der OO-Programmierung
• OOCSS !== OOP
• Framework zum Testen auf GitHub Projektseite
• Nutzt Infrastruktur der YUI Library (Grids, Reset Styles)
10
10
11. Was ist OOCSS?
OOCSS ist ein Konzeptansatz in der HTML/CSS
Programmierung und basiert auf dem Verständnis,
Seitenelemente als voneinander unabhängige
Einheiten zu verstehen.
Diese Einheiten werden in OOCSS als Objekte
bezeichnet.
11
11
20. Beispiel 1: Box (HTML)
<div class="mod">
<h3>Neue Gummibärchen</h3>
<p>Für die Schulklassen unter uns, gibt es
unsere Gummibärchen auch als Meterware.</p>
<ul class=“arrowlist>
<li>Garantiert geschmacklos</li>
<li>Direkt aus China</li>
</ul>
<p><a class=“btnStyle“ href="#">Jetzt
bestellen</a></p>
</div>
20
20
27. Ja, bitte...
• Stelle dir eine Bibliothek der wichtigsten Komponenten
zusammen. Tue dieses als ersten Schritt.
• Inhalt bedingt die Höhe, Strukturelemente die Breite
• Minimiere Selektoren
• Erweitere Module durch multiple Klassen
• Achte auch Wiederverwendung!
• Achte auch Konsistenz
27
27