css in react - the good, the bad, and the ugly

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