LEARNING FROM

CSS BEST PRACTICESFAILING

DAMALS

'95: WARUM CSS?<font face="Comic Sans MS" color="pink"> I can haz spaghetti on my <table>?

'99: WEIL'S BESSER GEHT<p class="spaghetti">U can</p>

Table-Layout bliebSchriften/Farben wanderten ins CSSCSS = Skin/Theme

///

'01: CSS KANN MEHRAuch f�r LayoutSemantisches MarkupSeparation of concernsLayout und Skin getrennt vom MarkupTags, Klassen und IDs als Hooks

/////

BEST PRACTICE 2001CSS Zen Garden, anyone?Tables raus, wir floatenSemantisches, schlankes MarkupIDs kapseln Bereiche im LayoutTags/Klassen f�r wiederkehrende Inhalte

/////

FUNKTIONIERT DOCHHEUTE NOCH!... BIS ES GRÖSSER WIRD

2005BIG SITES

HERAUSFORDERUNGENViele Seitentypen... mit unterschiedlichem InhaltPixelgenau soll es seinWartbar soll es bleiben

////

LÖSUNG CA. 2004DEEP NESTING

So spezifisch wie m�glich, so allgemein wie n�tigKlare Struktur im CSSNeue Bereiche r�hren alte nicht anAlte Bereiche k�nnen leicht entfernt werdenMarkup bleibt sauber

/////

DEEP NESTINGImplizite enge Kopplung von Markup und StylingNeue Module/Seiten brauchen neues StylingStetig wachsender CSS-CodeInkonsistentes StylingSpecifity Wars

/////

2010ALLES DYNAMISCH

ALLES DYNAMISCHWEBAPPS KOMMEN

CSS kommt an seine GrenzenWasserfall auch

//

PREPROCESSORSSASS, LESS, STYLUS, ...

Variablen und Mixins l�sen KonsistenzproblemeDeep-Nesting einfacher durch DRY-Schreibweise

//

PREPROCESSORSPROBLEME

F�rdert stumpfes Nachbauen von DesignsCSS-Code wächst weiterAbstraktionsschicht→ Komplexität, Unachtsamkeit

////

OOCSSKOMBINIEREN VON KLASSEN

Wiederverwendbare, variable Module & AspekteKontext-unabhängigNo Specifity WarNeue Seiten ohne neues CSSCSS bleibt kleinDesign bleibt konsistentF�rdert Rapid Development

///////

OOCSSPROBLEME

Specifity War → Class HellSemantik leidet (Namensfindung!)CSS-Änderungen → Auswirkungen?CSS l�schen wird haarigMacht Feintuning hartResponsive Design evtl. schwierig

//////

BEMOOCSS+ MIT NAMENSSCHEMA.block (Layout/Komponente).block__elemente (Content/Einzelteile).block--modifier (Variationen/Skin)

///

BEMPROBLEME

kann zu unn�tigem Markup f�hrenFeintuning bleibt schwierig

//.form--compact__row__button--primary--wtf

LESSONS LEARNEDPICK THE CHERRIES!

VERMEIDEN!Specifity WarsClass HellKontextabhängigkeitMarkup BloatImplizite starke Kopplung

/////

WAS WIR WOLLENSchlankes, semantisches MarkupKompaktes CSSKonsistentes Design ohne LangeweileWiederverwendbare ModuleKlarheit im Code

/////

Wie wollen wir arbeiten?

WASSERFALLDesign final, dann CodeKlare Deadlines, Feature-CommitmentsKeine verschwendete ArbeitszeitWenig Abstimmungsaufwand

////

Ich hab meine Ruhe

YEAH!!WEIHNACHTSMANN?

RAPIDHäufige, enge Abstimmung zw. Design & CodeCode so fr�h wie m�glichPhotoshop so viel wie n�tigBessere Ideen, in echt verprobtSchnelle Entscheidungen & ErgebnisseMinimierte Missverständnisse

//////

INTERGALACTODISCIPLINARY!!!

UNDE SCH... CODE

DESIGNER WILL SPIELEN?Problem von �berall beleuchtenAnsätze wie Legosteine zusammensetzen... nach und nach ergibt sich ein BildVerfeinern, ausarbeiten

////

DESIGN... funktioniert iterativvom Groben zum Feinen... dann vom Kleinen zum Gro�en

///

CODER WOLLEN KLARHEIT?Problem von �berall beleuchtenAnsätze wie Legosteine zusammensetzen... nach und nach ergibt sich ein BildVerfeinern, ausarbeiten

////

CODEN... funktioniert iterativvom Groben zum Feinen... dann vom Kleinen zum Gro�en

///

iterativ

GROB

fein

klein

GROSS

iterativ

GROB

fein

klein

GROSS

ATOMIC DESIGN

ATOMIC DESIGNDESIGN-METHODE

Starte beim Allgemeinen, werde dann speziellerStarte beim Kleinen, gehe dann zum Gro�enAlles ist aus kleineren Teilen aufgebaut

///

CHERRY PICKING!1. Style von allgemein nach speziell (AD)2. Module flexibel und wiederverwendbar (OOCSS, BEM)3. Nutze Präprozessoren intelligent4. Arbeite in interdisziplinären Teams

#1 BASICSALLGEMEIN → SPEZIELL

HELFER VORBEREITENvars.less: Standardfarben, Gr��en, Schriften, Timings etc.Agnostische mixins.less, verwendet varsVenor Prefixes, Hacks, Grids, Meta-Module wie OOCSS Media-Block, Clearfix, Image Replacement

//

NORMALISIERE MIT STILResets sind outnormalize.css tut mehr als n�tigContent = BasisHeadlines, Standard-Links, Listen, Tabellen etc. f�r Standard-Flie�text

→ Atome in der basic.less

///

/

UNIVERSELLE MINI-OBJEKTEKlassen, wenn es keine Tags gibt (.weak)... oder visuelle Semantik und Element-Natur auseinanderlaufen k�nnenButtons: universell f�r a, button, input.btn, .btn-forth, .btn-primary

Headline-Klassen .h1̀ .h6In Ruhe lassen: form, fieldset, label

//

/

//

½ STYLEGUIDEGRID, FARBEN, TYPOGRAFIE TUNEN

#2 MODULEFLEXIBEL & WIEDERVERWENDBAR

MODULContainer zum Strukturieren von ContentTeaser, Sidebar-Box, Slider, Tabs, Kommentare, ProdukteK�nnen ineinander geschachtelt sein

///

FLEXIBELBreite von au�en vorgegebenContent bestimmt die H�heMeide feste H�hen & BreitenMeide absolute Positionierung

////

WIEDERVERWENDBARMinimaler Kontext f�r ModuleGerade so viel, dass es ganz bleibtHeader/Footer, Seitentypen, Media Queries dazu→ Rahmen f�r Module

////

PROJEKT-BOOTSTRAP80% AM ZIEL, 20% CODE!

#3 TUNINGMIT PRÄPROZESSOR-POWER

TUNINGNie generische Klassen f�r Kontext verwendenKlassenanzahl pro Element gering haltenBl�cke f�r Sonderfälle identifizieren

///

PRÄPROZESSORENTUNING ÜBER MIXINS & EXTENDS

Neues Modul: Partial + Less-DateiScope �ber neuen Modul-KlassennamenMixin/Extend der alten KlassennamenTuning-Regeln dazu

////

WARUM?Universelle Regeln bleiben �bersichtlichMarkup wird saubererSonderlocken leicht zu l�schenNicht zu viel Kontext und Spezifität

////

BEST OF BOTH WORLDSMODULAR UND FEINGETUNED

#4 TEAMWORKINTERDISZIPLINÄRE ARBEITSWEISE

VOM GROBEN ...Design: Moods, Farbwelt, Typo, GridCode: vars.less = wachsender Styleguide

//

... UND KLEINENDesign/Code: Grundelemente tunenCode/Design: Module identifizieren/bauen

//

ZUM GROSSEN ...Code: Prototyp aus Modulen bootstrappenDesign/Code: Zusammen feintunen

//

... UND FEINENDesign/Code: Sonderfälle identifizierenCode: BauenDesign/Code: Zusammen feintunen

///

INTERGALACTODISCIPLINARY!!!

UND SCHÖNER CODE!UND GEILE UX!!

the end