CSS Variables Bridge

Definition

Pattern qui utilise les CSS custom properties (--var) comme pont entre le CSS-in-JS et le CSS natif. Permet le theming dynamique sans re-render React.

Analogie

Un traducteur bilingue entre CSS-in-JS et CSS natif : les deux parlent via les variables CSS.

Exemple de code

// Definir les tokens en CSS vars
const GlobalStyle = createGlobalStyle`
  :root {
    --primary: ${({ theme }) => theme.primary};
  }
`
// Utiliser partout (meme hors styled)
.card { color: var(--primary); }

Cas d'usage

Creer un systeme de theming performant qui fonctionne avec CSS-in-JS ET du CSS classique.

Termes lies