You Got CSS in My JavaScript!

Thanks to the popularity of React, mixing markup and behavior – once thought unfathomable – is now almost commonplace. So why not invite styling along to the party? Adding inline styles to your markup is a breeze.

“Inline styling?!” I hear you say?

I know, I was skeptical too. But for all the progress CSS has made over the past almost 20 years, it’s still broken and annoying enough we’ve invented whole ecosystems of tooling to... well, make it less broken and annoying.

As it turns out, putting your CSS in your JavaScript components makes a pretty big chunk of that badness just disappear. And the stuff we use our favorite pre- and postprocessors for, like variables, math, and loops? You get that for free.

Moving to a truly componentized front end not only saved our CSS sanity, it got our team shipping more features with fewer bugs faster – we just had to let go of some old habits and prejudices first.

This talk is from ATXSass on 26 May 2016.

Transcript

1. You Got CSS in My JavaScript!
2. It’s survey time....
3. Nick Piesco User Experience Engineer @nickpiesco
4. I modular design
5. I CSS
6. I CSS
7. • Global namespace • Dependencies • Eliminating dead code • Minification • Sharing constants • Non-deterministic resolution • Isolation Christopher Chedeau: Seven Problems with CSS at Scale https://speakerdeck.com/vjeux/react-css-in-js
8. • Global namespace • Dependencies • Eliminating dead code • Minification • Sharing constants • Non-deterministic resolution • Isolation Christopher Chedeau: Seven Problems with CSS at Scale https://speakerdeck.com/vjeux/react-css-in-js
9. • Global namespace • Dependencies • Eliminating dead code • Non-deterministic resolution
10. Global namespace
11. Everything is global!
12. SUIT CSS (doesn’t have a cool logo)
13. SUIT CSS (doesn’t have a cool logo) These aren’t solutions, they’re workarounds
14. Dependency management
15. Dependency management (Anyone?)
16. You might forget to include a module on a page, and it might work by accident
17. Eliminating dead code
18. Eliminating dead code (Anyone?)
19. Non-deterministic resolution
20. Loading modules asynchronously potentially blows up the cascade
21. • Global namespace • Dependencies • Eliminating dead code • Non-deterministic resolution
22. I modular design
23. React • Uses JSX to render the ‘Virtual DOM’ • Virtual DOM gets diffed against Actual DOM, and only the changes get rendered https://facebook.github.io/react/
24. export default class myAwesomeButton { render () { return ( <button type='button' className='my-awesome-button'> <span className='my-awesome-button-text'> Click me! </span> <button> ); } } myAwesomeButton.js
25. export default class myAwesomeButton { render () { return ( <button type='button' className='my-awesome-button'> <span className='my-awesome-button-text'> Click me! </span> <button> ); } } import MyAwesomeButton from 'path/to/myAwesomeButton'; export default class someOtherComponent { render () { return ( <div> Whatever you do, don’t click this button. <MyAwesomeButton /> </div> ); } } myAwesomeButton.js someOtherComponent.js
26. Behaviour is tightly coupled with markup – one-stop shopping!
27. So we have behaviour and content in the same place... ...what about styles?
28. So we have behaviour and content in the same place... ...what about styles? ...what about inline styles?
29. WAT
30. What about separation of concerns?!
31. Separation of concerns !== Separation of technologies
32. export default class myAwesomeButton { render () { return ( <button type='button' style={backgroundColor: 'rebeccapurple', border: 0, borderRadius: 3, padding: <span style={color: 'white', fontSize: 24, fontWeight: 'bold', textShadow: '1px 1px 0 rgba(0, 0, 0 Click me! </span> </button> ); } } myAwesomeButton.js
33. export default class myAwesomeButton { render () { return ( <button type='button' style={backgroundColor: 'rebeccapurple', border: 0, borderRadius: 3, padding: <span style={color: 'white', fontSize: 24, fontWeight: 'bold', textShadow: '1px 1px 0 rgba(0, 0, 0 Click me! </span> </button> ); } } myAwesomeButton.js
34. Create a style object and reference it in your JSX
35. let styles = { button: { backgroundColor: 'rebeccapurple', padding: 10 }, buttonText: { fontSize: 24, fontWeight: 'bold' } }; myAwesomeButton.js
36. let styles = { button: { backgroundColor: 'rebeccapurple', padding: 10 }, buttonText: { fontSize: 24, fontWeight: 'bold' } }; export default class myAwesomeButton { render () { return ( <button type='button' style={styles.button}> <span style={styles.buttonText}> Click me! </span> </button> ); } } myAwesomeButton.js
37. • Pseudoelements (:before, :after) • Pseudoclasses (:hover, :focus, :active, etc.) • Media queries Things we don’t get with inline styles
38. Pseudoelements Add empty elements where you need them (This craps up the DOM and is a known drawback)
39. Pseudoclasses and media queries • :hover, :focus, and :active support via onMouseEnter, etc. • Media query support via window.matchMedia http://stack.formidable.com/radium/
40. let styles = { button: { backgroundColor: 'rebeccapurple', padding: 5, ':hover': { backgroundColor: 'purple' }, '@media screen and (min-width: 600px)': { padding: 10 } }, buttonText: { fontSize: 24, fontWeight: 'bold' } };
41. I
42. • Nesting • Variables • Importing partials • Extends and mixins • Math • Lists and maps
43. Nesting Usually used to scope styling to a module
44. Variables Come for free in JS Want globals? Create a module
45. export default { textColor: '#333', backgroundColor: 'white', buttonColor: 'rebeccapurple' }; colors.js
46. export default { textColor: '#333', backgroundColor: 'white', buttonColor: 'rebeccapurple' }; import myAwesomeButton from 'path/to/myAwesomeButton'; import colors from 'path/to/colors'; let styles = { button: { backgroundColor: colors.buttonColor } }; colors.js someOtherComponent.js
47. Importing partials Module loaders (RequireJS and friends) Comes for free in ES6!
48. Extends and mixins Radium makes it easy to extend styles
49. let styles = { button: { backgroundColor: 'rebeccapurple' } }; @Radium export default MyAwesomeButton { render () { return ( <button style={[styles.button, this.props.style]}> Click me! </button> ); } } myAwesomeButton.js
50. return ( <MyAwesomeButton style={margin: 10}> Click me! </MyAwesomeButton> ); let styles = { button: { backgroundColor: 'rebeccapurple' } }; @Radium export default MyAwesomeButton { render () { return ( <button style={[styles.button, this.props.style]}> Click me! </button> ); } } myAwesomeButton.js someOtherComponent.js
51. Math Comes for free with JS Use a library to handle colour operations https://github.com/Qix-/color
52. Lists and maps Sass lists => JS arrays Sass maps => JS objects
53. • Nesting • Variables • Importing partials • Extends and mixins • Math • Lists and maps
54. I
55. We still need CSS for global document styles • Typography • Layout (container and grid)
56. • Global namespace • Dependencies • Eliminating dead code • Non-deterministic resolution
57. All styles are tightly scoped We explicitly control what gets passed in Global namespace
58. Dependencies Plenty of solutions ready to go Each component brings its own styles
59. Eliminating dead code Don’t need a module anymore? Delete it [mostly] without fear!
60. Non-deterministic resolution Tight scoping limits the length of the cascade
61. Solving CSS’s problems === Styling without fear
62. Styling without fear === Better code
63. Styling without fear === Better code with fewer bugs
64. Styling without fear === Better code with fewer bugs faster
65. Thanks! @nickpiesco Reese’s commercial: tracy80sgirl/YouTube Scott Hall: wcwarchive/YouTube Sad Mark Zuckerberg: kippreport.com Emoji: Firefox OS/Wikimedia Commons Other Reese’s commercial: bionicdisco.com