SlideShare ist ein Scribd-Unternehmen logo
1 von 30
Downloaden Sie, um offline zu lesen
Objektorientiertes CSS
               Einführung



                Barcamp Mainz 2009

                                     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
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
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
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
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
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>
    <ul class=“arrowlist>
         <li>...</li>
    </ul>
    <p><a class=“btnStyle“ href="#">Jetzt
bestellen</a></p>
  </div>
</div>
                                            25

                                                 25
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
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
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
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
• og@creatics.de




                                    30

                                         30

Weitere ähnliche Inhalte

Ähnlich wie OOCSS Session Barcamp Mainz 2009

CSS Seminar
CSS SeminarCSS Seminar
CSS Seminar
tutego
 

Ähnlich wie OOCSS Session Barcamp Mainz 2009 (20)

Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
Schau, Mutti, keine Programmierzeile
Schau, Mutti, keine ProgrammierzeileSchau, Mutti, keine Programmierzeile
Schau, Mutti, keine Programmierzeile
 
Pattern Libraries als Schnittstelle zwischen Design & Development
Pattern Libraries als Schnittstelle zwischen Design & DevelopmentPattern Libraries als Schnittstelle zwischen Design & Development
Pattern Libraries als Schnittstelle zwischen Design & Development
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
201903 seo campixx ur ls komprimieren - slideshare
201903 seo campixx   ur ls komprimieren - slideshare201903 seo campixx   ur ls komprimieren - slideshare
201903 seo campixx ur ls komprimieren - slideshare
 
Softwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightSoftwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha Night
 
Webinar - Entwurfsmuster in ABAP
Webinar - Entwurfsmuster in ABAPWebinar - Entwurfsmuster in ABAP
Webinar - Entwurfsmuster in ABAP
 
Backend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best PracticesBackend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best Practices
 
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AGCCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
 
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Design Principles and Patterns (German)
Design Principles and Patterns (German)Design Principles and Patterns (German)
Design Principles and Patterns (German)
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und Pflege
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
TCCE-Vorbereitung T3CRR23
TCCE-Vorbereitung T3CRR23TCCE-Vorbereitung T3CRR23
TCCE-Vorbereitung T3CRR23
 
CSS Seminar
CSS SeminarCSS Seminar
CSS Seminar
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
 
Einstieg in relationale Datenbanken mit MySQL (Handout)
Einstieg in relationale Datenbanken mit MySQL (Handout)Einstieg in relationale Datenbanken mit MySQL (Handout)
Einstieg in relationale Datenbanken mit MySQL (Handout)
 
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 

OOCSS Session Barcamp Mainz 2009

  • 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
  • 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
  • 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
  • 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