OOCSS Session Barcamp Mainz 2009

download OOCSS Session Barcamp Mainz 2009

of 30

  • date post

    05-Dec-2014
  • Category

    Technology

  • view

    3.577
  • download

    3

Embed Size (px)

description

 

Transcript of OOCSS Session Barcamp Mainz 2009

  • 1. Objektorientiertes CSS Einfhrung 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 Flexibilitt durch On-Top Prinzip Wiederverwendbarkeit von Quelltext ist nicht gegeben Hoher initialer Aufwand bei verteilter Pflege im Team Fragiler Code Keine Code Reviews mglich, Qualittskontrolle Betriebswirtschaftliche Ineffizienz 3 3
  • 4. Was wir wollen... Wenig Quelltext Robusten Quelltext Intuitiv begreifbarer Quelltext berprfbaren 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 Verstndnis, Seitenelemente als voneinander unabhngige 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 Abstze 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)
    Neue Gummibrchen

    Fr die Schulklassen unter uns, gibt es unsere Gummibrchen auch als Meterware.

    • Garantiert geschmacklos
    • Direkt aus China

    Jetzt bestellen

    20 20
  • 21. Beispiel 1: Box (CSS) /* Seitenbergreifende 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)
    Neue Gummibrchen

    ...

    • ...

    Jetzt bestellen

    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 Hhe, 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 Abhngigkeiten von Struktur, Design und Inhalt Vermeide Hhen-Angaben in inhaltlichen Deklarationen 28 28
  • 29.