Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,118 views

Published on

Overview of 5 frameworks to style JavaScript applications written in React including Radium, Aphrodite, CSS Modules, Styletron, and Styled Components with a Cheat Sheet of their features

Published in: Engineering
  • Be the first to comment

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

  1. 1. JOE SEIFI @joeseifi
  2. 2. Today’s Plan
  3. 3. COMPONENT REACT CSS
  4. 4. COMPONENT REACT
  5. 5. CSS…
  6. 6. GOOD
  7. 7. FamiliarityGOOD
  8. 8. Familiarity Matured browser support GOOD From caniuse.com
  9. 9. Familiarity Matured browser support Continuous growth GOOD
  10. 10. Familiarity Matured browser support Continuous growth GOOD BAD Naming
  11. 11. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not DRY
  12. 12. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not DRY Developer Experience
  13. 13. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not DRY Developer Experience DOM updates require JS
  14. 14. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not DRY Developer Experience DOM updates require JS UGLY Globals
  15. 15. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not DRY Developer Experience DOM updates require JS UGLY Globals Cascades
  16. 16. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not DRY Developer Experience DOM updates require JS UGLY Globals Cascades Specificity
  17. 17. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not DRY Developer Experience DOM updates require JS UGLY Globals Cascades Specificity Source Order
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. React with CSS Loader
  23. 23. .btn btn:hover btn.depressed React with CSS Loader
  24. 24. React with CSS Loader
  25. 25. React with CSS Loader
  26. 26. React with CSS Loader
  27. 27. React with CSS Loader
  28. 28. React with CSS Loader
  29. 29. React with CSS Loader
  30. 30. React with CSS Loader
  31. 31. React with CSS Loader
  32. 32. React with CSS Loader
  33. 33. React with CSS Loader
  34. 34. React with CSS Loader
  35. 35. React with CSS Loader
  36. 36. React with CSS Loader
  37. 37. React with Inline Styles
  38. 38. styles.btn :hover styles.btn.depressed React with Inline Styles
  39. 39. styles.btn :hover styles.btn.depressed React with Inline Styles
  40. 40. styles.btn :hover styles.btn.depressed React with Inline Styles
  41. 41. styles.btn :hover styles.btn.depressed React with Inline Styles
  42. 42. styles.btn :hover styles.btn.depressed X React with Inline Styles
  43. 43. React with Inline Styles
  44. 44. React with Inline Styles
  45. 45. React with Inline Styles
  46. 46. React with Inline Styles
  47. 47. Radium
  48. 48. css pseudo
 classes &
 elements
 :active :focus :hover Radium
  49. 49. :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
  50. 50. styles.btn ‘:hover’ styles.btn.depressed Radium
  51. 51. styles.btn ‘:hover’ styles.btn.depressed Radium
  52. 52. styles.btn ‘:hover’ styles.btn.depressed Radium
  53. 53. Radium
  54. 54. Radium
  55. 55. Radium
  56. 56. 5,037
  57. 57. ShoppingCart.js VideoItem.js global.css Button.js button.css shopping-cart.cssShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns
  58. 58. ShoppingCart.js VideoItem.js global.css Button.js Languages button.css shopping-cart.cssShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns
  59. 59. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality button.css shopping-cart.cssShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns button.cssbutton.js
  60. 60. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality button.css shopping-cart.cssShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns
  61. 61. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality ShoppingCart.js VideoItem.js button.js Separation of Concerns
  62. 62. Aphrodite
  63. 63. Regular Inline Styles Aphrodite
  64. 64. Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite
  65. 65. Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite
  66. 66. Rendered Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite
  67. 67. Rendered Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite
  68. 68. Rendered Regular Inline Styles Aphrodite Wraps Styles Object Aphrodite Output
  69. 69. Aphrodite
  70. 70. Aphrodite
  71. 71. Aphrodite
  72. 72. Aphrodite
  73. 73. 5,037 2,627
  74. 74. React CSS Modules
  75. 75. React CSS Modules } Original .button CSS
  76. 76. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS maps classnames React CSS Modules } Original .button CSS
  77. 77. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS maps classnames React CSS Modules } Original .button CSS
  78. 78. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS maps classnames React CSS Modules } Original .button CSS
  79. 79. React CSS Modules
  80. 80. React CSS Modules
  81. 81. React CSS Modules
  82. 82. React CSS Modules
  83. 83. React CSS Modules
  84. 84. React CSS Modules
  85. 85. React CSS Modules
  86. 86. React CSS Modules
  87. 87. React CSS Modules
  88. 88. 5,037 2,627 3,414
  89. 89. Styletron
  90. 90. Styletron Source style objects Generated CSS {
 color: ‘#ec4800’ font: ‘bold 32px’ }
  91. 91. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’ text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ }
  92. 92. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’ text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ }
  93. 93. 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 }
  94. 94. 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 }
  95. 95. 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 }
  96. 96. 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”
  97. 97. 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”
  98. 98. .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
  99. 99. .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
  100. 100. Styletron
  101. 101. Styletron
  102. 102. Styletron
  103. 103. 5,037 2,627 3,414 1,472
  104. 104. Styled Components
  105. 105. JS HTML Element React Styled Components
  106. 106. HTML Element React Component React Styled Components
  107. 107. HTML Element Styles HTML Element React Component React Styled Components
  108. 108. HTML Element HTML ElementStyled ComponentReact Component React Styled Components
  109. 109. Styled Components StylesElement Styled Component
  110. 110. Styled Components StylesElementElement Styled Component
  111. 111. Styled Components StylesElement Styles Styled Component
  112. 112. Styled Components StylesElement Styles Styled Component StyledButton
  113. 113. Styled Components StyledButton
  114. 114. Styled Components Rendered StyledButton
  115. 115. Styled Components Output Rendered StyledButton
  116. 116. Styled Components Output Rendered StyledButton
  117. 117. Styled Components
  118. 118. 5,037 2,627 3,414 1,472 5,174
  119. 119. CSS IN REACT
 
 Innovations
 Now & Future

  120. 120. CSS IN REACT
 
 Innovations
 Now & Future
 CSS3 Variables
  121. 121. CSS IN REACT
 
 Innovations
 Now & Future
 Typed CSS
  122. 122. CSS IN REACT
 
 Innovations
 Now & Future
 Web Components
  123. 123. CSS IN REACT
 
 Innovations
 Now & Future
 Vue.js & Scoped Styles
  124. 124. - 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. “ ”
  125. 125. Q&A @joeseifi • https://github.com/joeshub/css-in-react

×