OOCSS Session Barcamp Mainz 2009
-
Upload
ogleba -
Category
Technology
-
view
3.585 -
download
3
description
Transcript of OOCSS Session Barcamp Mainz 2009
Barcamp Mainz 2009
EinführungObjektorientiertes CSS
1
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
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
Was wir wollen...
• Wenig Quelltext
• Robusten Quelltext
• Intuitiv begreifbarer Quelltext
• Überprüfbaren Quelltext
• Wiederverwendbaren Quelltext
• Skalierbaren Quelltext
• Semantik. Semantik. Ach ja. Sematik ;-)
4
4
Schlecht: Mir san mir...
5
5
Schon besser: Mir san viele...
6
6
Auch immer wieder gerne...
7
7
„Clevere“ Module...
8
8
Und nü?
9
9
Ü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
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.
Was ist OOCSS?
11
11
Begrifflichkeiten
• Inhaltliche Objekte
• Module
• Modul Skins
• Grids
12
12
Komponenten
13
13
Komponenten
14
14
Legos lieben lernen
• Überschriften
• Listen
• Absätze
• Links
• Module (Rahmenelemente)
• Grids (Strukturelemente)
15
15
Legos
16
16
Zwei Grundprinzipien
1. Separiere Rahmenelemente und Inhalte
2. Separiere Struktur und Design
17
17
1. Separiere Rahmenelemente und Inhalte
18
18
Beispiel 1: Box
19
19
<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>
Beispiel 1: Box (HTML)
20
20
/* 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}
Beispiel 1: Box (CSS)
21
21
2. Separiere Struktur und Design
22
22
Beispiel 2: Box
23
23
Box - Schichten
24
24
<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>
Beispiel 2: Box (HTML)
25
25
/* 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}
Beispiel 2: Box (CSS)
26
26
Ja, bitte...
27
• 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
Nein, danke...
28
• 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
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
Olaf Gleba
• Web- und Software-Entwicklung
• Selbständig/freiberuflich tätig
• http://creatics.de
30
30