Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get That CSS Out Of Your JS

Brian Hough
September 10, 2017

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.

Brian Hough

September 10, 2017
Tweet

Other Decks in Technology

Transcript

  1. -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
  2. You have to know CSS pretty damn well to build

    a CSS-In-JS Library. Myth 1: We don’t know CSS
  3. Quite to the contrary, our work in CSS-In-JS is to

    hopefully move the entire CSS platform forward. Myth 2: We Hate CSS
  4. This one's on us. It was a poor first attempt.

    The person responsible has been sacked. Myth 3: It’s just inline styles
  5. We do very much! It is all in how you

    look at it… Myth 4: We don’t care about separation of concerns
  6. OK…This one may be true. Myth 5: We want to

    write everything in JavaScript
  7. -Portability of components -Portability of styles -Better Handling Critical CSS

    -Platform-agnostic styling What We Set Out To Accomplish
  8. Portability Of Components const Button = () => ( <button

    class="my_button" onClick={props.onSubmit}> Submit </button> );
  9. Portability Of Components .my_button { background: purple; color: white; }

    .my_button:active { background: violet; color: white; }
  10. -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?
  11. Portability Of Components const Button = styled.button` background: purple; color:

    white; &:active { background: violet; color: white; } ` const MyButton = () => ( <Button onClick={props.onSubmit}> Submit </Button> );
  12. 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> );
  13. This is a lot of unrelated CSS, how does this

    not get bloated and redundant over time?
  14. OOCSS - Nicole Sullivan SMACSS - Jonathan Snook BEM -

    Yandex We Drew Inspiration from CSS
  15. 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; } `
  16. 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; }
  17. 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}; } }
  18. 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}`, } } }
  19. Now It’s As Easy As… npm install csslock --save import

    cssLock from 'css-lock'; const FluidContainer = styled.div` ...${cssLock()} `
  20. 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.
  21. -Fairly manual process - Requires build tools to automate -Perceived

    effort outweighs work Why Is This So Hard Right Now?
  22. 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()
  23. All components needed to render the initial page on the

    server are automatically inlined when server rendering.
  24. 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> ); } }
  25. 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> ) } }
  26. 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.
  27. 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