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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  6. Modular
    planning

    View full-size slide

  7. Every design is an
    aggregation of discrete parts

    View full-size slide

  8. Lots of schools

    View full-size slide

  9. Battlefield Overview

    View full-size slide

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

    View full-size slide

  11. Visual Design Analysis

    View full-size slide

  12. Visual Design Analysis

    View full-size slide

  13. Visual Design Analysis

    View full-size slide

  14. Visual Design Analysis

    View full-size slide

  15. Visual Design Analysis

    View full-size slide

  16. Visual Design Analysis

    View full-size slide

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

    View full-size slide

  18. No more
    PSD templates thinking!

    View full-size slide

  19. Living Styleguide

    View full-size slide

  20. /* ==========================================================================
    Media Object
    ====
    ```



    Media Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



    ```
    ========================================================================== */

    View full-size slide

  21. Choose your tool

    View full-size slide

  22. Limit
    complexity

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. Statistical mode

    View full-size slide

  30. 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 full-size slide

  31. Spacing and size unit should
    make sense

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. -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 full-size 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
    LOOK MA! NO SASS!

    View full-size slide

  43. Codebase
    Predictability

    View full-size slide

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

    View full-size slide

  45. Codebase Affordance

    View full-size slide

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

    View full-size slide

  47. Style consistency

    View full-size slide

  48. #frontend {
    appearance: enlightened;
    }

    View full-size slide

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

    View full-size slide