CSS in JS: The Good & Bad Parts

Transcript

1. 1.

   CSS in JS The Good & Bad Parts ReactiveConf 2017

2. 2.

   Robin Frischmann @rofrischmann @rofrischmann

3. 3.

   None
4. 4.

   rofrischmann/fela

5. 5.

   Who is already familiar with CSS in JS ?

6. 6.

   CSS in JS
 101

7. 7.

   CSS in JS !!!== inline style

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

   The Problems

10. 10.

    Choosing the “right” library 1

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

    Use what works for you!

13. 13.

    1. Objects or Template Strings? 2. Working with Designers? 3.

    Simplicity or Flexibility? 4. React-centric or Framework-agnostic? 5. Server-side Rendering?
14. 14.

    None
15. 15.

    Not everyone is used to JavaScript 2

16. 16.

    1. Choosing a library is hard 2. Using CSS in

    JS does not always turn out to be a good choice at all
17. 17.

    The Benefits

18. 18.

    It’s JavaScript! 1

19. 19.

    Who has used or is using a preprocessor like Sass,

    Less or Stylus? ?
20. 20.

    JavaScript everywhere!

21. 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
22. 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
23. 23.

    Ecosystem

24. 24.

    styled-components/polished

25. 25.

    Computers do the hard work 2

26. 26.

    – Phil Karlton “There are only two hard things in

    Computer Science: cache invalidation and naming things.”
27. 27.

    Naming CSS classes is hard

28. 28.

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

29. 29.

    Conventions !!!== enforced

30. 30.

    Computers for the rescue!

31. 31.

    Class Names?
 Non of my business!

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

    Predictable Styling 3

34. 34.

    Who has ever accidentally destroyed the layout or styles of

    some part of the application, while actually working on something completely different? ?
35. 35.

    const view = () !=> ( <div className={ 'text_green' }>

    Some Text !</div> ) .text_green { color: green } JS(X) CSS
36. 36.

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

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

    UI = f(state)

39. 39.

    #1 What is displayed #2 How is it displayed

40. 40.

    How What Markup Styling HTML CSS

41. 41.

    UI = f(state)

42. 42.

    Style = f(state)

43. 43.

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

    @rofrischmann @rofrischmann

46. 46.

    Thank you! @rofrischmann @rofrischmann