CSS in React - Will Change Transform

.css__in--react {
will-change: transform;
}

@BODY fo(fa=he,si=18)
@P co(nu=3,wi=80)
(BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
)
h1.font.size = 24pt 100%
*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A
(element H1
(make paragraph
font-size: 14pt
font-weight: 'bold))
(style a
(block #f) ; format as inline phrase
(color blue) ; in blue if you’ve got it
(click (follow (attval 'href))) ; and on click, follow url
LI {
VertPos: Top = LeftSib . Actual Bottom;
}
A {
if (getAttribute(self, "href") != "") then
fgColor = "blue";
underlineNumber = 1;
endif
}
tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with (tags.H3) {
color = "green";
}
classes.punk.all.color = "#00FF00"
ids.z098y.letterSpacing = "0.3em"

RRP
@BODY fo(fa=he,si=18)
@P co(nu=3,wi=80)
PWP
(BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
)
CHSS
RRP
*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A
DSSSL
(element H1
(make paragraph
font-size: 14pt
font-weight: 'bold))
RRP
(style a
(block #f) ; format as inline phrase
(color blue) ; in blue if you’ve got it
(click (follow (attval 'href))) ; and on click, follow url
PSL
LI {
VertPos: Top = LeftSib . Actual Bottom;
}
A {
if (getAttribute(self, "href") != "") then
fgColor = "blue";
underlineNumber = 1;
endif
}
JSSS
tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with (tags.H3) {
color = "green";
}
classes.punk.all.color = "#00FF00"
ids.z098y.letterSpacing = "0.3em"
Pre-CSS
1993-1996

JavaScript MVC Components
💄!11

CSS Modular CSS CSS in JS
OOCSS
SMACS
SUIT
BEM
ATOMIC
💄

Super Powers
of CSS in React
- Automation
- Sharable
- Adaptable
- Scalable
- Maintainable

Giving up Control,
actually gives you more
control and new
Super Powers

There are only
2 hard problems in
Computer Science:
cache invalidation &
naming things
Phil Karlton from Netscape

regular css imports
.btn {
color: #fff;
background: pink; 
}
button.css
import './button.css'

css-modules
import styles from './button.css'
.btn {
color: #fff;
}
button.css

css-modules
import styles from './button.css'
console.log(styles)
> {
“btn": "button_btn_2Yt"
}
.btn {
color: #fff;
}
button.css

import React from 'react'
import CSSModules from ‘react-css-modules'
import styles from ‘./button.css’
@CSSModules(styles)
const Button = ({ children }) =>
<button styleName=“btn”>
{children}
</button>
React CSS Modules
Buy
.btn {
color: #fff;
}
button.css

React CSS Modules
.btn {
color: #fff;
}
.button_btn_2Yt {
color: #fff;
background-color: pink;
}
<button class="button_btn_2Yt">
Buy
</button>
browser
import CSSModules from ‘react-css-modules'
import styles from ‘./button.css’
@CSSModules(styles)
const Button = ({ children }) =>
<button styleName=“btn”>
{children}
</button>
// render
<Button>Buy</Button>
button.css
Buy

DeCSS
.Button {
color: #fff;
background: orange;
}
import { Button } from './Button.css'
Button.css

DeCSS
.Button {
color: #fff;
background: orange;
}
const MyButton = ({ children }) => (
<Button tag="button">
{children}
</Button>
)
// render
<MyButton>Buy</MyButton>
Button.css

DeCSS
.Button {
color: #fff;
background: orange;
}
.button_Button_2V6 {
color: #fff;
background: orange;
}
<button class="button_Button_2V6">
Buy
</button>
browser
const MyButton = ({ children }) => (
<Button tag="button">
{children}
</Button>
)
// render
<MyButton>Buy</MyButton>
Button.css
Buy

Bootstrap Nation
122K
2nd largest project on Github

<button id="btn"> 
Buy 
</button>
Buy
HTML

<button id="btn"> 
Buy 
</button>
$("#btn").click(() => {
// take money 
}
Buy
HTML JavaScript

<Button onClick="this.takeMoney"> 
Buy 
</Button>
HTML in JavaScript
Buy

<button className="btn"> 
Buy 
</button>
.btn {
color: #fff;
}
Buy
HTML CSS

classNames > Components
.glue_to_ui { /** **/ }

Styled Components
Buy
import styled from 'styled-components'

Styled Components
Buy
const Button = styled.button`
color: #fff;
`

Styled Components
Buy
const Button = styled.button`
color: #fff;
` .ctyFSz {
color: #fff;
}
.sc-bdVaJa {
}
<button class="sc-bdVaJa ctyFSz”>
Buy
</button>
browser
Buy
// render

Styled Components
Buy
43
// shared-lib
export const Shared = ({ className }) => (
<div className={ className }>Sharing is caring!</div>
)
// our-app
import { Shared } from 'shared-lib'

Styled Components
Buy
44
// shared-lib
)
// our-app
const Wrapped = styled(Shared)`color: pink;`

Styled Components
Buy
45
// shared-lib
)
// our-app
const Wrapped = styled(Shared)`color: pink;`
<Shared />
Sharing is caring!
<Wrapped />
Sharing is caring!

Glamorous
Buy
import React from ‘react'
import glamorous from 'glamorous'

Glamorous
Buy
const Button = glamorous.button({
color: '#fff',
backgroundColor: 'pink'
})

Glamorous
Buy
const Button = glamorous.button({
color: '#fff',
backgroundColor: 'pink'
}) .css-glamorous-button--1yceljy,
[data-css-glamorous-button--1yceljy] {
color: #fff;
}
<button
class="css-glamorous-button--1yceljy">
Button
</button>
browser
Buy
// render

Emotion
Buy
50
import { css } from 'emotion'
const base = css({
fontWeight: 600
})
const child = css`
${base};
color: pink;
background-color: black;
`
<p className={ child }>
Inheriting base styles
</p>
Inheriting base styles

Buy
54
import { width } from 'styled-system'
const Box = styled.div`${width}`
const responsiveWidths = [ 1, 1/2, 1/4 ]
const App = () => (
<Box width={ responsiveWidths }>
100% below smallest breakpoint
50% from next breakpoint up
25% from next breakpoint up
</Box>
)
Styling Layout
Styled System

Styling State
Styled Components
Buy
56
<Password />
Enter Password
const Input = styled.input`padding: 5px;`
const Password = Input.extend.attrs({
placeholder: 'Enter Password’
})
`
border-color: black;
`
<Input />

Styling State
Styled Components
Buy
57
<Password />
Enter Password
const Input = styled.input`padding: 5px;`
const Password = Input.extend.attrs({
placeholder: 'Enter Password’
})
`
border-color: ${props => props.error ? 'red' : 'black'};
`
<Password error />
Enter Password
<Input />

DeCSS
.Button {
color: #fff;
background: orange;
}
.Button-danger {
background: red;
}
const MyButton = ({ children, danger }) => (
<Button tag=“button" danger={ danger }>
{children}
</Button>
)
Button.css

DeCSS
.Button {
color: #fff;
background: orange;
}
.Button-danger {
background: red;
}
<Button tag=“button" danger={ danger }>
{children}
</Button>
)
Button.css
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'decss-loader/react',
'css-loader?modules
]
},
]
}
webpack.config

DeCSS
.Button {
color: #fff;
background: orange;
}
.Button-danger {
background: red;
}
<Button tag="button" danger={ danger }>
{children}
</Button>
)
// render
<MyButton danger>Buy</MyButton>
Button.css
.button_Button_2V6 {
color: #fff;
background: orange;
}
.button_Button-danger_2nt {
background: red;
}
<button class="button_Button-danger_2nt
button_Button_2V6">
Buy
</button>
browser
Buy

Buy
61
Styling Elements
Global Styling
// Emotion
// set color of nav globally
const MyNav = styled(Nav)`
:global(.nav) {
color: pink;
}
`
// set box-sizing on all HTML elements
import { injectGlobal } from 'emotion'
injectGlobal`
* {
box-sizing: border-box;
}
`
/* CSS Modules */
// set color of nav globally
:global .nav {
color: pink;
}

dealing with
Dead & Unused CSS

Example Scenario
Buy
65
import './input.css'
const C1 = () => <input className="c1" />
input.css
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}

Buy
66
const App = () => <div><C1 /><C2 /></div>
<style type="text/css">
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}
</style>
input.css
browser
Example Scenario
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}

Stop Using <C2 />
Buy
67
const App = () => <div><C1 /></div>
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}
input.css
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}
</style>
browser

Unused CSS
Buy
68
input.css
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}
</style>
browser
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}

Delete <C2 />
Buy
69
input.css
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}
</style>
browser
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}

Dead CSS
Buy
70
input.css
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}
</style>
browser
.c1 {
padding: 1em;
}
.c2 {
padding: 2em
}

Buy
71
import styled from 'react-emotion'
const C1 = styled.input`padding: 1em`
const App = () => <div><C1 /><C2 /></div>
<style type="text/css" data-emotion="">
.css-1ylegpj-C1 {
padding:1em;
}
.css-12zs2me-C2 {
padding:2em;
}
</style>
App.js
browser
using
Styled Components

Buy
72
.css-1ylegpj-C1 {
padding:1em;
}
</style>
browser
there’s
No Unused / Dead CSS

Buy
73
.css-1ylegpj-C1 {
padding:1em;
}
</style>
browser
automatic
Critical CSS

74
testing styles using
Snapshots

Buy
75
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`color: pink;`
Snapshots

Buy
76
test('Button renders correctly', () => {
const button = renderer.create(<Button />).toJSON()
expect(button).toMatchSnapshot()
expect(button).toHaveStyleRule('color', 'pink')
})
Snapshots

Buy
77
})
Snapshots

Buy
78
})
Snapshots
exports[`Button renders correctly 1`] = `
.c0 {
color: pink;
}
<button
className="c0"
/>
`;
Button.spec.js.snap

Buy
79
})
jest --watch
Snapshots

82
Server Side Rendering
CSS in JS

Buy
83
import { renderStylesToString } from 'emotion-server'
import { renderToString } from 'react-dom/server
import App from './App'
const html = renderStylesToString(renderToString(<App />))

Buy
84
<!DOCTYPE html>
<html lang="en">
<body><div id="root"><main data-reactroot=""><div><style data-emotion-
css="66u5jz">.css-66u5jz{padding:1em;}</style><input class="css-66u5jz e1c3ej80"/><style
data-emotion-css="186egwm">.css-186egwm{padding:2em;}</style><input class="css-186egwm
e1c3ej81"/></div></main></div>
<script type="text/javascript" src="/runtime.js"></script><script type="text/javascript"
src="/vendors~main.js"></script><script type="text/javascript" src="/main.js"></script></
body>
</html>
browser

Buy
85
<!DOCTYPE html>
<html lang="en">
body>
</html>
browser

Buy
86
<!DOCTYPE html>
<html lang="en">
body>
</html>
browser

87
Right To Left Support
CSS in JS

CSS & i18n
Right to Left
88
import rtlCSSJS from 'rtl-css-js'
const styles = {
marginLeft: '50px',
borderLeft: '10px solid black',
background: 'linear-gradient(to left, pink, orange)'
}
const rtl = rtlCSSJS(styles)
console.log(JSON.stringify(rtl, null, ' '))
> {
"marginRight": "2em",
"borderRight": "10px solid black",
"background": "linear-gradient(to right, pink, orange)"
}

CSS & i18n
Right to Left
89
import rtlCSSJS from 'rtl-css-js'
const styles = {
marginLeft: '50px',
borderLeft: '10px solid black',
background: 'linear-gradient(to left, pink, orange)'
}
const rtl = rtlCSSJS(styles)
console.log(JSON.stringify(rtl, null, ' '))
>
{
"marginRight": "2em",
"borderRight": "10px solid black",
"background": "linear-gradient(to right, pink, orange)"
}

creating
Themes
91
import glamorous, { ThemeProvider } from 'glamorous'
const dark = { color: ‘pink’, background: ‘black’ }
const light = { color: ‘black’, background: ‘gray’ }
const Box = glamorous.div(({ theme }) => ({
color: theme.color, background: theme.background;
}))

creating
Themes
92
}))
export default class App extends Component {
render () {
return(
<ThemeProvider theme={ dark }>
<Box>Theme color</Box>
</ThemeProvider>
)
}
}

creating
Themes
93
}))
render () {
return(
<ThemeProvider theme={ dark }>
</ThemeProvider>
)
}
}
Theme color

creating
Themes
94
}))
render () {
return(
<ThemeProvider theme={ light }>
</ThemeProvider>
)
}
}
Theme color

Kent C. Dodds
@kentcdodds
Mark Dalgleish
@markdalgleish
Oleg Isonen
@oleg008
Michele Bertoli
@MicheleBertoli
Tom Raviv
@RavivTom
Bruce Lawson
@brucel
Sunil Pai
@threepointone
Sultan Tarimo
@thysultan
Kye Hohenberger
@tkh44
Patrick Arminio
@patrick91
Phil Pluckthun
@_philpl
Max Stoiber
@mxstbr
Glen Maddern
@glenmaddern
Superpowers CSS in JS LeadersFrameworks
Styled Components
Emotion
Glamorous
Styled System
Glamor
React CSS Modules
Automation
Shareable
Adaptable
Scaleable
Maintainable
Joe Seifi
@joeseifi http://seifi.org https://github.com/joeshub/css-in-react
Christopher Chedeau
@vjeux
DeCSS

CSS in React - Will Change Transform

More Related Content

What's hot (20)

Similar to CSS in React - Will Change Transform (20)

Recently uploaded (20)

CSS in React - Will Change Transform