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

Transcript

2. JOE SEIFI @joeseifi
6. Today’s Plan
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
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
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
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
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