Wie kann man in rapider, interdisziplinärer Arbeitsweise Web-Projekte mit wartbarem, modularem CSS bauen? Was können wir dafür aus bekannten Ansätzen und Best-Practices lernen und besser machen? Ein Versuch, einen "goldenen Mittelweg" zu finden.

1. LEARNING FROM
CSS BEST PRACTICES
FAILING

2. DAMALS

3. '95: WARUM CSS?
<otfc=CmcSn M"clr"ik>
fn ae"oi as S oo=pn"
Icnhzsahtio m <al>
a a pget n y tbe?

4. emehT/nikS = SSC /
SSC sni netrednaw nebraF/netfirhcS /
beilb tuoyaL-elbaT /
< cas"pget"Ucn/>
p ls=sahti> a<p
'99: WEIL'S BESSER GEHT

5. skooH sla sDI dnu nessalK ,sgaT
pukraM mov tnnerteg nikS dnu tuoyaL
snrecnoc fo noitarapeS
pukraM sehcsitnameS
tuoyaL r f hcuA
/
/
/
/
/
'01: CSS KANN MEHR

6. etlahnI ednerhekredeiw r f nessalK/sgaT
tuoyaL mi ehciereB nlespak sDI
pukraM seknalhcs ,sehcsitnameS
netaolf riw ,suar selbaT
?enoyna ,nedraG neZ SSC
/
/
/
/
/
BEST PRACTICE 2001

7. FUNKTIONIERT DOCH
HEUTE NOCH!
... BIS ES GRÖSSER WIRD

8. 2005
BIG SITES

9. nebielb se llos rabtraW
nies se llos uaneglexiP
tlahnI mehcildeihcsretnu tim ...
nepytnetieS eleiV
/
/
/
/
HERAUSFORDERUNGEN

10. rebuas tbielb pukraM
nedrew tnreftne thciel nenn k ehciereB etlA
na thcin etla nerh r ehciereB eueN
SSC mi rutkurtS eralK
git n eiw niemeglla os ,hcilg m eiw hcsifizeps oS
/
/
/
/
/
DEEP NESTING
LÖSUNG CA. 2004

11. sraW ytificepS
gnilytS setnetsisnoknI
edoC-SSC redneshcaw gitetS
gnilytS seuen nehcuarb netieS/eludoM eueN
gnilytS dnu pukraM nov gnulppoK egne etizilpmI
/
/
/
/
/
DEEP NESTING

12. 2010
ALLES DYNAMISCH

13. hcua llafressaW /
neznerG enies na tmmok SSC /
WEBAPPS KOMMEN
ALLES DYNAMISCH

14. esiewbierhcS-YRD hcrud rehcafnie gnitseN-peeD /
emelborpznetsisnoK nes l snixiM dnu nelbairaV /
SASS, LESS, STYLUS, ...
PREPROCESSORS

15. tiekmasthcanU ,tätixelpmoK
thcihcssnoitkartsbA
retiew tshcäw edoC-SSC
sngiseD nov neuabhcaN sefpmuts tredr F
→
/
/
/
/
PROBLEME
PREPROCESSORS

16. tnempoleveD dipaR tredr F
tnetsisnok tbielb ngiseD
nielk tbielb SSC
SSC seuen enho netieS eueN
raW ytificepS oN
gignähbanu-txetnoK
etkepsA & eludoM elbairav ,erabdnewrevredeiW
/
/
/
/
/
/
/
KOMBINIEREN VON KLASSEN
OOCSS

17. gireiwhcs .ltve ngiseD evisnopseR
trah gninutnieF thcaM
giraah driw nehcs l SSC
?negnukriwsuA negnurednÄ-SSC
)!gnudnifsnemaN( tediel kitnameS
lleH ssalC raW ytificepS
→
→
/
/
/
/
/
/
PROBLEME
OOCSS

18. BEM
OOCSS+ MIT NAMENSSCHEMA
.lc
bok
.lc_eeet
bok_lmne
.lc-mdfe
bok-oiir
)nikS/nenoitairaV(
)elietlezniE/tnetnoC(
)etnenopmoK/tuoyaL(
/
/
/

19. .om-opc_rw_utn-rmr-wf
fr-cmat_o_bto-piay-t
gireiwhcs tbielb gninutnieF /
nerh f pukraM megit nnu uz nnak /
PROBLEME
BEM

20. LESSONS LEARNED
PICK THE CHERRIES!

21. gnulppoK ekrats etizilpmI
taolB pukraM
tiekgignähbatxetnoK
lleH ssalC
sraW ytificepS
/
/
/
/
/
VERMEIDEN!

22. ?netiebra riw nellow eiW
edoC mi tiehralK
eludoM erabdnewrevredeiW
eliewegnaL enho ngiseD setnetsisnoK
SSC setkapmoK
pukraM sehcsitnames ,seknalhcS
/
/
/
/
/
WAS WIR WOLLEN

23. ehuR eniem bah hcI
dnawfuasgnummitsbA gineW
tiezstiebrA etednewhcsrev enieK
stnemtimmoC-erutaeF ,senildaeD eralK
edoC nnad ,lanif ngiseD
/
/
/
/
WASSERFALL

24. YEAH!!
WEIHNACHTSMANN?

26. essindnätsrevssiM etreiminiM
essinbegrE & negnudiehcstnE ellenhcS
tborprev thce ni ,needI eresseB
git n eiw leiv os pohsotohP
hcilg m eiw h rf os edoC
edoC & ngiseD .wz gnummitsbA egne ,egifuäH
/
/
/
/
/
/
RAPID

27. INTERGALACTO
DISCIPLINARY!!!
UNDE SCH... CODE

29. netiebrasua ,nreniefreV
dliB nie hcis tbigre hcan dnu hcan ...
neztesnemmasuz enietsogeL eiw eztäsnA
nethcueleb llareb nov melborP
/
/
/
/
DESIGNER WILL SPIELEN?

30. ne orG muz nenielK mov nnad ... /
nenieF muz neborG mov /
vitareti treinoitknuf ... /
DESIGN

31. netiebrasua ,nreniefreV
dliB nie hcis tbigre hcan dnu hcan ...
neztesnemmasuz enietsogeL eiw eztäsnA
nethcueleb llareb nov melborP
/
/
/
/
CODER WOLLEN KLARHEIT?

32. ne orG muz nenielK mov nnad ... /
nenieF muz neborG mov /
vitareti treinoitknuf ... /
CODEN

33. iterativ

34. GROB

35. fein

36. ken
li

37. GROSS

38. iterativ

39. GROB

40. fein

41. ken
li

42. GROSS

43. ATOMIC DESIGN

44. tuabegfua nelieT nerenielk sua tsi sellA /
ne orG muz nnad eheg ,nenielK mieb etratS /
relleizeps nnad edrew ,neniemegllA mieb etratS /
DESIGN-METHODE
ATOMIC DESIGN

45. smaeT neränilpizsidretni ni etiebrA
tnegilletni nerossezorpärP eztuN
)MEB ,SSCOO( rabdnewrevredeiw dnu lebixelf eludoM
)DA( lleizeps hcan niemeglla nov elytS
.4
.3
.2
.1
CHERRY PICKING!

46. #1 BASICS
ALLGEMEIN → SPEZIELL

47. tnemecalpeR egamI ,xifraelC ,kcolB-aideM SSCOO eiw eludoM-ateM ,sdirG ,skcaH ,sexiferP roneV
srav tednewrev ,ssel.snixim ehcsitsongA /
.cte sgnimiT ,netfirhcS ,ne rG ,nebrafdradnatS :ssel.srav /
HELFER VORBEREITEN

48. ssel.cisab red ni emotA
→
/
txet eilF-dradnatS r f .cte nellebaT ,netsiL ,skniL-dradnatS ,senildaeH
sisaB = tnetnoC /
git n sla rhem tut ssc.ezilamron /
tuo dnis steseR /
NORMALISIERE MIT STIL

49. ,
,
:nessal ehuR nI /
nessalK-enildaeH /
.1 .6
h
h
fr fede lbl
om ilst ae
yramirp-ntb. ,htrof-ntb. ,ntb.
,
, r f llesrevinu :snottuB /
nenn k nefual
rednaniesua rutaN-tnemelE dnu kitnameS elleusiv redo ... /
)
( tbig sgaT eniek se nnew ,nessalK /
a bto ipt
utn nu
.ek
wa
UNIVERSELLE MINI-OBJEKTE

50. ½ STYLEGUIDE
GRID, FARBEN, TYPOGRAFIE TUNEN

51. #2 MODULE
FLEXIBEL & WIEDERVERWENDBAR

52. nies tlethcahcseg rednanieni nenn K /
etkudorP ,eratnemmoK ,sbaT ,redilS ,xoB-rabediS ,resaeT /
tnetnoC nov nereirutkurtS muz reniatnoC /
MODUL

53. gnureinoitisoP etulosba edieM
netierB & neh H etsef edieM
eh H eid tmmitseb tnetnoC
nebegegrov ne ua nov etierB
/
/
/
/
FLEXIBEL

54. eludoM r f nemhaR
uzad seireuQ aideM ,nepytnetieS ,retooF/redaeH
tbielb znag se ssad ,leiv os edareG
eludoM r f txetnoK relaminiM
→
/
/
/
/
WIEDERVERWENDBAR

55. PROJEKT-BOOTSTRAP
80% AM ZIEL, 20% CODE!

56. #3 TUNING
MIT PRÄPROZESSOR-POWER

57. nereizifitnedi elläfrednoS r f ekc lB /
netlah gnireg tnemelE orp lhaznanessalK /
nednewrev txetnoK r f nessalK ehcsireneg eiN /
TUNING

58. uzad nlegeR-gninuT
nemannessalK netla red dnetxE/nixiM
nemannessalK-ludoM neuen reb epocS
ietaD-sseL + laitraP :ludoM seueN
/
/
/
/
TUNING ÜBER MIXINS & EXTENDS
PRÄPROZESSOREN

59. tätifizepS dnu txetnoK leiv uz thciN
nehcs l uz thciel nekcolrednoS
rerebuas driw pukraM
hcilthcisreb nebielb nlegeR ellesrevinU
/
/
/
/
WARUM?

60. BEST OF BOTH WORLDS
MODULAR UND FEINGETUNED

61. #4 TEAMWORK
INTERDISZIPLINÄRE ARBEITSWEISE

62. ediugelytS redneshcaw = ssel.srav :edoC /
dirG ,opyT ,tlewbraF ,sdooM :ngiseD /
VOM GROBEN ...

63. neuab/nereizifitnedi eludoM :ngiseD/edoC /
nenut etnemelednurG :edoC/ngiseD /
... UND KLEINEN

64. nenutnief nemmasuZ :edoC/ngiseD /
neppartstoob neludoM sua pytotorP :edoC /
ZUM GROSSEN ...

65. nenutnief nemmasuZ :edoC/ngiseD /
neuaB :edoC /
nereizifitnedi elläfrednoS :edoC/ngiseD /
... UND FEINEN

66. INTERGALACTO
DISCIPLINARY!!!
UND SCHÖNER CODE!
UND GEILE UX!!

67. teed
h n