OOCSS Session Barcamp Mainz 2009

2.588 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Bildung
1 Kommentar
2 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
2.588
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
32
Aktionen
Geteilt
0
Downloads
28
Kommentare
1
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

OOCSS Session Barcamp Mainz 2009

  1. 1. Objektorientiertes CSS Einführung Barcamp Mainz 2009 1
  2. 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. 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. 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. 5. Schlecht: Mir san mir... 5 5
  6. 6. Schon besser: Mir san viele... 6 6
  7. 7. Auch immer wieder gerne... 7 7
  8. 8. „Clevere“ Module... 8 8
  9. 9. Und nü? 9 9
  10. 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. 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. 12. Begrifflichkeiten • Inhaltliche Objekte • Module • Modul Skins • Grids 12 12
  13. 13. Komponenten 13 13
  14. 14. Komponenten 14 14
  15. 15. Legos lieben lernen • Überschriften • Listen • Absätze • Links • Module (Rahmenelemente) • Grids (Strukturelemente) 15 15
  16. 16. Legos 16 16
  17. 17. Zwei Grundprinzipien 1. Separiere Rahmenelemente und Inhalte 2. Separiere Struktur und Design 17 17
  18. 18. 1. Separiere Rahmenelemente und Inhalte 18 18
  19. 19. Beispiel 1: Box 19 19
  20. 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. 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. 22. 2. Separiere Struktur und Design 22 22
  23. 23. Beispiel 2: Box 23 23
  24. 24. Box - Schichten 24 24
  25. 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. 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. 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. 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. 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. 30. Olaf Gleba • Web- und Software-Entwicklung • Selbständig/freiberuflich tätig • http://creatics.de • og@creatics.de 30 30

×