CSS in JS: The Good & Bad Parts

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

Transcript

1. CSS in JS
   The Good & Bad Parts
   ReactiveConf 2017
   

   View Slide

2. Robin Frischmann
   @rofrischmann @rofrischmann
   

   View Slide

3. View Slide

4. rofrischmann/fela
   

   View Slide

5. Who is already
   familiar with CSS in JS
   ?
   

   View Slide

6. CSS in JS

   101
   

   View Slide

7. CSS in JS !!!==
   inline style
   

   View Slide

8. 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
   

   View Slide

9. The Problems
   

   View Slide

10. Choosing the
    “right” library
    1
    

    View Slide

11. • 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
    

    View Slide

12. Use what works
    for you!
    

    View Slide

13. 1. Objects or Template Strings?
    2. Working with Designers?
    3. Simplicity or Flexibility?
    4. React-centric or Framework-agnostic?
    5. Server-side Rendering?
    

    View Slide

14. View Slide

15. Not everyone is
    used to
    JavaScript
    2
    

    View Slide

16. 1. Choosing a library is hard
    2. Using CSS in JS does not
    always turn out to be a good
    choice at all
    

    View Slide

17. The Benefits
    

    View Slide

18. It’s JavaScript!
    1
    

    View Slide

19. Who has used or is using
    a preprocessor like Sass,
    Less or Stylus?
    ?
    

    View Slide

20. JavaScript
    everywhere!
    
    

    View Slide

21. $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
    

    View Slide

22. $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
    

    View Slide

23. Ecosystem
    

    View Slide

24. styled-components/polished
    

    View Slide

25. Computers do
    the hard work
    2
    

    View Slide

26. – Phil Karlton
    “There are only two hard things in
    Computer Science: cache invalidation
    and naming things.”
    

    View Slide

27. Naming CSS
    classes is hard
    

    View Slide

28. BEM
    smacss.com
    oocss.org
    getbem.com
    OOCSS SMACSS
    

    View Slide

29. Conventions !!!== enforced
    

    View Slide

30. Computers for the
    rescue!
    

    View Slide

31. Class Names?

    Non of my business!
    

    View Slide

32. – 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
    

    View Slide

33. Predictable
    Styling
    3
    

    View Slide

34. Who has ever accidentally destroyed
    the layout or styles of some part of
    the application, while actually working
    on something completely different?
    ?
    

    View Slide

35. const view = () !=> (
    'text_green'
    }>
    Some Text
    !
    )
    .text_green {
    color: green
    }
    JS(X) CSS
    

    View Slide

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

    View Slide

37. const view = state !=> (
    state.error ?
    'text_red' :
    'text_green'
    }>
    Some Text
    !
    )
    .text_red {
    font-size: 20px;
    color: yellow;
    }
    .text_green {
    color: green
    }
    JS(X) CSS
    

    View Slide

38. UI = f(state)
    

    View Slide

39. #1 What is displayed
    #2 How is it displayed
    

    View Slide

40. How
    What
    Markup Styling
    HTML CSS
    

    View Slide

41. UI = f(state)
    

    View Slide

42. Style = f(state)
    

    View Slide

43. import { css } from 'any-css-in-js-library'
    const style = state !=> ({
    color: state.error ? 'red' : 'green'
    })
    const view = state !=> (
    
    Simple Text
    !
    )
    JS(X)
    

    View Slide

44. - 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
    

    View Slide

45. @rofrischmann @rofrischmann
    

    View Slide

46. Thank you!
    @rofrischmann @rofrischmann
    

    View Slide