(learning from) CSS Best Practices (failing)
-
Upload
veit-lehmann -
Category
Technology
-
view
370 -
download
0
description
Transcript of (learning from) CSS Best Practices (failing)
![Page 1: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/1.jpg)
LEARNING FROM
CSS BEST PRACTICESFAILING
![Page 2: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/2.jpg)
DAMALS
![Page 3: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/3.jpg)
'95: WARUM CSS?<font face="Comic Sans MS" color="pink"> I can haz spaghetti on my <table>?
![Page 4: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/4.jpg)
'99: WEIL'S BESSER GEHT<p class="spaghetti">U can</p>
Table-Layout bliebSchriften/Farben wanderten ins CSSCSS = Skin/Theme
///
![Page 5: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/5.jpg)
'01: CSS KANN MEHRAuch f�r LayoutSemantisches MarkupSeparation of concernsLayout und Skin getrennt vom MarkupTags, Klassen und IDs als Hooks
/////
![Page 6: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/6.jpg)
BEST PRACTICE 2001CSS Zen Garden, anyone?Tables raus, wir floatenSemantisches, schlankes MarkupIDs kapseln Bereiche im LayoutTags/Klassen f�r wiederkehrende Inhalte
/////
![Page 7: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/7.jpg)
FUNKTIONIERT DOCHHEUTE NOCH!... BIS ES GRÖSSER WIRD
![Page 8: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/8.jpg)
2005BIG SITES
![Page 9: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/9.jpg)
HERAUSFORDERUNGENViele Seitentypen... mit unterschiedlichem InhaltPixelgenau soll es seinWartbar soll es bleiben
////
![Page 10: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/10.jpg)
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
/////
![Page 11: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/11.jpg)
DEEP NESTINGImplizite enge Kopplung von Markup und StylingNeue Module/Seiten brauchen neues StylingStetig wachsender CSS-CodeInkonsistentes StylingSpecifity Wars
/////
![Page 12: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/12.jpg)
2010ALLES DYNAMISCH
![Page 13: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/13.jpg)
ALLES DYNAMISCHWEBAPPS KOMMEN
CSS kommt an seine GrenzenWasserfall auch
//
![Page 14: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/14.jpg)
PREPROCESSORSSASS, LESS, STYLUS, ...
Variablen und Mixins l�sen KonsistenzproblemeDeep-Nesting einfacher durch DRY-Schreibweise
//
![Page 15: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/15.jpg)
PREPROCESSORSPROBLEME
F�rdert stumpfes Nachbauen von DesignsCSS-Code wächst weiterAbstraktionsschicht→ Komplexität, Unachtsamkeit
////
![Page 16: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/16.jpg)
OOCSSKOMBINIEREN VON KLASSEN
Wiederverwendbare, variable Module & AspekteKontext-unabhängigNo Specifity WarNeue Seiten ohne neues CSSCSS bleibt kleinDesign bleibt konsistentF�rdert Rapid Development
///////
![Page 17: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/17.jpg)
OOCSSPROBLEME
Specifity War → Class HellSemantik leidet (Namensfindung!)CSS-Änderungen → Auswirkungen?CSS l�schen wird haarigMacht Feintuning hartResponsive Design evtl. schwierig
//////
![Page 18: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/18.jpg)
BEMOOCSS+ MIT NAMENSSCHEMA.block (Layout/Komponente).block__elemente (Content/Einzelteile).block--modifier (Variationen/Skin)
///
![Page 19: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/19.jpg)
BEMPROBLEME
kann zu unn�tigem Markup f�hrenFeintuning bleibt schwierig
//.form--compact__row__button--primary--wtf
![Page 20: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/20.jpg)
LESSONS LEARNEDPICK THE CHERRIES!
![Page 21: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/21.jpg)
VERMEIDEN!Specifity WarsClass HellKontextabhängigkeitMarkup BloatImplizite starke Kopplung
/////
![Page 22: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/22.jpg)
WAS WIR WOLLENSchlankes, semantisches MarkupKompaktes CSSKonsistentes Design ohne LangeweileWiederverwendbare ModuleKlarheit im Code
/////
Wie wollen wir arbeiten?
![Page 23: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/23.jpg)
WASSERFALLDesign final, dann CodeKlare Deadlines, Feature-CommitmentsKeine verschwendete ArbeitszeitWenig Abstimmungsaufwand
////
Ich hab meine Ruhe
![Page 24: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/24.jpg)
YEAH!!WEIHNACHTSMANN?
![Page 25: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/25.jpg)
![Page 26: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/26.jpg)
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
//////
![Page 27: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/27.jpg)
INTERGALACTODISCIPLINARY!!!
UNDE SCH... CODE
![Page 28: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/28.jpg)
![Page 29: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/29.jpg)
DESIGNER WILL SPIELEN?Problem von �berall beleuchtenAnsätze wie Legosteine zusammensetzen... nach und nach ergibt sich ein BildVerfeinern, ausarbeiten
////
![Page 30: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/30.jpg)
DESIGN... funktioniert iterativvom Groben zum Feinen... dann vom Kleinen zum Gro�en
///
![Page 31: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/31.jpg)
CODER WOLLEN KLARHEIT?Problem von �berall beleuchtenAnsätze wie Legosteine zusammensetzen... nach und nach ergibt sich ein BildVerfeinern, ausarbeiten
////
![Page 32: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/32.jpg)
CODEN... funktioniert iterativvom Groben zum Feinen... dann vom Kleinen zum Gro�en
///
![Page 33: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/33.jpg)
iterativ
![Page 34: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/34.jpg)
GROB
![Page 35: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/35.jpg)
fein
![Page 36: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/36.jpg)
klein
![Page 37: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/37.jpg)
GROSS
![Page 38: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/38.jpg)
iterativ
![Page 39: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/39.jpg)
GROB
![Page 40: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/40.jpg)
fein
![Page 41: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/41.jpg)
klein
![Page 42: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/42.jpg)
GROSS
![Page 43: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/43.jpg)
ATOMIC DESIGN
![Page 44: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/44.jpg)
ATOMIC DESIGNDESIGN-METHODE
Starte beim Allgemeinen, werde dann speziellerStarte beim Kleinen, gehe dann zum Gro�enAlles ist aus kleineren Teilen aufgebaut
///
![Page 45: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/45.jpg)
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
![Page 46: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/46.jpg)
#1 BASICSALLGEMEIN → SPEZIELL
![Page 47: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/47.jpg)
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
//
![Page 48: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/48.jpg)
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
///
/
![Page 49: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/49.jpg)
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
//
/
//
![Page 50: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/50.jpg)
½ STYLEGUIDEGRID, FARBEN, TYPOGRAFIE TUNEN
![Page 51: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/51.jpg)
#2 MODULEFLEXIBEL & WIEDERVERWENDBAR
![Page 52: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/52.jpg)
MODULContainer zum Strukturieren von ContentTeaser, Sidebar-Box, Slider, Tabs, Kommentare, ProdukteK�nnen ineinander geschachtelt sein
///
![Page 53: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/53.jpg)
FLEXIBELBreite von au�en vorgegebenContent bestimmt die H�heMeide feste H�hen & BreitenMeide absolute Positionierung
////
![Page 54: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/54.jpg)
WIEDERVERWENDBARMinimaler Kontext f�r ModuleGerade so viel, dass es ganz bleibtHeader/Footer, Seitentypen, Media Queries dazu→ Rahmen f�r Module
////
![Page 55: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/55.jpg)
PROJEKT-BOOTSTRAP80% AM ZIEL, 20% CODE!
![Page 56: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/56.jpg)
#3 TUNINGMIT PRÄPROZESSOR-POWER
![Page 57: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/57.jpg)
TUNINGNie generische Klassen f�r Kontext verwendenKlassenanzahl pro Element gering haltenBl�cke f�r Sonderfälle identifizieren
///
![Page 58: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/58.jpg)
PRÄPROZESSORENTUNING ÜBER MIXINS & EXTENDS
Neues Modul: Partial + Less-DateiScope �ber neuen Modul-KlassennamenMixin/Extend der alten KlassennamenTuning-Regeln dazu
////
![Page 59: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/59.jpg)
WARUM?Universelle Regeln bleiben �bersichtlichMarkup wird saubererSonderlocken leicht zu l�schenNicht zu viel Kontext und Spezifität
////
![Page 60: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/60.jpg)
BEST OF BOTH WORLDSMODULAR UND FEINGETUNED
![Page 61: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/61.jpg)
#4 TEAMWORKINTERDISZIPLINÄRE ARBEITSWEISE
![Page 62: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/62.jpg)
VOM GROBEN ...Design: Moods, Farbwelt, Typo, GridCode: vars.less = wachsender Styleguide
//
![Page 63: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/63.jpg)
... UND KLEINENDesign/Code: Grundelemente tunenCode/Design: Module identifizieren/bauen
//
![Page 64: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/64.jpg)
ZUM GROSSEN ...Code: Prototyp aus Modulen bootstrappenDesign/Code: Zusammen feintunen
//
![Page 65: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/65.jpg)
... UND FEINENDesign/Code: Sonderfälle identifizierenCode: BauenDesign/Code: Zusammen feintunen
///
![Page 66: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/66.jpg)
INTERGALACTODISCIPLINARY!!!
UND SCHÖNER CODE!UND GEILE UX!!
![Page 67: (learning from) CSS Best Practices (failing)](https://reader033.fdocuments.in/reader033/viewer/2022042816/559371141a28abf7758b4666/html5/thumbnails/67.jpg)
the end