Modules CSS : noms de classes à portée limitée
Activez les modules CSS dans un projet Vite ou webpack pour limiter automatiquement les noms de classes au fichier du composant et éliminer les fuites de styles globaux.
Modules CSS : noms de classes à portée limitée est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les modules CSS ?
Les modules CSS transforment les noms de classes lors de la compilation afin d'y inclure une empreinte unique, ce qui les limite à la portée du fichier du composant. Une classe nommée .card devient .card_a1b2c3 : il est impossible qu'elle entre accidentellement en collision avec les styles d'autres composants.
Fonctionnement des modules CSS
Importez le fichier CSS sous forme d'objet. Utilisez les propriétés de cet objet comme noms de classes. Les outils de regroupement (Vite, webpack) gèrent la transformation.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Noms de classes dynamiques avec clsx
La bibliothèque clsx simplifie la composition conditionnelle des noms de classes avec les modules CSS.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}CSS global dans les modules CSS
Utilisez :global pour déclarer des classes qui doivent rester NOT limitées à la portée. Cela est utile pour remplacer les classes de bibliothèques tierces.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Composition — Étendre les classes
Les modules CSS prennent en charge composes pour hériter des styles d'une autre classe, y compris depuis d'autres modules.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}Modules CSS et styles à portée limitée (Vue)
Les styles à portée limitée de Vue et les modules CSS empêchent tous deux les fuites globales, mais diffèrent dans leur fonctionnement : les styles à portée limitée ajoutent des attributs de données, tandis que les modules CSS transforment les noms de classes. Les deux approches sont valides : les modules CSS fonctionnent aussi avec React.
Modules CSS dans Vite
Vite prend en charge les modules CSS immédiatement pour les fichiers se terminant par .module.css. Aucune configuration supplémentaire n'est nécessaire.
TypeScript pour les modules CSS
Installez typescript-plugin-css-modules ou générez des fichiers .d.ts pour les modules CSS avec l'outil typed-css-modules afin d'obtenir la complétion automatique des noms de classes.
Conventions de nommage dans les modules CSS
Comme les noms de classes deviennent des propriétés JavaScript, utilisez camelCase pour les noms de classes dans les modules CSS : .buttonPrimary plutôt que .button-primary (le trait d'union nécessite un accès entre crochets).
Quand utiliser les modules CSS
Les modules CSS sont excellents pour les applications React qui nécessitent des styles limités au composant, mais pour lesquelles une solution CSS-in-JS complète serait excessive. Vite associé aux modules CSS constitue une solution de style légère, sans exécution à l'exécution.
Modules CSS et CSS-in-JS
Modules CSS : aucun coût à l'exécution, CSS classique, meilleures performances. CSS-in-JS (styled-components) : styles dynamiques à l'exécution, approche centrée sur JS. Pour la plupart des applications, les modules CSS sont plus simples et plus rapides.
Vérification rapide
Qu'arrive-t-il au nom d'une classe CSS lorsque vous utilisez les modules CSS ?
Récapitulatif : modules CSS
Importez les fichiers .module.css sous forme d'objets. Les noms de classes sont automatiquement limités à la portée du composant avec une empreinte unique. Utilisez :global() pour les styles volontairement globaux. Utilisez composes pour l'héritage entre modules. Utilisez clsx pour les noms de classes conditionnels. Vite prend nativement en charge les modules CSS. Aucun coût à l'exécution, contrairement à CSS-in-JS.
Questions Fréquemment Posées
La leçon « Modules CSS : noms de classes à portée limitée » est-elle gratuite ?
Oui — le texte complet de « Modules CSS : noms de classes à portée limitée » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modules CSS : noms de classes à portée limitée » ?
Activez les modules CSS dans un projet Vite ou webpack pour limiter automatiquement les noms de classes au fichier du composant et éliminer les fuites de styles globaux. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Modules CSS : noms de classes à portée limitée » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Méthodologie BEM : bloc, élément et modificateur
- Modules CSS : noms de classes à portée limitée
- CSS-in-JS : Styled-components et Emotion
- Tailwind CSS : approche fondée sur les utilitaires