1. Objektorientiertes CSS
Einführung
Barcamp Mainz 2009
1

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

5. Schlecht: Mir san mir...
5
5

6. Schon besser: Mir san viele...
6
6

7. Auch immer wieder gerne...
7
7

8. „Clevere“ Module...
8
8

9. Und nü?
9
9

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

12. Begrifflichkeiten
• Inhaltliche Objekte
• Module
• Modul Skins
• Grids
12
12

13. Komponenten
13
13

14. Komponenten
14
14

15. Legos lieben lernen
• Überschriften
• Listen
• Absätze
• Links
• Module (Rahmenelemente)
• Grids (Strukturelemente)
15
15

16. Legos
16
16

17. Zwei Grundprinzipien
1. Separiere Rahmenelemente und Inhalte
2. Separiere Struktur und Design
17
17

18. 1. Separiere Rahmenelemente und Inhalte
18
18

19. Beispiel 1: Box
19
19

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

21. Beispiel 1: Box (CSS)
/* Seitenübergreifende Deklarationen (Legos) */
h3 {color: white}
p {padding: 5px 0}
.btnStyle {...}
.arrowlist {list-style-type: ...}
/* Basis Modul */
.mod {width: 25em; background-color: green;
padding: 5px}
21
21

22. 2. Separiere Struktur und Design
22
22

23. Beispiel 2: Box
23
23

24. Box - Schichten
24
24

25. Beispiel 2: Box (HTML)
<div class="mod announce">
<div class=“inner“>
<h3>Neue Gummibärchen</h3>
<p>...</p>
<ul class=“arrowlist>
<li>...</li>
</ul>
<p><a class=“btnStyle“ href="#">Jetzt
bestellen</a></p>
</div>
</div>
25
25

26. Beispiel 2: Box (CSS)
/* Basis Deklarationen (Inhalte) */ ...
/* Basis Modul */
.mod {background-color: transparent}
/* Erweiterung des Basis Modul */
.announce {width: 25em; padding: 5px; border:1px
solid #ebebeb; -moz-border-radius: 6px; ...}
/* Erweitertes Modul: Skins */
.announce .inner {background-color: green}
26
26

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

28. Nein, danke...
• div.klassenname Besser: .klassenname
• #modul h1
• #content #modul h1
• Vermeide Redundanz
• Vermeide Abhängigkeiten von Struktur, Design und Inhalt
• Vermeide Höhen-Angaben in inhaltlichen Deklarationen
28
28

29. Informationen
• http://wiki.github.com/stubbornella/oocss (Projektseite)
• Videovortrag von Nicole Sullivan (Web Direction North)
• Folien dieser Session auf Slideshare
• Webkrauts Artikel zu OOCSS
29
29

30. Olaf Gleba
• Web- und Software-Entwicklung
• Selbständig/freiberuflich tätig
• http://creatics.de
• og@creatics.de
30
30