Runtime vs Zero-Runtime CSS-in-JS

Definition

Runtime (styled-components, Emotion) genere le CSS dans le navigateur. Zero-runtime (Vanilla Extract, Linaria) extrait le CSS au build, zero JS en prod pour le styling.

Analogie

Runtime c'est cuisiner sur place (frais mais lent), zero-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 zero-runtime pour les apps critiques en performance, runtime pour la flexibilite.

Anti-pattern

Termes lies