Yes we CSS! Awesome workflows with PostCSS

Yes we CSS! Awesome workflows with PostCSS

782a82776fc2baace6d3bda3e23d1157?s=128

Michele Mazzuco

September 27, 2016
Tweet

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_