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

Yes we CSS! Awesome workflows with PostCSS

Yes we CSS! Awesome workflows with PostCSS

Michele Mazzuco

September 27, 2016
Tweet

More Decks by Michele Mazzuco

Other Decks in Technology

Transcript

  1. YES WE CSS! Awesome workflows with PostCSS

  2. Michele Mazzucco Web/UI Designer Freelance @michelemazzucco

  3. Samuele Verzi Frontend dev @ MailUp @samu_ @samuv

  4. CSS?

  5. Preprocessors? CSS?

  6. CSS? Preprocessors? PostCSS?

  7. CSS preprocessor

  8. Why do we use preprocessors? • CSS templating (mix your

    code with styles) • Make your CSS dry • Save you time • CSS files more organised (indentation) • Vars, Mixins and functions
  9. Debugging and maintenance are harder Especially in large team situations

  10. Monolithic Lib sass
 110 files, 21 300 LOC of C++

    Stylus 72 files, 7 900 LOC Less 105 files, 9 800 LOC
  11. None
  12. What is PostCSS?

  13. “PostCSS is a tool for transforming style with JS plugins”

  14. Andrey Sitnik Author of PostCSS and Autoprefixer, lead frontend developer

    at @ EvilMartians.
  15. None
  16. https://goo.gl/NCmBVO Abstract syntax tree

  17. None
  18. +300 plugins from the community http://postcss.parts

  19. Why PostCSS?

  20. 2 000 000 downloads per month +2,000,000 Download per month

  21. PostCSS

  22. Performance 36ms 136ms 160ms 167ms 1084ms libsass Less Stylus Sass

    PostCSS
  23. None
  24. More readability .class-name { @include display-flex; @include flex-direction(row); @include flex-wrap(wrap);

    } .class-name { display: flex; flex-direction: row; flex-wrap: wrap; }
  25. More readability .class-name { @include display-flex; @include flex-direction(row); @include flex-wrap(wrap);

    } .class-name { display: flex; flex-direction: row; flex-wrap: wrap; }
  26. Scss files SASS 
 (libsass, compass, …) CSS for prod

  27. Scss files SASS 
 (libsass, compass, …) CSS for prod

    PostCSS
  28. None
  29. Modularity

  30. Autoprefixer .class-name { display: flex; } .class-name { display: -webkit-box;

    display: -webkit-flex; display: -ms-flexbox; display: flex; } http://autoprefixer.github.io/
  31. Autoprefixer .class-name { display: flex; } .class-name { display: -webkit-box;

    display: -webkit-flex; display: -ms-flexbox; display: flex; } http://autoprefixer.github.io/
  32. Autoprefixer autoprefixer({ browsers: [ 'last 2 versions’, 'IE 7’, ‘Firefox

    > 20’ ] }); http://caniuse.com/
  33. CSSnext :root { --fontSize: 1rem; --spacer: 20px; } h1 {

    font-size: calc(var(--fontSize) * 2); padding: var(--spacer) 0; } http://cssnext.io/playground/
  34. PreCSS $green: #699e0e; $blue: #0e6b9e; .footer__button { @if 3 <

    5 { background: $green; } @else { background: $blue; } }
  35. CSSnano @charset “utf-8”;h1:before{margin:10px 20px;color:red;border-radius:16px;font- weight:normal;background-position:100% 100%} • Removes outdated vendor

    prefixes • Converts color values to shorter equivalents • Removes duplicate rules • Rebases z-index values • Removes unused definitions • ….
  36. Stylint site/scss/base/_layout.scss 22:3 ⾠ Expected empty line before nested... [stylelint]

    29:5 ⾠ Expected empty line before nested... [stylelint] 33:5 ⾠ Expected empty line before nested... [stylelint] site/scss/base/_header.scss 12:7 ⾠ Expected empty line before nested... [stylelint] 22:3 ⾠ Expected empty line before nested... [stylelint]
  37. PostCSS ColorBlind

  38. Impossible with Sass and Less • CSSnext • Autoprefixer •

    PostCSS ColorBlind • CSS Modules • BEM linter • Do I use • and more…
  39. None
  40. Setting up PostCSS https://goo.gl/wsvUL7 Different branch with: • Gulp starter

    • Broccoli starter • Cli starter
  41. Write your own PostCSS plugin https://goo.gl/jK1gRN http://api.postcss.org/ API: Our example:

  42. Write your own PostCSS plugin https://goo.gl/skoP9N https://goo.gl/4zQLiu Guideline: Boilerplate:

  43. Any questions? Contact us! @michelemazzucco @samu_