Objektorientiertes CSS
               Einführung



                Barcamp Mainz 2009

                                  ...
Ausgangslage(n)
• Seiten- und inhaltorientiertes Programmieren
• Programmierung von Inseln
• Vermischung von Struktur, Des...
Auswirkung(en)
• CSS Dateien wachsen linear mit neuen HTML-Inhalten
• Fehlende Flexibilität durch On-Top Prinzip
• Wiederv...
Was wir wollen...
• Wenig Quelltext
• Robusten Quelltext
• Intuitiv begreifbarer Quelltext
• Überprüfbaren Quelltext
• Wie...
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-Programmie...
Was ist OOCSS?
OOCSS ist ein Konzeptansatz in der HTML/CSS
Programmierung und basiert auf dem Verständnis,
Seitenelemente ...
Begrifflichkeiten
• Inhaltliche Objekte
• Module
• Modul Skins
• Grids




                        12

                   ...
Komponenten




              13

                   13
Komponenten




              14

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



   ...
Legos




        16

             16
Zwei Grundprinzipien

1. Separiere Rahmenelemente und Inhalte

2. Separiere Struktur und Design




                      ...
1. Separiere Rahmenelemente und Inhalte




                                          18

                                ...
Beispiel 1: Box




                  19

                       19
Beispiel 1: Box (HTML)
<div class="mod">
  <h3>Neue Gummibärchen</h3>
  <p>Für die Schulklassen unter uns, gibt es
  unser...
Beispiel 1: Box (CSS)
/* Seitenübergreifende Deklarationen (Legos) */
h3 {color: white}
p {padding: 5px 0}
.btnStyle {...}...
2. Separiere Struktur und Design




                                   22

                                        22
Beispiel 2: Box




                  23

                       23
Box - Schichten




                  24

                       24
Beispiel 2: Box (HTML)
<div class="mod announce">
  <div class=“inner“>
    <h3>Neue Gummibärchen</h3>
    <p>...</p>
    ...
Beispiel 2: Box (CSS)
/* Basis Deklarationen (Inhalte) */ ...
/* Basis Modul */
.mod {background-color: transparent}


/* ...
Ja, bitte...
• Stelle dir eine Bibliothek der wichtigsten Komponenten
   zusammen. Tue dieses als ersten Schritt.
• Inhalt...
Nein, danke...
• div.klassenname Besser: .klassenname
• #modul h1
• #content #modul h1
• Vermeide Redundanz
• Vermeide Abh...
Informationen
• http://wiki.github.com/stubbornella/oocss (Projektseite)
• Videovortrag von Nicole Sullivan (Web Direction...
Olaf Gleba
• Web- und Software-Entwicklung
• Selbständig/freiberuflich tätig
• http://creatics.de
• og@creatics.de




   ...
Upcoming SlideShare
Loading in …5
×

OOCSS Session Barcamp Mainz 2009

2,552 views

Published on

Published in: Technology, Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,552
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
28
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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

×