OOCSS Session Barcamp Mainz 2009

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

OOCSS Session Barcamp Mainz 2009

by ogleba on Nov 29, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 30

Statistics

OOCSS Session Barcamp Mainz 2009 — Presentation Transcript

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