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
   

   View Slide

2. About me
   ● Senior Front-end Developer @ AQuest
   ● Co-founder Frontenders Verona
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

5. The path to painless CSS
   1. Modular planning
   2. Limit complexity
   3. Codebase predictability
   

   View Slide

6. Modular
   planning
   

   View Slide

7. Every design is an
   aggregation of discrete parts
   

   View Slide

8. Lots of schools
   

   View Slide

9. Battlefield Overview
   

   View Slide

10. Visual Design Analisys
    ● Look for patterns → modules
    ● Isolate containers → layouts
    

    View Slide

11. Visual Design Analysis
    

    View Slide

12. Visual Design Analysis
    

    View Slide

13. Visual Design Analysis
    

    View Slide

14. Visual Design Analysis
    

    View Slide

15. Visual Design Analysis
    

    View Slide

16. Visual Design Analysis
    

    View Slide

17. Achievements
    1. Spot unique/discrete parts
    2. See design complexity
    3. Think before coding
    

    View Slide

18. No more
    PSD templates thinking!
    

    View Slide

19. Styleguide
    

    View Slide

20. Living Styleguide
    

    View Slide

21. /* ==========================================================================
    Media Object
    ====
    ```
    
    
    
    Media Title
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    
    
    ```
    ========================================================================== */
    

    View Slide

22. Choose your tool
    

    View Slide

23. Limit
    complexity
    

    View Slide

24. “He’s able to reproduce every bit of
    the PSD design.
    He is a great developer!”
    - random co-worker
    

    View Slide

25. “He’s able to reproduce every bit of
    the PSD design.
    He is a great developer!”
    - random co-worker
    # F A I L
    

    View Slide

26. “We’re delivering websites… and
    websites are built on code”
    - Harry Roberts
    

    View Slide

27. 12 font sizes
    20 different spacings
    50 shades of grey
    

    View Slide

28. Normalization Strategies
    1. Statistical mode
    2. Spacing Rationalization
    3. Limit nerdy-rockstar-factor
    

    View Slide

29. - Wikipedia
    “The mode is the value that appears
    most often in a set of data.”
    

    View Slide

30. Statistical mode
    

    View Slide

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;
    }
    }
    

    View Slide

32. Spacing and size unit should
    make sense
    

    View Slide

33. Rationalization
    #header {
    margin-bottom: 24px;
    }
    .media {
    margin-bottom: 22px;
    padding: 12px 16px 14px;
    }
    .panel {
    margin-bottom: 28px;
    }
    

    View Slide

34. Rationalization
    #header {
    margin-bottom: 24px;
    }
    .media {
    margin-bottom: 24px;
    padding: 12px 16px 14px;
    }
    .panel {
    margin-bottom: 24px;
    }
    

    View Slide

35. Rationalization
    $gutter-default: 24px;
    #header {
    margin-bottom: $gutter-default;
    }
    .media {
    margin-bottom: $gutter-default;
    padding: 12px 16px 14px;
    }
    .panel {
    margin-bottom: $gutter-default;
    }
    

    View Slide

36. Rationalization
    $gutter-default: 24px;
    #header {
    margin-bottom: $gutter-default;
    }
    .media {
    margin-bottom: $gutter-default;
    padding: $gutter-default / 2;
    }
    .panel {
    margin-bottom: $gutter-default;
    }
    

    View Slide

37. Bonus
    1. Defines base units
    2. Easier to remember
    3. Increases UI consistency
    

    View Slide

38. What about?
    %gutter {
    margin-bottom: $gutter-default;
    }
    .media {
    @extend %gutter;
    padding: $gutter-default / 2;
    }
    .panel {
    @extend %gutter;
    }
    

    View Slide

39. %gutter {
    margin-bottom: $gutter-default;
    }
    .media {
    @extend %gutter;
    padding: $gutter-default / 2;
    }
    .panel {
    @extend %gutter;
    }
    What about?
    WORTH IT?
    

    View Slide

40. - Hugo Giraudel
    “Don’t do everything in Sass”
    

    View Slide

41. CSS Post-processors
    https://github.com/postcss/postcss
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

44. Codebase
    Predictability
    

    View Slide

45. “The personal nature of coding style is a
    challenge in a team atmosphere.”
    - Nicholas C. Zakas
    

    View Slide

46. Codebase Affordance
    

    View Slide

47. “...the perceived and actual properties of
    the thing […] that determine just how the
    thing could be possibly be used. ”
    - Donald Norman
    

    View Slide

48. Findability
    

    View Slide

49. Style consistency
    

    View Slide

50. Style tools
    

    View Slide

51. #frontend {
    appearance: enlightened;
    }
    

    View Slide

52. @dwightjack
    https://github.com/dwightjack
    Thank you!
    

    View Slide