What CSS in JS offers
CSS in JS writes styles inside JavaScript, colocated with the component. This gives you scoped styles, dynamic values from props, and dead code elimination when a component is removed.
- Styles live next to the component that uses them
- Props can drive styles directly with full JavaScript logic
- Unused components take their styles with them
The runtime cost
Many CSS in JS libraries generate and inject styles at runtime, in the browser. That adds work on every render and can hurt time to first paint.
- Runtime injection blocks paint while the library serializes styles
- It ships a styling engine in your bundle
- Server rendering must carefully extract critical styles
Build time alternatives
Zero runtime libraries extract the styles to a static CSS file at build time, keeping colocation and scoping while removing the browser cost. Utility CSS frameworks reach a similar end through atomic classes.
Key idea
CSS in JS gives colocation and dynamic styling, but runtime injection costs paint time, so prefer zero runtime or build time extraction when performance matters.