css in react - the good, the bad, and the ugly
TRANSCRIPT
JOE SEIFI
@joeseifi
Today’s Plan
COMPONENT
REACT
CSS
COMPONENT
REACT
CSS…
GOOD
FamiliarityGOOD
FamiliarityMatured browser support
GOOD
From caniuse.com
FamiliarityMatured browser supportContinuous growth
GOOD
FamiliarityMatured browser supportContinuous growth
GOOD
BAD Naming
FamiliarityMatured browser supportContinuous growth
GOOD
BAD NamingNot DRY
FamiliarityMatured browser supportContinuous growth
GOOD
BAD NamingNot DRY Developer Experience
FamiliarityMatured browser supportContinuous growth
GOOD
BAD NamingNot DRY Developer ExperienceDOM updates require JS
FamiliarityMatured browser supportContinuous growth
GOOD
BAD NamingNot DRY Developer ExperienceDOM updates require JS
UGLY Globals
FamiliarityMatured browser supportContinuous growth
GOOD
BAD NamingNot DRY Developer ExperienceDOM updates require JS
UGLY GlobalsCascades
FamiliarityMatured browser supportContinuous growth
GOOD
BAD NamingNot DRY Developer ExperienceDOM updates require JS
UGLY GlobalsCascadesSpecificity
FamiliarityMatured browser supportContinuous growth
GOOD
BAD NamingNot DRY Developer ExperienceDOM updates require JS
UGLY GlobalsCascadesSpecificitySource Order
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
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
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
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
React with CSS Loader
.btn
btn:hover
btn.depressed
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with CSS Loader
React with Inline Styles
styles.btn
:hover
styles.btn.depressed
React with Inline Styles
styles.btn
:hover
styles.btn.depressed
React with Inline Styles
styles.btn
:hover
styles.btn.depressed
React with Inline Styles
styles.btn
:hover
styles.btn.depressed
React with Inline Styles
styles.btn
:hover
styles.btn.depressed
X
React with Inline Styles
React with Inline Styles
React with Inline Styles
React with Inline Styles
React with Inline Styles
Radium
css pseudoclasses &elements
:active
:focus
:hover
Radium
: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 pseudoclasses &elements
:active
:focus
:hover
Radium
styles.btn
‘:hover’
styles.btn.depressed
Radium
styles.btn
‘:hover’
styles.btn.depressed
Radium
styles.btn
‘:hover’
styles.btn.depressed
Radium
Radium
Radium
Radium
5,037
ShoppingCart.js
VideoItem.js
global.css
Button.jsbutton.css
shopping-cart.cssShoppingCart.js
VideoItem.js video-item.css
button.js
Separation of Concerns
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
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
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
ShoppingCart.js
VideoItem.js
global.css
Button.js
Languages Separation of Functionality
ShoppingCart.js
VideoItem.js
button.js
Separation of Concerns
Aphrodite
Regular Inline Styles
Aphrodite
Regular Inline Styles Aphrodite Wraps Styles Object
Aphrodite
Regular Inline Styles Aphrodite Wraps Styles Object
Aphrodite
Rendered
Regular Inline Styles Aphrodite Wraps Styles Object
Aphrodite
Rendered
Regular Inline Styles Aphrodite Wraps Styles Object
Aphrodite
Rendered
Regular Inline Styles Aphrodite Wraps Styles Object
Aphrodite
Output
Aphrodite
Aphrodite
Aphrodite
Aphrodite
5,037
2,627
React CSS Modules
React CSS Modules
}
Original .button CSS
.button_btn_18iwj {
}
{ btn: “button_btn_18iwj” }
Generated CSS
JS maps classnames
React CSS Modules
}
Original .button CSS
.button_btn_18iwj {
}
{ btn: “button_btn_18iwj” }
Generated CSS
JS maps classnames
React CSS Modules
}
Original .button CSS
.button_btn_18iwj {
}
{ btn: “button_btn_18iwj” }
Generated CSS
JS maps classnames
React CSS Modules
}
Original .button CSS
React CSS Modules
React CSS Modules
React CSS Modules
React CSS Modules
React CSS Modules
React CSS Modules
React CSS Modules
React CSS Modules
React CSS Modules
5,037
2,627
3,414
Styletron
Styletron
Source style objects
Generated CSS
{ color: ‘#ec4800’ font: ‘bold 32px’ }
Styletron
Source style objects
Generated CSS
{ font: ‘bold 32px’ text-align: ‘center’ }
{ color: ‘#ec4800’ font: ‘bold 32px’ }
Styletron
Source style objects
Generated CSS
{ font: ‘bold 32px’ text-align: ‘center’ }
{ color: ‘#ec4800’ font: ‘bold 32px’ }
{ text-align: ‘center’ color: ‘#ec4800’ }
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 }
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 }
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 }
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”
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”
.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
.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
Styletron
Styletron
Styletron
5,037
2,627
3,414
1,472
Styled Components
JSHTMLElement
React Styled Components
HTMLElementReact Component
React Styled Components
HTMLElement StylesHTML
ElementReact Component
React Styled Components
HTMLElement
HTMLElementStyled ComponentReact Component
React Styled Components
Styled Components
StylesElement
Styled Component
Styled Components
StylesElementElement
Styled Component
Styled Components
StylesElement Styles
Styled Component
Styled Components
StylesElement Styles
Styled Component
StyledButton
Styled Components
StyledButton
Styled Components
Rendered
StyledButton
Styled Components
Output
Rendered
StyledButton
Styled Components
Output
Rendered
StyledButton
Styled Components
5,037
2,627
3,414
1,472
5,174
CSS IN REACT InnovationsNow & Future
CSS IN REACT InnovationsNow & Future
CSS3 Variables
CSS IN REACT InnovationsNow & Future
Typed CSS
CSS IN REACT InnovationsNow & Future
Web Components
CSS IN REACT InnovationsNow & Future
Vue.js & Scoped Styles
- 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.
“
”
Q&A
@joeseifi • https://github.com/joeshub/css-in-react