CSS-in-JS 23 termes

Approche ou chaque classe CSS ne fait qu'une seule chose. Les outils comme Tailwind, Griffel ou Stylex génèrent des classes atomiques pour minimiser la taille du CSS.

Un alphabet : chaque lettre est simple, mais tu peux écrire tous les mots en les combinant.

/* Atomic CSS genere */
.a { display: flex; }
.b { padding: 8px; }
.c { color: blue; }

/* Usage */
<div class="a b c">...</div>
/* Au lieu de: .card { display:flex; padding:8px; color:blue; } */

Cas d'usage : Réduire drastiquement la taille du CSS final car les déclarations sont partagées entre composants.

Plugin PostCSS qui ajoute automatiquement les préfixes vendeur (-webkit-, -moz-, etc.) selon la liste de navigateurs cibles (browserslist). Plus besoin de les écrire manuellement.

Un traducteur qui ajoute automatiquement les sous-titres dans toutes les langues nécessaires.

/* Input */
.box { display: flex; user-select: none; }

/* Output avec Autoprefixer */
.box {
  display: -webkit-flex;
  display: flex;
  -webkit-user-select: none;
  user-select: none;
}

Cas d'usage : Garantir la compatibilité navigateurs sans écrire manuellement les préfixes vendeur.

API de Vanilla Extract pour définir des themes type-safe via des CSS custom properties. Génère un contrat de theme et des classes de theme interchangeables.

Un contrat de location : le theme définit les règles (variables), chaque variante les remplit différemment.

import { createTheme } from '@vanilla-extract/css'

const [themeClass, vars] = createTheme({
  color: { primary: 'blue', bg: 'white' },
  space: { sm: '0.5rem', md: '1rem' },
})
// vars.color.primary => var(--xxx)

Cas d'usage : Créer un système de theming type-safe et zéro-runtime avec des variantes (light/dark).

Technique qui extrait le CSS nécessaire au rendu initial (above the fold) et l'inline dans le HTML. Le reste est charge en asynchrone pour accélérer le First Paint.

Mettre les vêtements essentiels dans ton bagage a main et le reste en soute.

<!-- HTML inline critical CSS -->
<head>
  <style>.hero{display:flex;height:100vh;}</style>
  <link rel="preload" href="/styles.css" as="style"
    onload="this.rel='stylesheet'">
</head>

Cas d'usage : Améliorer les métriques FCP et LCP en évitant le blocage du rendu par le CSS externe.

Plugin PostCSS de minification CSS. Supprime les espaces, commentaires, raccourcit les couleurs et propriétés pour réduire la taille du fichier CSS final.

Un compresseur de valise : même contenu, mais ca prend beaucoup moins de place.

/* Avant: 234 bytes */
.card {
  background-color: #ffffff;
  margin: 0px 0px 0px 0px;
  padding: 16px;
}
/* Apres cssnano: 48 bytes */
.card{background:#fff;margin:0;padding:16px}

Cas d'usage : Réduire la taille du CSS en production pour améliorer les temps de chargement.

Prop spéciale d'Émotion qui permet d'appliquer des styles directement sur un élément JSX sans créer un styled component. Accepte un objet ou un template literal.

Écrire une note directement sur l'élément au lieu de créer une étiquette nommée.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

<div css={css`
  display: flex;
  padding: 1rem;
  &:hover { background: #f0f0f0; }
`}>
  Inline styles avec pseudo-selectors!
</div>

Cas d'usage : Styler rapidement un élément unique sans créer un styled component dédié.

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.

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

// 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 : Créer un système de theming performant qui fonctionne avec CSS-in-JS ET du CSS classique.

Librairie qui crée des variantes de composants type-safe avec des classes CSS (Tailwind). Définit base, variants, compoundVariants et defaultVariants.

Un configurateur de voiture : tu choisis couleur, taille, options, et il génère la bonne combinaison.

import { cva } from 'class-variance-authority'

const button = cva('px-4 py-2 rounded font-medium', {
  variants: {
    intent: { primary: 'bg-blue-500', danger: 'bg-red-500' },
    size: { sm: 'text-sm', lg: 'text-lg px-6 py-3' },
  },
  defaultVariants: { intent: 'primary', size: 'sm' },
})
// button({ intent: 'danger', size: 'lg' })

Cas d'usage : Créer des composants Tailwind avec des variantes type-safe sans styled-components.

Standard de représentation des décisions de design (couleurs, typo, espacement) dans un format agnostique (JSON/YAML). Convertis en CSS, Sass, JS, iOS, Android via des outils.

Une partition de musique : un format universel que chaque instrument (plateforme) peut jouer.

// tokens.json (W3C Design Token format)
{
  "color": {
    "primary": {
      "$value": "#3498db",
      "$type": "color"
    }
  }
}
// => CSS: --color-primary: #3498db;
// => Sass: $color-primary: #3498db;

Cas d'usage : Synchroniser les valeurs de design entre Figma, web, mobile et toutes les plateformes.

Librairie CSS-in-JS performante offrant deux APIs : styled (comme styled-components) et css prop (styles inline avec typage). Souvent plus rapide que styled-components.

Le couteau suisse du CSS-in-JS : plusieurs outils (styled, css prop) dans un seul package.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import styled from '@emotion/styled'

const style = css`color: red; font-size: 1.2rem;`
<div css={style}>Emotion css prop</div>

const Box = styled.div`padding: 1rem;`

Cas d'usage : Alternative performante a styled-components avec l'avantage du css prop pour du styling inline.

Librairie CSS-in-JS de Microsoft (utilisée dans Fluent UI) qui génère du CSS atomique. Supporte l'ahead-of-time compilation et le merge intelligent de styles.

Le système de style de Microsoft Office : industriel, performant, atomique.

import { makeStyles } from '@griffel/react'

const useStyles = makeStyles({
  root: {
    display: 'flex',
    padding: '8px',
    ':hover': { backgroundColor: '#f0f0f0' },
  }
})
// const styles = useStyles(); <div className={styles.root}>

Cas d'usage : Projet Microsoft/Fluent UI nécessitant du CSS atomique avec compilation AOT.

Outil Rust ultra-rapide (ex-Parcel CSS) qui parse, transforme, préfixe et minifie le CSS. Alternative tout-en-un a PostCSS + Autoprefixer + CSSNano, 100x plus rapide.

Un robot cuisinier qui fait tout (couper, mixer, cuire) a la vitesse de l'éclair.

// vite.config.js
export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(
        browserslist('>= 0.25%')
      )
    }
  }
}

Cas d'usage : Remplacer la stack PostCSS/Autoprefixer/CSSNano par un outil unique bien plus rapide.

Librairie CSS-in-JS zéro-runtime avec une syntaxe tagged template literals (comme styled-components). Le CSS est extrait au build, zéro JS en prod.

styled-components qui fait un régime : même syntaxe, mais sans le poids JavaScript en production.

import { styled } from '@linaria/react'
import { css } from '@linaria/core'

const title = css`font-size: 2rem; color: blue;`
const Box = styled.div`
  padding: 1rem;
  background: ${() => 'white'};
`

Cas d'usage : Migrer depuis styled-components vers du zéro-runtime sans changer la syntaxe.

Framework CSS-in-JS zéro-runtime avec une DX proche de Chakra UI. Génère du CSS atomique au build a partir d'une syntaxe objet. Supporte les patterns et recipes.

Le successeur spirituel de Chakra UI mais sans poids JavaScript : même confort, zéro runtime.

import { css } from '../styled-system/css'

const styles = css({
  display: 'flex',
  bg: 'blue.500',
  p: '4',
  _hover: { bg: 'blue.600' },
  md: { p: '8' },
})
<div className={styles}>Panda CSS</div>

Cas d'usage : Alternative zéro-runtime a Chakra UI avec des tokens, patterns et recipes au build.

Outil de transformation CSS via plugins. Pas un preprocesseur mais un pipeline : chaque plugin transforme le CSS (autoprefixer, nesting, custom properties). Tailwind est un plugin PostCSS.

Une chaîne de montage : chaque poste (plugin) ajoute une transformation au CSS brut.

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' }),
  ]
}

Cas d'usage : Configurer le pipeline de transformation CSS : préfixes, minification, Tailwind, nesting.

API de Vanilla Extract pour créer des composants a variantes (comme les CVA). Définit base, variants, compoundVariants et defaultVariants avec du typage complet.

Un formulaire de commande : tu coches les options (taille, couleur) et le système génère la classe.

import { recipe } from '@vanilla-extract/recipes'

export const button = recipe({
  base: { borderRadius: '4px' },
  variants: {
    color: { primary: { bg: 'blue' }, danger: { bg: 'red' } },
    size: { sm: { padding: '4px' }, lg: { padding: '16px' } },
  },
  defaultVariants: { color: 'primary', size: 'sm' },
})

Cas d'usage : Créer des composants avec des variantes combinables de façon type-safe au build-time.

Syntaxe objet pour définir des valeurs responsives dans les librairies CSS-in-JS (Chakra, Panda, Theme UI). Chaque breakpoint est une clé de l'objet.

Un emploi du temps par jour de la semaine : chaque jour (breakpoint) a une activité différente.

// Chakra UI / Panda CSS
<Box
  p={{ base: '4', md: '8', lg: '12' }}
  display={{ base: 'block', md: 'flex' }}
  fontSize={{ base: 'sm', lg: 'xl' }}
/>

Cas d'usage : Définir des styles responsifs de façon déclarative sans média queries manuelles.

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.

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

// 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.

API de Vanilla Extract qui génère des utilitaires atomiques type-safe (similaire a Tailwind mais avec du TypeScript). Créé un ensemble fini de classes utilitaires au build.

Un set d'épices pre-dosées : tu combines celles que tu veux, tout est type-safe.

import { defineProperties, createSprinkles } from
  '@vanilla-extract/sprinkles'

const props = defineProperties({
  properties: {
    padding: { sm: '4px', md: '8px', lg: '16px' },
    display: ['flex', 'grid', 'block'],
  }
})
export const sprinkles = createSprinkles(props)

Cas d'usage : Créer un système d'utilitaires CSS atomiques type-safe et zéro-runtime.

Outil d'Amazon pour transformer des design tokens JSON en variables pour chaque plateforme (CSS, Sass, JS, iOS, Android). Pipeline configurable avec des transformers.

Un traducteur automatique qui convertit un livre dans toutes les langues simultanément.

// config.json
{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "build/",
      "files": [{ "format": "css/variables" }]
    }
  }
}

Cas d'usage : Générer automatiquement les variables CSS, Sass et JS a partir d'une source unique de tokens.

Linter CSS/Sass/CSS-in-JS configurable avec des règles de qualité et de convention. Détecte les erreurs, enforce un style cohérent et empêche les anti-patterns.

Un correcteur orthographique mais pour le CSS : il souligne les fautes et propose des corrections.

// .stylelintrc.json
{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
    "no-duplicate-selectors": true,
    "color-no-invalid-hex": true
  }
}

Cas d'usage : Enforcer des conventions CSS dans l'équipe et détecter les erreurs avant la review.

Valeurs de design abstraites (couleurs, espacements, ombres) stockées comme tokens et consommées par le système de style. Forment le vocabulaire du design system.

Les ingrédients de base d'une cuisine : sel, poivre, huile. Tu les combines pour chaque recette.

const tokens = {
  colors: { primary: '#3498db', danger: '#e74c3c' },
  spacing: { xs: '0.25rem', sm: '0.5rem', md: '1rem' },
  radii: { sm: '4px', md: '8px', full: '9999px' },
  shadows: { sm: '0 1px 3px rgba(0,0,0,0.1)' },
}

Cas d'usage : Centraliser toutes les valeurs de design pour garantir la cohérence visuelle du projet.

Framework CSS-in-JS zéro-runtime avec typage TypeScript complet. Les styles sont écrits en .css.ts et extraits en CSS statique au build. Zéro JavaScript en production.

Un architecte qui dessine les plans (TypeScript) et le bâtiment est construit a l'avance (build-time).

// button.css.ts
import { style } from '@vanilla-extract/css'

export const button = style({
  padding: '0.5rem 1rem',
  background: 'blue',
  ':hover': { background: 'darkblue' },
})
// Usage: <button className={button}>

Cas d'usage : Projets ou la performance est critique et le typage TypeScript des styles est souhaite.