OOCSS Session Barcamp Mainz 2009
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,558
On Slideshare
3,528
From Embeds
30
Number of Embeds
2

Actions

Shares
Downloads
27
Comments
1
Likes
2

Embeds 30

http://creatics.de 26
http://www.slideshare.net 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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