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

2. JOE SEIFI
@joeseifi

6. Today’s Plan

13. COMPONENT
REACT
CSS

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

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

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
ElementStyled ComponentReact Component
React Styled Components

124. Styled Components
StylesElement
Styled Component

125. Styled Components
StylesElementElement
Styled Component

126. Styled Components
StylesElement Styles
Styled Component

127. Styled Components
StylesElement 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