Alternatives (Emotion, Stitches, etc.)

Styled-Components 🟡 Mid

Definition

Ecosysteme de librairies CSS-in-JS alternatives : Emotion (API similaire + css prop), Stitches (variants), Vanilla Extract (zero-runtime), Panda CSS (build-time).

Analogie

Differentes marques de voiture : meme but (se deplacer), moteurs et options differents.

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 adaptee aux contraintes du projet (perf, DX, SSR).

Termes lies

#styling#interview#css-in-js