CSS Workflow for Grown-ups

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.

D16df72790a8532b8e6999eb5ac0e3f7?s=128

Marco Solazzi

March 27, 2015
Tweet

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!