Get That CSS Out Of Your JS

React ushered in the era of JSX, bringing HTML to our JavaScript. Now that same community is doing the same for CSS. How’d we get here? What problems are the community trying to solve? Do we hate CSS? Get the perspective of someone who has spent more time than is healthy with existing CSS-In-JS solutions.

Transcript

1. Brian Hough Co-Creator of ✨polished - and - Sr. Director of Engineering at New Relic
2. Get That CSS Out Of Your JS! A Journey Through CSS-In-JS
3. A Friendly Disclaimer
4. Never Meet Your Heroes Initial Reactions Were…Mixed
6. Fake News There Are A Lot Of Myths Out There
7. “These developers must really suck at CSS…” - @armchairdev
8. “Just learn CSS” - @captainobvious
9. “1999 called, they want their inline styles back.” - @10XEngineer
10. -don’t know CSS -hate or don’t want to learn CSS -same thing as inline styles -do not care about separation of concerns -just want to write everything in JavaScript Common Myths About CSS-In-JS
11. MythBusters Well Actually…Is CSS-splaining A Thing?
12. You have to know CSS pretty damn well to build a CSS-In-JS Library. Myth 1: We don’t know CSS
13. Quite to the contrary, our work in CSS-In-JS is to hopefully move the entire CSS platform forward. Myth 2: We Hate CSS
14. This one's on us. It was a poor first attempt. The person responsible has been sacked. Myth 3: It’s just inline styles
15. We do very much! It is all in how you look at it… Myth 4: We don’t care about separation of concerns
16. source: http://speakerdeck.com/didoo/let-there-be-peace-on-css
17. OK…This one may be true. Myth 5: We want to write everything in JavaScript
18. -Portability of components -Portability of styles -Better Handling Critical CSS -Platform-agnostic styling What We Set Out To Accomplish
19. Portability of Components Pour One Out For Scoped Styles
20. Portability Of Components const Button = () => ( <button class="my_button" onClick={props.onSubmit}> Submit </button> );
21. Portability Of Components .my_button { background: purple; color: white; } .my_button:active { background: violet; color: white; }
22. -Manually cut and paste the styles -Manually share and import a file -Require users to have a specific build -Create a CSS Framework How Do We Share This Complete Component?
23. Portability Of Components const Button = styled.button` background: purple; color: white; &:active { background: violet; color: white; } ` const MyButton = () => ( <Button onClick={props.onSubmit}> Submit </Button> );
24. Portability Of Components const SubmitButton = styled.button` background: green; color: white; &:active { background: darkgreen; color: white; } ` const MySubmitButton = () => ( <Button onClick={props.onSubmit}> Submit </Button> ); const CancelButton = styled.button` background: red; color: white; &:active { background: maroon; color: white; } ` const MyCancelButton = () => ( <Button onClick={props.onSubmit}> Submit </Button> );
25. -Third-Party Libraries -Internal Component Libraries -Shared Styles/Style Guides Use Cases
26. This is a lot of unrelated CSS, how does this not get bloated and redundant over time?
27. OOCSS - Nicole Sullivan SMACSS - Jonathan Snook BEM - Yandex We Drew Inspiration from CSS
28. BEM Is Built-In .my_button--submit__active {} Block Element Modifier
29. Our Original Example const BaseButton = styled.button` color: white; &:active { color: white; } ` const SubmitButton = BaseButton.extend` background: green; &:active { background: darkGreen; } ` const CancelButton = BaseButton.extend` background: red; &:active { background: maroon; } `
30. The Resulting Code <button class="inZBzG">Submit</button> <button class="fKdCie">Cancel</button> .inZBzG { color:white; background:green; } .inZBzG:active { color:white; } .inZBzG:active { background:darkGreen; } .fKdCie { color:white; background:red; } .fKdCie:active { color:white; } .fKdCie:active { background:maroon; }
31. Portability Of Styles You see mixins, We see functions
32. ‘Portability of styles’ sounds a lot like ‘portability of components’. What’s the difference?
33. Like SASS Mixins @mixin css-lock($min-size: 1, $max-size: 1.4, $min- width: 20, $max-width: 100, $property: font-size, $unit: rem) { #{$property}: calc(#{$min-size}#{$unit} + (#{$max- size} - #{$min-size}) * ((100vw - #{$min-width} #{$unit}) / (#{$max-width} - #{$min-width}))); @media (max-width: #{$min-width}#{$unit}) { #{$property}: #{$min-size}#{$unit}; } @media (min-width: #{$max-width}#{$unit}) { #{$property}: #{$max-size}#{$unit}; } }
34. It’s Really Just A Function function cssLock(minSize = 1, maxSize = 1.4, minWidth = 20, maxWidth = 100, property: = 'font-size', unit = 'rem') { return { [property]: `calc(${minSize}${unit} + (${maxSize} - $ {minSize}) * ((100vw - ${minWidth}${unit}) / (${maxWidth} - $ {$minWidth})))`, `@media (max-width: ${minWidth}${unit})`: { [property]: `${minSize}${unit}`, } `@media (min-width: ${maxWidth}${unit})`: { [property]: `${maxSize}${unit}`, } } }
35. Now It’s As Easy As… npm install csslock --save import cssLock from 'css-lock'; const FluidContainer = styled.div` ...${cssLock()} `
37. Inlining Of Critical CSS All Hail Our PageSpeed Overlords
38. critical CSS - the CSS required to do a first render of a page. It is suggested you inline this CSS in order to improve initial page load times.
39. -Fairly manual process - Requires build tools to automate -Perceived effort outweighs work Why Is This So Hard Right Now?
40. What If It Were As Easy As… import { renderToString } from 'react-dom/server' import { ServerStyleSheet } from 'styled-components' const sheet = new ServerStyleSheet() const html = renderToString(sheet.collectStyles(<YourApp />)) const styleTags = sheet.getStyleTags()
41. All components needed to render the initial page on the server are automatically inlined when server rendering.
42. Styles For Every Platform The Holy Grail…Did they ever find that thing?
43. React Primitives import React from 'react'; import { View, Text, Image} from 'react-primitives'; class Foo extends React.Component { render() { return ( <View> {this.props.children} </View> ); } }
44. Styling Primitives import styled from 'styled-components/native'; const StyledView = styled.View` background-color: papayawhip; `; const StyledText = styled.Text` color: palevioletred; `; class MyReactNativeComponent extends React.Component { render() { return ( <StyledView> <StyledText>Hello World!</StyledText> </StyledView> ) } }
45. Styling Primitives const RotatedBox = styled.View` transform: rotate(90deg); text-shadow-offset: 10px 5px; font-variant: small-caps; margin: 5px 7px 2px; `;
46. Delivering on the promise of the same code everywhere, now including styles!
47. Write Once, Render Anywhere Peggy Rayzis @14:40 More On This Later…
48. What’s The Catch? It’s too good to be true
49. -CSS-Like API vs. Smaller Library -No Config Build vs. Better Performance Form vs. Function
50. Form vs. Function emotion by Kye Hohenberger may be the closest, providing a CSS-Like API, tiny library size, and fast performance with minimal build configuration.
51. Security Who knew taking un-sanitized user input and executing it in JavaScript was a bad idea.
52. Security Using CSS-In-JS Securely by James K Nelson http://bit.ly/css-js-security CSS Escape Polyfill by Mathias http://bit.ly/css-escape
53. http://bit.ly/js-styles-perf I’m Sold! Where Do Start? Awesome CSS in JS by Valerii Sorokobatko
54. I’m Sold! Where Do Start? Awesome CSS in JS by Valerii Sorokobatko http://bit.ly/js-styles-perf Unified Styling Language by Mark Dalgleish http://bit.ly/unified-styling-language
55. -CSS Modules -Polymer/Web Components -Webpack CSS Loader -CSS Variables Gross! What are my other options?
57. Thank You! Twitter: @b_hough Github: github.com/bhough Polished: polished.js.org