The Future of Style Sheets The Future of Style Sheets Bret Little - @little_bret http://bretlittle.surge.sh http://slides.com/bretlittle/future-of-css 

Web App Crappy-code-o-meter Crappiness 

No content

Is the code readable? Is it easy to change or extend? Is it decoupled from other parts of the application? Will it scale? Is it good? http://engineering.appfolio.com/2012/11/16/css-architecture/ 

Predictable Reusable Maintainable Scalable Good CSS Architecture 

http://alistapart.com/column/what-will-save-us-from-the-dark-side-of-pre-processors 

http://benfrain.com/breaking-up-with-sass-postcss/ 

The Dark side of LESS / Sass The Dark side of LESS / Sass Overzealous @extend Unrestrained Nesting Too easy to do the wrong thing Brevity vs Understanding 

PostCSS CSS Plugin Plugin Stringifier New CSS Parser Source: http://ai.github.io/about-postcss 

var postcss = require('postcss'); module.exports = postcss.plugin('PLUGIN_NAME', function (opts) { opts = opts || {}; // Work with options here return function (css, result) { // Transform CSS AST here }; }); PostCSS Plugin 

PostCSS Plugins postcss-nested postcss-mixins autoprefixer cssnext CSS Modules postcss-colorblind postcss-bem-linter css-colorguard postcss-style-guide 

CSS 4 

CSS Variables /** Define your vars **/ :root { --main-color: #06c; --accent-color: #006; } .main-heading { color: var(--main-color); } .main-heading__border { color: var(--accent-color); } https://github.com/postcss/postcss-custom-properties 

Custom Selectors /** Define the selector **/ @custom-selector :--heading h1, h2, h3, h4, h5, h6; /** Use the selector **/ :--heading { font-family: 'Open Sans', sans-serif; } https://github.com/postcss/postcss-custom-selectors 

Custom Media Queries /** custom query definition **/ @custom-media --small-viewport (max-width: 30em); /** custom query usage **/ @media (--small-viewport) { .hero-image { display: block; } } https://github.com/postcss/postcss-custom-media 

Color Transformations .block__element { color: color(red a(10%)); background-color: color(red lightness(50%)); border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%)); } https://github.com/postcss/postcss-color-function 

Conic Gradients https://github.com/jonathantneal/postcss-conic-gradient .pie-chart { background: conic-gradient(yellowgreen 32%, gold 0 73%, #f06 0); border-radius: 50%; } .splash { background: #0ac; repeating-conic-gradient(hsla(0,0%,100%,.2) 0 15deg, hsla(0,0%,100%,0) 0 30deg); } 

Hex Alpha /** #RRGGBBAA or #RGBA syntax **/ h1 { color: #09A23CCC; /** color: rgba(9, 162, 60, .8); **/ } h2 { color: #093C; /** color: rgba(0, 153, 51, .8); **/ } https://github.com/postcss/postcss-color-hex-alpha 

:any-link a:any-link { color: #4285f4; text-decoration: none; } /** compiles / equivalent to: **/ a:link, a:visited { color: #4285f4; text-decoration: none; } https://github.com/jonathantneal/postcss-pseudo-class-any-link 

:matches p:matches(:first-child, .special) { color: red; } /** compiles / equivalent to: **/ p:first-child, p.special { color: red; } https://github.com/postcss/postcss-selector-matches 

:not p:not(:first-child, .special) { color: red; } /** compiles / equivalent to: **/ p:not(:first-child), p:not(.special) { color: red; } https://github.com/postcss/postcss-selector-not 

BEM CSS .app-widgets__grid-row { position: relative; bottom: 20px; } .app-widgets__grid-row--active { background: red; } https://css-tricks.com/bem-101/ 

BEM CSS == JS Globals .app-widgets__grid__row--active { position: relative; bottom: 20px; } window.app = window.app || {}; window.app.widgets = window.app.widgets || {}; window.app.widgets.grid = window.app.widgets.grid || {}; window.app.widgets.grid.render = function() { /** code **/ } 

/** app.js **/ import grid from './grid.js'; grid.render(); /** grid.js **/ export default { render: function() { /** **/ } } JavaScript Modules 

No content

CSS Modules /** Button.css **/ .a { composes: aLink from './Link.css'; display: block; padding: 0 15px; } /** Link.css **/ .aLink { text-decoration: none; cursor: pointer; color: #ffab40; } /** Button.js **/ import styles from './Button.css'; export default function() { return ( } This is my button! ) .Button__a__1olur { text-decoration: none; cursor: pointer; color: #ffab40; display: block; padding: 0 15px; } 

http://adventurous-bait.surge.sh/ http://materializecss.com/ https://github.com/blittle/stars 

Thank You Thank You https:/ /slides.com/bretlittle/future-of-css https:/ /slides.com/bretlittle/future-of-css @little_bret @little_bret