Approche ou chaque classe CSS ne fait qu'une seule chose. Les outils comme Tailwind, Griffel ou Stylex generent des classes atomiques pour minimiser la taille du CSS.
Un alphabet : chaque lettre est simple, mais tu peux ecrire 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 : Reduire drastiquement la taille du CSS final car les declarations sont partagees entre composants.
Plugin PostCSS qui ajoute automatiquement les prefixes vendeur (-webkit-, -moz-, etc.) selon la liste de navigateurs cibles (browserslist). Plus besoin de les ecrire manuellement.
Un traducteur qui ajoute automatiquement les sous-titres dans toutes les langues necessaires.
/* 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 compatibilite navigateurs sans ecrire manuellement les prefixes vendeur.
API de Vanilla Extract pour definir des themes type-safe via des CSS custom properties. Genere un contrat de theme et des classes de theme interchangeables.
Un contrat de location : le theme definit les regles (variables), chaque variante les remplit differemment.
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 : Creer un systeme de theming type-safe et zero-runtime avec des variantes (light/dark).
Technique qui extrait le CSS necessaire au rendu initial (above the fold) et l'inline dans le HTML. Le reste est charge en asynchrone pour accelerer le First Paint.
Mettre les vetements 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 : Ameliorer les metriques FCP et LCP en evitant le blocage du rendu par le CSS externe.
Plugin PostCSS de minification CSS. Supprime les espaces, commentaires, raccourcit les couleurs et proprietes pour reduire la taille du fichier CSS final.
Un compresseur de valise : meme 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 : Reduire la taille du CSS en production pour ameliorer les temps de chargement.
Prop speciale d'Emotion qui permet d'appliquer des styles directement sur un element JSX sans creer un styled component. Accepte un objet ou un template literal.
Ecrire une note directement sur l'element au lieu de creer une etiquette nommee.
/** @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 element unique sans creer un styled component dedie.
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 : Creer un systeme de theming performant qui fonctionne avec CSS-in-JS ET du CSS classique.
Librairie qui cree des variantes de composants type-safe avec des classes CSS (Tailwind). Definit base, variants, compoundVariants et defaultVariants.
Un configurateur de voiture : tu choisis couleur, taille, options, et il genere 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 : Creer des composants Tailwind avec des variantes type-safe sans styled-components.
Standard de representation des decisions 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 (utilisee dans Fluent UI) qui genere du CSS atomique. Supporte l'ahead-of-time compilation et le merge intelligent de styles.
Le systeme 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 necessitant du CSS atomique avec compilation AOT.
Outil Rust ultra-rapide (ex-Parcel CSS) qui parse, transforme, prefixe 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'eclair.
// 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 zero-runtime avec une syntaxe tagged template literals (comme styled-components). Le CSS est extrait au build, zero JS en prod.
styled-components qui fait un regime : meme 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 zero-runtime sans changer la syntaxe.
Framework CSS-in-JS zero-runtime avec une DX proche de Chakra UI. Genere 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 : meme confort, zero 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 zero-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 chaine 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 : prefixes, minification, Tailwind, nesting.
API de Vanilla Extract pour creer des composants a variantes (comme les CVA). Definit base, variants, compoundVariants et defaultVariants avec du typage complet.
Un formulaire de commande : tu coches les options (taille, couleur) et le systeme genere 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 : Creer des composants avec des variantes combinables de facon type-safe au build-time.
Syntaxe objet pour definir des valeurs responsives dans les librairies CSS-in-JS (Chakra, Panda, Theme UI). Chaque breakpoint est une cle de l'objet.
Un emploi du temps par jour de la semaine : chaque jour (breakpoint) a une activite differente.
// 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 : Definir des styles responsifs de facon declarative sans media queries manuelles.
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.
Runtime c'est cuisiner sur place (frais mais lent), zero-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 .cssCas d'usage : Choisir zero-runtime pour les apps critiques en performance, runtime pour la flexibilite.
API de Vanilla Extract qui genere des utilitaires atomiques type-safe (similaire a Tailwind mais avec du TypeScript). Cree un ensemble fini de classes utilitaires au build.
Un set d'epices pre-dosees : 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 : Creer un systeme d'utilitaires CSS atomiques type-safe et zero-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 simultanement.
// config.json
{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "build/",
"files": [{ "format": "css/variables" }]
}
}
}Cas d'usage : Generer automatiquement les variables CSS, Sass et JS a partir d'une source unique de tokens.
Linter CSS/Sass/CSS-in-JS configurable avec des regles de qualite et de convention. Detecte les erreurs, enforce un style coherent et empeche 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'equipe et detecter les erreurs avant la review.
Valeurs de design abstraites (couleurs, espacements, ombres) stockees comme tokens et consommees par le systeme de style. Forment le vocabulaire du design system.
Les ingredients 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 coherence visuelle du projet.
Framework CSS-in-JS zero-runtime avec typage TypeScript complet. Les styles sont ecrits en .css.ts et extraits en CSS statique au build. Zero JavaScript en production.
Un architecte qui dessine les plans (TypeScript) et le batiment 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.
Autres stacks