CSS Workflow for Grown-ups

Spesso chi lavora in ambito front-end tende a sottovalutare l'importanza di un workflow di lavoro strutturato che copra la fase di progettazione, realizzazione e pacchettizzazione di un design CSS. Questo perché spesso passare qualche ora senza far codice sembra essere una perdita di tempo.

In questo talk esporrò un workflow, per certi versi opinionato, che spazia dalle tecniche di normalizzazione delle grafica e progettazione OOCSS fino alla scelta degli strumenti da adottare in fase di sviluppo e build (preprocessori, linters ecc); il tutto per garantire affidabilità e manutenibilità del codice senza perdere la salute e litigare con il grafico.

Transcript

1. CSS Workflow for Grown-ups Marco Solazzi - @dwightjack CSS Day 2015 - cssday.it
2. About me • Senior Front-end Developer @ AQuest • Co-founder Frontenders Verona
3. Disclaimer • This is kinda opinionated stuff • Something heard, something for grantend • Might (not) work on every project • Won’t save you from bad design(ers)
4. Frontend’s 4 Noble Truths 1. PSD 2 HTML is painful 2. From pixel pushing comes pain 3. Emancipate from PSD thinking 4. Embrace the path of frontend’s impermanence and decide in browser
5. The path to painless CSS 1. Modular planning 2. Limit complexity 3. Codebase predictability
6. Modular planning
7. Every design is an aggregation of discrete parts
8. Lots of schools
9. Battlefield Overview
10. Visual Design Analisys • Look for patterns → modules • Isolate containers → layouts
11. Visual Design Analysis
12. Visual Design Analysis
13. Visual Design Analysis
14. Visual Design Analysis
15. Visual Design Analysis
16. Visual Design Analysis
17. Achievements 1. Spot unique/discrete parts 2. See design complexity 3. Think before coding
18. No more PSD templates thinking!
19. Styleguide
20. Living Styleguide
21. /* ========================================================================== Media Object ==== ``` <div class="media"> <img src=//placehold.it/150x150 alt="" class="media__image"> <div class="media__wrap"> <h1 class="media__title">Media Title</h1> <p class="media__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> ``` ========================================================================== */
22. Choose your tool
23. Limit complexity
24. “He’s able to reproduce every bit of the PSD design. He is a great developer!” - random co-worker
25. “He’s able to reproduce every bit of the PSD design. He is a great developer!” - random co-worker # F A I L
26. “We’re delivering websites… and websites are built on code” - Harry Roberts
27. 12 font sizes 20 different spacings 50 shades of grey
28. Normalization Strategies 1. Statistical mode 2. Spacing Rationalization 3. Limit nerdy-rockstar-factor
29. - Wikipedia “The mode is the value that appears most often in a set of data.”
30. Statistical mode
31. Statistical mode $font-sizes: ( xl: 32px, l: 26px, m: 22px, s: 14px, xs: 11px ); @each $f-size, $f-px in $font-sizes { .u-type--#{$f-size} { font-size: $f-px; } }
32. Spacing and size unit should make sense
33. Rationalization #header { margin-bottom: 24px; } .media { margin-bottom: 22px; padding: 12px 16px 14px; } .panel { margin-bottom: 28px; }
34. Rationalization #header { margin-bottom: 24px; } .media { margin-bottom: 24px; padding: 12px 16px 14px; } .panel { margin-bottom: 24px; }
35. Rationalization $gutter-default: 24px; #header { margin-bottom: $gutter-default; } .media { margin-bottom: $gutter-default; padding: 12px 16px 14px; } .panel { margin-bottom: $gutter-default; }
36. Rationalization $gutter-default: 24px; #header { margin-bottom: $gutter-default; } .media { margin-bottom: $gutter-default; padding: $gutter-default / 2; } .panel { margin-bottom: $gutter-default; }
37. Bonus 1. Defines base units 2. Easier to remember 3. Increases UI consistency
38. What about? %gutter { margin-bottom: $gutter-default; } .media { @extend %gutter; padding: $gutter-default / 2; } .panel { @extend %gutter; }
39. %gutter { margin-bottom: $gutter-default; } .media { @extend %gutter; padding: $gutter-default / 2; } .panel { @extend %gutter; } What about? WORTH IT?
40. - Hugo Giraudel “Don’t do everything in Sass”
41. CSS Post-processors https://github.com/postcss/postcss
42. -webkit-transition: -webkit-transform 1s; transition: transform 1s background: resolve(‘logo.png’); -webkit-transition: -webkit-transform 1s; transition: transform 1s background: url(‘/assets/images/logo.png’); transition: transform 1s; background: resolve(‘logo.png’); background: url(‘/assets/images/logo.png’); -webkit-transition: -webkit-transform 1s; transition: transform 1s CSS post-processing
43. -webkit-transition: -webkit-transform 1s; transition: transform 1s background: resolve(‘logo.png’); -webkit-transition: -webkit-transform 1s; transition: transform 1s background: url(‘/assets/images/logo.png’); transition: transform 1s; background: resolve(‘logo.png’); background: url(‘/assets/images/logo.png’); -webkit-transition: -webkit-transform 1s; transition: transform 1s CSS post-processing LOOK MA! NO SASS!
44. Codebase Predictability
45. “The personal nature of coding style is a challenge in a team atmosphere.” - Nicholas C. Zakas
46. Codebase Affordance
47. “...the perceived and actual properties of the thing […] that determine just how the thing could be possibly be used. ” - Donald Norman
48. Findability
49. Style consistency
50. Style tools
51. #frontend { appearance: enlightened; }
52. @dwightjack https://github.com/dwightjack Thank you!