Yes we CSS! Awesome workflows with PostCSS

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
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.
16. https://goo.gl/NCmBVO Abstract syntax tree
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
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
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…
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_