Alternatives (Emotion, Stitches, etc.)

Styled-Components 🟡 Mid

Définition

Écosystème de librairies CSS-in-JS alternatives : Émotion (API similaire + css prop), Stitches (variants), Vanilla Extract (zéro-runtime), Panda CSS (build-time).

Analogie

Différentes marques de voiture : même but (se déplacer), moteurs et options différents.

Exemple de code

// Emotion
import { css } from '@emotion/react'
<div css={css`color: red;`} />

// Vanilla Extract
import { style } from '@vanilla-extract/css'
const box = style({ color: 'red' })

Cas d'usage

Choisir la librairie CSS-in-JS adaptée aux contraintes du projet (perf, DX, SSR).

#styling#interview#css-in-js

← → au clavier pour passer d'une fiche à l'autre