CSS in React - The Good, The Bad, and The Ugly
1 like1,699 views
The document discusses various aspects of CSS in React, including best practices, developer experience, and the importance of separation of concerns. It highlights issues like naming conventions, DOM updates, and different methodologies for styling such as inline styles, CSS modules, and styled components. Key components mentioned include browser support, debugging features, and innovations like CSS3 variables and web components.
CSS in React - The Good, The Bad, and The Ugly
- 6. Today’s Plan
- 14. COMPONENT REACT
- 15. CSS…
- 16. GOOD
- 17. FamiliarityGOOD
- 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
- 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
- 50. React with Inline Styles
- 56. React with Inline Styles
- 57. React with Inline Styles
- 58. React with Inline Styles
- 59. React with Inline Styles
- 61. Radium
- 67. Radium
- 68. Radium
- 69. Radium
- 71. 5,037
- 74. 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
- 75. 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
- 76. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality ShoppingCart.js VideoItem.js button.js Separation of Concerns
- 77. 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
- 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
- 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
- 119. 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 ElementStyled ComponentReact Component React Styled Components
- 126. Styled Components StylesElement Styles Styled Component
- 127. Styled Components StylesElement Styles Styled Component StyledButton
- 132. Styled Components
- 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. “ ”