Modular CSS Features with PostCSS

Since the release of CSS 2.1 in 2011, the W3C has used a modular approach for the development of new features, allowing for more immediate and incremental improvements to CSS.

PostCSS allows us to take the same modular approach to adding and managing new CSS specs — and even non-spec "super powers" — without having to worry about preprocessor specific syntax.

In this talk, we'll discuss...
* CSS releases through the years
* modularized specification
* vendor prefixes, mixin libraries and CSS preprocessors
* PostCSS - what it is and how it works
* specific PostCSS plugins in combination with (or in place of) Sass
* getting started with PostCSS today

Transcript

1. MODULAR CSS FEATURES WITH PostCSS
2. how did we get here?
3. 1998 2000 2002 2004 2006 2008 2010 CSS 1.0 1996 released 1997 1999 2001 2003 2005 2007 2009 2011 1.0
4. 1998 2000 2002 2004 2006 2008 2010 CSS 2.0 1996 released 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0
5. 1998 2000 2002 2004 2006 2008 2010 CSS 3 1996 work began 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0
6. 1998 2000 2002 2004 2006 2008 2010 CSS 2.1 1996 candidate recommendation > working draft > release 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0
7. 1998 2000 2002 2004 2006 2008 2010 CSS 2.1 1996 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0 candidate recommendation > working draft > release
8. 1998 2000 2002 2004 2006 2008 2010 CSS 2.1 1996 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0 candidate recommendation > working draft > release
9. 1998 2000 2002 2004 2006 2008 2010 CSS 2.1 1996 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0 2.1 candidate recommendation > working draft > release
10. 1998 2000 2002 2004 2006 2008 2010 1996 13 years since last major release 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0 2.1
11. A lot changed in 13 years.
12. 1998 2011
13. 1998 2011
14. 1998 2011 (my first job)
15. 1998 2000 2002 2004 2006 2008 2010 1996 10 years since work began on CSS 3 1997 1999 2001 2003 2005 2007 2009 2011 1.0 2.0 2.1
16. what’s the deal with ?
17. • not a single specification • a series of modularized specifications • refers to everything published after 2.1
18. modularized specifications
19. Level 3 modularized specifications
20. Level 3 Level 1 modularized specifications
21. experimental technology
22. vendor prefixes
23. .example { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } border radius
24. mixin libraries
25. compass bourbon
26. compass .example { @include border-radius(3px); } .example { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } input output
28. • Imports • Nesting • Variables • Functions • Mixins • Operations
29. @import "foo"; $base-font-color: #333; @mixin button($primary, $secondary) { background-color: $primary; color: $secondary; &:hover { color: $secondary; } &:active { background-color: shade($primary, 10%); } } .button { @include button($base-font-color, #fff); &.button--info { @include button($blue, #fff); } &.button--warning { @include button($yellow, #fff); } &.button--danger { @include button($red, #fff); } } imports variables mixins nesting functions
30. + = 2011
32. autoprefixer
33. • Utilizes most recent data from Can I Use • Uses Browserslist so you can target browsers using queries like “last 2 versions” or “>5%” • Removes Unnecessary Prefixes • W3C Spec rather than specific syntax autoprefixer
34. autoprefixer .example { border-radius: 3px; } .example { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } input output
35. autoprefixer .example { border-radius: 3px; } .example { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } input output REAL CSS!
36. PostCSS
37. what is PostCSS?
38. “a tool for transforming CSS with JS plugins”
39. CSS Parser Plugin Plugin Stringifier New CSS PostCSS
40. CSS Parser Plugin Plugin Stringifier New CSS PostCSS
41. CSS Parser Plugin Plugin Stringifier New CSS PostCSS
42. PostCSS • Imports • Nesting • Variables • Functions • Mixins • Operations
43. so how is this different?
44. 1. performance
46. 2. modularity
47. 110 Files 21,300 Lines of Code 105 Files 9,800 Lines of Code 72 Files 7,900 Lines of Code
48. 1 File 87 Lines of Code 1 File 128 Lines of Code 1 File 179 Lines of Code postcss-nested postcss-simple-vars postcss-mixins
49. 3. more features than Sass
50. PostCSS plugins
51. imports
52. postcss-import @import "normalize.css"; @import "css/foo.css"; @import "css/bar.css"; body { background: black; } /* ... ./node_modules/ normalize.css/normalize.css */ /* ... content of foo.css */ /* ... content of bar.css */ body { background: black; } input output
53. nesting
54. postcss-nested .phone { &_title { width: 500px; @media (max-width: 500px) { width: auto; } body.is_dark & { color: white; } } img { display: block; } } .phone_title { width: 500px; } @media (max-width: 500px) { .phone_title { width: auto; } } body.is_dark .phone_title { color: white; } .phone img { display: block; } input output
55. variables
56. postcss-custom-properties :root { --color: red; } div { color: var(--color); } div { color: red; } input output
57. postcss-simple-vars $dir: top; $blue: #056ef0; $column: 200px; .menu_link { background: $blue; width: $column; } .menu { width: calc(4 * $column); margin-$(dir): 10px; } .menu_link { background: #056ef0; width: 200px; } .menu { width: calc(4 * 200px); margin-top: 10px; } input output
58. functions
59. postcss-color-function body { background: color(red a(90%)) } body { background: rgba(255, 0, 0, 0.9) } input output
60. operations
61. postcss-calc :root { --font-size: 16px; } h1 { font-size: calc( var(--font-size) * 2 ); height: calc(100px - 2em); margin-bottom: calc( var(--font-size) * 1.5 ); } h1 { font-size: 32px; height: calc(100px - 2em); margin-bottom: 24px } input output
63. cssgrace .foo { background: rgba(112, 26, 0, .3); } .bar { display: inline-block; opacity: 0.5; } .foo { filter: progid:DXImageTransf... } .bar { display: inline-block; *display: inline; *zoom: 1; opacity: 0.5; filter: alpha(opacity=50); } input output
64. postcss-assets features • URL resolution • Load paths • Base path • Base URL • Relative Paths • Cache buster • Image dimensions • Inlining files /* Image dimensions */ .foo { width: width(‘images/foo.png'); height: height(‘images/foo.png'); background-size: size('images/foo.png'); } /* Inlining files */ .foo { background: inline('images/foobar.png'); } examples
65. postcss-hexrgba .foo { color: rgba(#0fab53, 0.8) } .bar { background: linear-gradient( rgba(#fff, 0.1), rgba(#fff, 0.2) ); } .foo { color: rgba(15, 171, 83, 0.8) } .bar { background: linear-gradient( rgba(255, 255, 255, .1), rgba(255, 255, 255, .2) ); } input output
66. postcss-font-magician body { font-family: "Alice"; } @font-face { font-family: "Alice"; font-style: normal; font-weight: 400; src: local(“Alice"), local("Alice-Regular"), url(“...eot?#”) format("eot"), url(“...woff2") format("woff2"), url(“...woff") format("woff"), url(“...ttf") format("truetype") } body { font-family: "Alice"; } input output
67. postcss-apply :root { --toolbar-theme: { background-color: red; color: white; border: 1px solid green; }; --toolbar-title-theme: { color: green; }; } .toolbar { @apply --toolbar-theme; } .toolbar__title { @apply --toolbar-title-theme; } .toolbar { background-color: red; color: white; border: 1px solid green; } .toolbar__title { color: green; } input output
68. analysis fallbacks future css analysis grids svg fonts images debugging linting optimizations responsive sass
69. .pipe( sass() ) .pipe( postcss([ require('autoprefixer'), require(‘...’), require('...') ]) ) +
70. .pipe( postcss([ require(‘postcss-import'), require(‘postcss-nested’), require(‘postcss-mixins’), require(‘autoprefixer’), require(‘...’), ]) )
71. =
72. thanks