Slides from BrewBox event - 27 September 2016

2. YES WE CSS!
Awesome workflows
with PostCSS

3. Michele Mazzucco
Web/UI Designer Freelance
@michelemazzucco

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

5. CSS?

6. Preprocessors?
CSS?

7. CSS?
Preprocessors?
PostCSS?

8. CSS preprocessor

9. 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

10. Debugging and
maintenance are harder
Especially in large team situations

11. Monolithic
Lib sass
110 files, 21 300 LOC of C++
Stylus
72 files, 7 900 LOC
Less
105 files, 9 800 LOC

13. What is
PostCSS?

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

15. Andrey Sitnik
Author of PostCSS and Autoprefixer,
lead frontend developer at @ EvilMartians.

17. https://goo.gl/NCmBVO
Abstract syntax tree

19. +300 plugins
from the community
http://postcss.parts

20. Why
PostCSS?

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

22. PostCSS

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

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. 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;
}

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

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

30. Modularity

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
.class-name {
display: flex;
}
.class-name {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
http://autoprefixer.github.io/

33. Autoprefixer
autoprefixer({
browsers: [
'last 2 versions’,
'IE 7’,
‘Firefox > 20’
]
});
http://caniuse.com/

34. CSSnext
:root {
--fontSize: 1rem;
--spacer: 20px;
}
h1 {
font-size: calc(var(--fontSize) * 2);
padding: var(--spacer) 0;
}
http://cssnext.io/playground/

35. PreCSS
$green: #699e0e;
$blue: #0e6b9e;
.footer__button {
@if 3 < 5 {
background: $green;
}
@else {
background: $blue;
}
}

36. 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
• ….

37. 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]

38. PostCSS ColorBlind

39. Impossible with
Sass and Less
• CSSnext
• Autoprefixer
• PostCSS ColorBlind
• CSS Modules
• BEM linter
• Do I use
• and more…

41. Setting up PostCSS
https://goo.gl/wsvUL7
Different branch with:
• Gulp starter
• Broccoli starter
• Cli starter

42. Write your own
PostCSS plugin
https://goo.gl/jK1gRN
http://api.postcss.org/
API:
Our example:

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

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