What is CSS-in-JS?
A styling technique where CSS is authored inside JavaScript, enabling scoped styles, dynamic theming, and colocated component code.
Definition
CSS-in-JS libraries such as styled-components, Emotion, and vanilla-extract let developers write styles as JavaScript, generating scoped class names at runtime or build time. Styles live next to the components that use them, can read props and theme context, and dead code is eliminated with the component itself. Runtime variants pay a performance cost—serializing styles on every render—which pushed the ecosystem toward zero-runtime compilers like Linaria and StyleX, and toward React Server Components-compatible approaches. Critics prefer CSS Modules or utility classes for simpler caching and smaller bundles.

