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

CSS in React - The Good, The Bad, and The Ugly

CSS in React - The Good, The Bad, and The Ugly

Overview of the top frameworks for writing CSS in JS apps written in ReactJS - Presented at SXSW 2017

5174b83a19e1c0255401d2ac61beedce?s=128

Joe Seifi

March 13, 2017
Tweet

Other Decks in Programming

Transcript

  1. None
  2. JOE SEIFI @joeseifi

  3. None
  4. None
  5. None
  6. Today’s Plan

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. COMPONENT REACT CSS

  14. COMPONENT REACT

  15. CSS…

  16. GOOD

  17. Familiarity GOOD

  18. Familiarity Matured browser support GOOD From caniuse.com

  19. Familiarity Matured browser support Continuous growth GOOD

  20. Familiarity Matured browser support Continuous growth GOOD BAD Naming

  21. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY
  22. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience
  23. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS
  24. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals
  25. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals Cascades
  26. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals Cascades Specificity
  27. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals Cascades Specificity Source Order
  28. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS
  29. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS Components with local CSS Optional global CSS
  30. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order Full CSS support Server side rendering / Extract CSS IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS Components with local CSS Optional global CSS
  31. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order Full CSS support Server side rendering / Extract CSS No dead CSS Themes Debugging in DevTools Linting & syntax highlighting Automatic vendor prefixing IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS Components with local CSS Optional global CSS
  32. None
  33. None
  34. React with CSS Loader

  35. .btn btn:hover btn.depressed React with CSS Loader

  36. React with CSS Loader

  37. React with CSS Loader

  38. React with CSS Loader

  39. React with CSS Loader

  40. React with CSS Loader

  41. React with CSS Loader

  42. React with CSS Loader

  43. React with CSS Loader

  44. React with CSS Loader

  45. React with CSS Loader

  46. React with CSS Loader

  47. React with CSS Loader

  48. React with CSS Loader

  49. None
  50. React with Inline Styles

  51. styles.btn :hover styles.btn.depressed React with Inline Styles

  52. styles.btn :hover styles.btn.depressed React with Inline Styles

  53. styles.btn :hover styles.btn.depressed React with Inline Styles

  54. styles.btn :hover styles.btn.depressed React with Inline Styles

  55. styles.btn :hover styles.btn.depressed X React with Inline Styles

  56. React with Inline Styles

  57. React with Inline Styles

  58. React with Inline Styles

  59. React with Inline Styles

  60. None
  61. Radium

  62. css pseudo
 classes &
 elements
 :active :focus :hover Radium

  63. :any :checked :default :dir() :disabled :empty :enabled :first :first-child :first-of-type

    :fullscreen :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid :visited
 ::after ::before ::first-letter ::first-line ::selection ::backdrop ::placeholder ::marker ::spelling-error ::grammar-error css pseudo
 classes &
 elements
 :active :focus :hover Radium
  64. styles.btn ‘:hover’ styles.btn.depressed Radium

  65. styles.btn ‘:hover’ styles.btn.depressed Radium

  66. styles.btn ‘:hover’ styles.btn.depressed Radium

  67. Radium

  68. Radium

  69. Radium

  70. None
  71. 5,037

  72. ShoppingCart.js VideoItem.js global.css Button.js button.css shopping-cart.css ShoppingCart.js VideoItem.js video-item.css button.js

    Separation of Concerns
  73. ShoppingCart.js VideoItem.js global.css Button.js Languages button.css shopping-cart.css ShoppingCart.js VideoItem.js video-item.css

    button.js Separation of Concerns
  74. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality button.css shopping-cart.css

    ShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns button.css button.js
  75. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality button.css shopping-cart.css

    ShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns
  76. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality ShoppingCart.js VideoItem.js

    button.js Separation of Concerns
  77. Aphrodite

  78. Regular Inline Styles Aphrodite

  79. Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite

  80. Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite

  81. Rendered Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite

  82. Rendered Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite

  83. Rendered Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite Output

  84. Aphrodite

  85. Aphrodite

  86. Aphrodite

  87. Aphrodite

  88. 5,037 2,627

  89. React CSS Modules

  90. React CSS Modules } Original .button CSS

  91. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS

    maps classnames React CSS Modules } Original .button CSS
  92. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS

    maps classnames React CSS Modules } Original .button CSS
  93. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS

    maps classnames React CSS Modules } Original .button CSS
  94. React CSS Modules

  95. React CSS Modules

  96. React CSS Modules

  97. React CSS Modules

  98. React CSS Modules

  99. React CSS Modules

  100. React CSS Modules

  101. React CSS Modules

  102. React CSS Modules

  103. 5,037 2,627 3,414

  104. Styletron

  105. Styletron Source style objects Generated CSS {
 color: ‘#ec4800’ font:

    ‘bold 32px’ }
  106. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ }
  107. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ }
  108. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center }
  109. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center }
  110. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center }
  111. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center } 
 “a b” “b c” “b a”
  112. Styletron Source style objects Generated CSS 6 Rules 3 Rules

    {
 font: ‘bold 32px’ text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center } 
 “a b” “b c” “b a”
  113. .a .b .c .d .e .f .g .h .i .j

    .l .btn .btn:hover .btn.depressed Styletron .a .b .c .d .e .f .g .h .i .j .j .k .l .l:hover .m .n .o
  114. .a .b .c .d .e .f .g .h .i .j

    .l .btn .btn:hover .btn.depressed Styletron .a .b .c .d .e .f .g .h .i .j .j .k .l .l:hover .m .n .o
  115. Styletron

  116. Styletron

  117. Styletron

  118. 5,037 2,627 3,414 1,472

  119. Styled Components

  120. JS HTML Element React Styled Components

  121. HTML Element React Component React Styled Components

  122. HTML Element Styles HTML Element React Component React Styled Components

  123. HTML Element HTML Element Styled Component React Component React Styled

    Components
  124. Styled Components Styles Element Styled Component

  125. Styled Components Styles Element Element Styled Component

  126. Styled Components Styles Element Styles Styled Component

  127. Styled Components Styles Element Styles Styled Component StyledButton

  128. Styled Components StyledButton

  129. Styled Components Rendered StyledButton

  130. Styled Components Output Rendered StyledButton

  131. Styled Components Output Rendered StyledButton

  132. Styled Components

  133. 5,037 2,627 3,414 1,472 5,174

  134. CSS IN REACT
 
 Innovations
 Now & Future


  135. CSS IN REACT
 
 Innovations
 Now & Future
 CSS3 Variables

  136. CSS IN REACT
 
 Innovations
 Now & Future
 Typed CSS

  137. CSS IN REACT
 
 Innovations
 Now & Future
 Web Components

  138. CSS IN REACT
 
 Innovations
 Now & Future
 Vue.js &

    Scoped Styles
  139. - Bret Victor Technology changes quickly, people’s minds change slowly.

    So it’s easy to adopt new technologies, it can be hard to adopt new ways of thinking. “ ”
  140. Q&A @joeseifi • https://github.com/joeshub/css-in-react