CSS is often the most overlooked and messy portion of web applications. Rather than implementing an application with LESS, SASS, or Stylus, I propose embracing the new style standard and an exciting new specification for CSS modules.

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

2. Web App Crappy-code-o-meter
Crappiness

4. 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/

5. Predictable
Reusable
Maintainable
Scalable
Good CSS Architecture

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

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

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

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

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

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

12. CSS 4

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

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

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

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

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

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

19. :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

20. :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

21. :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

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

23. 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 **/
}

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

26. 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 (
}
<button className={styles.a}>This is my button!</button>
)
.Button__a__1olur {
text-decoration: none;
cursor: pointer;
color: #ffab40;
display: block;
padding: 0 15px;
}

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

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