Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Marco Solazzi

March 27, 2015
Tweet

More Decks by Marco Solazzi

Other Decks in Programming

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