Runtime vs Zero-Runtime CSS-in-JS

Définition

Runtime (styled-components, Émotion) : le CSS est généré dans le navigateur à l'exécution. Zéro-runtime (Vanilla Extract, Linaria, Panda, StyleX) : le CSS est extrait au build, zéro JS de styling en production. Avec les Server Components, les librairies runtime doivent être confinées à des Client Components ('use client') et passer par un registre de styles ; styled-components est d'ailleurs en mode maintenance depuis le 17 mars 2025, son mainteneur déconseillant son adoption sur un nouveau projet.

Analogie

Runtime c'est cuisiner sur place (frais mais lent), zéro-runtime c'est un plat pre-cuisine (rapide a servir).

Exemple de code

// Runtime : CSS genere dans le navigateur
const Box = styled.div`color: red;`

// Zero-runtime : CSS extrait au build
// box.css.ts
import { style } from '@vanilla-extract/css'
export const box = style({ color: 'red' })
// => .box_abc123 { color: red } en .css

Cas d'usage

Choisir zéro-runtime (ou Tailwind/CSS Modules) pour tout projet neuf, surtout avec Next.js App Router ; garder le runtime sur l'existant.

Anti-pattern

Termes liés

Sources

• nextjs.org/docs/app/guides/css-in-js
• opencollective.com/styled-components/updates/thank-you