Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CSS in JS: The Good & Bad Parts

CSS in JS: The Good & Bad Parts

Slides for my talk at ReactiveConf 2017 in Bratislava, Slovakia.

Robin Frischmann

October 25, 2017
Tweet

More Decks by Robin Frischmann

Other Decks in Programming

Transcript

  1. const style = { fontSize: 12, color: 'red', ':hover': {

    color: 'blue' }, '@media (min-width:320px)' { fontSize: 12 } } const style = ` font-size: 12px; color: red; &:hover {
 color: blue; } @media (min-width:320px) { font-size: 14px; } } ` Objects Template strings
  2. • aphrodite • babel-plugin-css- in-js • babel-plugin-pre- style • bloody-react-styled

    • classy • csjs • css-constructor • css-light • css-loader • css-ns • cssobj • cssx-loader • emotion • es-css-modules • glamor • glamorous • hyperstyles • i-css • j2c • jsxstyle • linaria • pre-style • radium • react-css-builder • react-css- components • react-css-modules • react-cssom • react-cxs • react-fela • react-free-style • react-inline-css • react-inline-style • react-inline • react-jss • react-look • react-native-web • react-statics-styles • react-styl • react-style • react-styleable • react-stylematic • react-theme • react-vstyle • reactcss • restyles • scope-styles • smart-css • stile-react-media- queries • stilr • style-it • styled-components • styled-jsx • styletron-react • styling • superstyle • typestyle • uranium
  3. 1. Objects or Template Strings? 2. Working with Designers? 3.

    Simplicity or Flexibility? 4. React-centric or Framework-agnostic? 5. Server-side Rendering?
  4. 1. Choosing a library is hard 2. Using CSS in

    JS does not always turn out to be a good choice at all
  5. $primary-color = red .button { color: $primary-color; padding: 15px 20px;

    font-size: 20px; } const primaryColor = 'red' const buttonStyle = { color: primaryColor, padding: '15px 20px', fontSize: 20 } (S)CSS JS
  6. $vendors: "-webkit-", "-ms-", ""; @mixin prefix($property, $value) { @each $vendor

    in $vendors { !#{$vendor}!#{$property}: !#{$value}; } } .button { @include prefix( 'border-radius', '5px' ) } const vendors = ['-webkit-', '-ms-', ''] function prefix(property, value) { return vendors.reduce( (style, vendor) !=> { style[vendor + property] = value return style }, {} ) } const buttonStyle = { !!...prefix( 'border-radius', '5px' ) } SCSS JS
  7. – Phil Karlton “There are only two hard things in

    Computer Science: cache invalidation and naming things.”
  8. – Alan B Smith “[…] the appeal of CSS-in-JS is

    not simplicity, rather predictability and consistency.” Source: https://hackernoon.com/why-we-use-styled-components-at-decisiv-a8ac6e1507ac
  9. Who has ever accidentally destroyed the layout or styles of

    some part of the application, while actually working on something completely different? ?
  10. const view = () !=> ( <div className={ 'text_green' }>

    Some Text !</div> ) .text_green { color: green } JS(X) CSS
  11. const view = state !=> ( <div className={ state.error ?

    'text_red' : 'text_green' }> Some Text !</div> ) .text_red { color: red } .text_green { color: green } JS(X) CSS
  12. const view = state !=> ( <div className={ state.error ?

    'text_red' : 'text_green' }> Some Text !</div> ) .text_red { font-size: 20px; color: yellow; } .text_green { color: green } JS(X) CSS
  13. import { css } from 'any-css-in-js-library' const style = state

    !=> ({ color: state.error ? 'red' : 'green' }) const view = state !=> ( <div className={css(style(state))}> Simple Text !</div> ) JS(X)
  14. - Choosing a library is hard - Using CSS in

    JS is not necessarily the best choice ✓ Power of JavaScript ✓ Unique generated classes ✓ Predictable UI Benefits Problems