The document discusses various techniques for managing CSS in React applications in a maintainable way. It describes how CSS modules, Styled Components, and other libraries can help avoid issues like unused CSS selectors and classes by scoping styles and preventing dead code. It also discusses how style components and snapshots can help test CSS rules.
61. 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;
}
83. Buy
83
import React from 'react'
import { renderStylesToString } from 'emotion-server'
import { renderToString } from 'react-dom/server
import App from './App'
const html = renderStylesToString(renderToString(<App />))
Server Side Rendering
84. Buy
84
import React from 'react'
import { renderStylesToString } from 'emotion-server'
import { renderToString } from 'react-dom/server
import App from './App'
const html = renderStylesToString(renderToString(<App />))
<!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
Server Side Rendering
85. Buy
85
import React from 'react'
import { renderStylesToString } from 'emotion-server'
import { renderToString } from 'react-dom/server
import App from './App'
const html = renderStylesToString(renderToString(<App />))
<!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
Server Side Rendering
86. Buy
86
import React from 'react'
import { renderStylesToString } from 'emotion-server'
import { renderToString } from 'react-dom/server
import App from './App'
const html = renderStylesToString(renderToString(<App />))
<!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
Server Side Rendering
98. 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