Download - OOCSS Session Barcamp Mainz 2009

Transcript
Page 1: OOCSS Session Barcamp Mainz 2009

Barcamp Mainz 2009

EinführungObjektorientiertes CSS

1

Page 2: OOCSS Session Barcamp Mainz 2009

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

Page 3: OOCSS Session Barcamp Mainz 2009

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

Page 4: OOCSS Session Barcamp Mainz 2009

Was wir wollen...

• Wenig Quelltext

• Robusten Quelltext

• Intuitiv begreifbarer Quelltext

• Überprüfbaren Quelltext

• Wiederverwendbaren Quelltext

• Skalierbaren Quelltext

• Semantik. Semantik. Ach ja. Sematik ;-)

4

4

Page 5: OOCSS Session Barcamp Mainz 2009

Schlecht: Mir san mir...

5

5

Page 6: OOCSS Session Barcamp Mainz 2009

Schon besser: Mir san viele...

6

6

Page 7: OOCSS Session Barcamp Mainz 2009

Auch immer wieder gerne...

7

7

Page 8: OOCSS Session Barcamp Mainz 2009

„Clevere“ Module...

8

8

Page 9: OOCSS Session Barcamp Mainz 2009

Und nü?

9

9

Page 10: OOCSS Session Barcamp Mainz 2009

Ü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

Page 11: OOCSS Session Barcamp Mainz 2009

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.

Was ist OOCSS?

11

11

Page 12: OOCSS Session Barcamp Mainz 2009

Begrifflichkeiten

• Inhaltliche Objekte

• Module

• Modul Skins

• Grids

12

12

Page 13: OOCSS Session Barcamp Mainz 2009

Komponenten

13

13

Page 14: OOCSS Session Barcamp Mainz 2009

Komponenten

14

14

Page 15: OOCSS Session Barcamp Mainz 2009

Legos lieben lernen

• Überschriften

• Listen

• Absätze

• Links

• Module (Rahmenelemente)

• Grids (Strukturelemente)

15

15

Page 16: OOCSS Session Barcamp Mainz 2009

Legos

16

16

Page 17: OOCSS Session Barcamp Mainz 2009

Zwei Grundprinzipien

1. Separiere Rahmenelemente und Inhalte

2. Separiere Struktur und Design

17

17

Page 18: OOCSS Session Barcamp Mainz 2009

1. Separiere Rahmenelemente und Inhalte

18

18

Page 19: OOCSS Session Barcamp Mainz 2009

Beispiel 1: Box

19

19

Page 20: OOCSS Session Barcamp Mainz 2009

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

Beispiel 1: Box (HTML)

20

20

Page 21: OOCSS Session Barcamp Mainz 2009

/* 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}

Beispiel 1: Box (CSS)

21

21

Page 22: OOCSS Session Barcamp Mainz 2009

2. Separiere Struktur und Design

22

22

Page 23: OOCSS Session Barcamp Mainz 2009

Beispiel 2: Box

23

23

Page 24: OOCSS Session Barcamp Mainz 2009

Box - Schichten

24

24

Page 25: OOCSS Session Barcamp Mainz 2009

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

Beispiel 2: Box (HTML)

25

25

Page 26: OOCSS Session Barcamp Mainz 2009

/* 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}

Beispiel 2: Box (CSS)

26

26

Page 27: OOCSS Session Barcamp Mainz 2009

Ja, bitte...

27

• 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

Page 28: OOCSS Session Barcamp Mainz 2009

Nein, danke...

28

• 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

Page 30: OOCSS Session Barcamp Mainz 2009

Olaf Gleba

• Web- und Software-Entwicklung

• Selbständig/freiberuflich tätig

• http://creatics.de

[email protected]

30

30