The Future of Style Sheets

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.

Transcript

1. 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
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 / Sass The 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 You Thank You https:/ /slides.com/bretlittle/future-of-css https:/ /slides.com/bretlittle/future-of-css @little_bret @little_bret