Date post: | 01-Jul-2015 |
Category: |
Technology |
Upload: | veit-lehmann |
View: | 369 times |
Download: | 0 times |
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