CSS Modules

Definition

Système qui scope automatiquement les classes CSS à un composant via un hash unique au build. On importe les styles comme un objet JS et les noms de classes sont générés automatiquement.

Analogie

Comme des badges nominatifs uniques dans une conférence : impossible que deux personnes aient le même.

Exemple de code

/* Button.module.css */
.primary { background: blue; }

// Button.tsx
import styles from './Button.module.css';
const Button = () => (
  <button className={styles.primary}>OK</button>
);
/* Rendu: class="Button_primary_x7ks2" */

Cas d'usage

Projets React/Vue avec bundler pour isoler les styles par composant sans convention de nommage.

Anti-pattern

Termes lies