Modules CSS : styles à portée limitée
Limitez automatiquement la portée des noms de classes aux composants locaux à l’aide des modules CSS dans votre configuration de compilation.
Modules CSS : styles à portée limitée est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Que sont les modules CSS ?
Les modules CSS limitent automatiquement la portée des noms de classe CSS au fichier du composant dans lequel ils sont définis. Chaque nom de classe est transformé en identifiant unique lors de la compilation, ce qui empêche la propagation accidentelle des styles globaux.
Convention de nommage des fichiers
Nommez votre fichier CSS avec .module.css (ou .module.scss pour Sass) :
/* Button.module.css */
.button {
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
}Importer des modules CSS
Importez le module en tant qu'objet JavaScript. Les noms de classe deviennent des propriétés :
import styles from './Button.module.css';
function Button({ children }) {
return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)Classes composées
Utilisez composes pour étendre une classe provenant d'un autre module :
/* Button.module.css */
.primary {
composes: base from "./Base.module.css";
background: royalblue;
}Classes globales
Utilisez :global() pour désactiver la limitation locale de portée d'une classe donnée :
/* styles.module.css */
.container :global(.third-party-class) {
/* targets third-party className without scoping */
color: red;
}Modules CSS dans Vite
Vite intègre la prise en charge des modules CSS. Les fichiers correspondant à *.module.css sont traités automatiquement :
// vite.config.js
export default {
css: {
modules: {
localsConvention: 'camelCase' // .my-class → styles.myClass
}
}
}Modules CSS avec webpack
Activez les modules dans la configuration de css-loader :
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
}Composition de noms de classe
Combinez plusieurs classes de module à l'aide de littéraux de modèle ou des bibliothèques clsx/classnames :
import styles from './Card.module.css';
import clsx from 'clsx';
function Card({ featured }) {
return (
<div className={clsx(styles.card, featured && styles.featured)}>
Content
</div>
);
}Aucun coût à l'exécution
Les modules CSS sont entièrement résolus lors de la compilation : JavaScript ne génère aucune surcharge à l'exécution. La sortie est du CSS standard dont les noms de classe ont été renommés. Cela les rend idéaux pour les applications où les performances sont essentielles.
Prise en charge de TypeScript
Générez des définitions de types TypeScript pour les modules CSS à l'aide de typed-css-modules ou de la configuration cssModuleTypes de Vite afin d'accéder aux noms de classe avec vérification de type.
Modules CSS ou CSS-in-JS
Comparaison des modules CSS :
- Uniquement à la compilation — aucun coût JS à l'exécution
- S'intègre au CSS/Sass standard — syntaxe familière
- Pas de styles dynamiques par interpolation JS
- Moins flexible que styled-components/Emotion pour les styles dynamiques pilotés par un thème
Vérification rapide
Comment un module CSS empêche-t-il les collisions de noms de classe entre deux fichiers de composants différents ?
Récapitulatif
Les modules CSS limitent automatiquement la portée des noms de classe en les transformant en identifiants uniques lors de la compilation. Importez-les en tant qu'objets JavaScript et accédez aux classes comme à des propriétés. Utilisez :global() pour exclure certains sélecteurs de la portée locale et composes pour composer des classes. Leur coût nul à l'exécution et leur prise en charge complète de la syntaxe CSS/Sass en font une alternative légère au CSS-in-JS pour les styles statiques.
Questions Fréquemment Posées
La leçon « Modules CSS : styles à portée limitée » est-elle gratuite ?
Oui — le texte complet de « Modules CSS : styles à 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modules CSS : styles à portée limitée » ?
Limitez automatiquement la portée des noms de classes aux composants locaux à l’aide des modules CSS dans votre configuration de compilation. Tu pratiques CSS 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 CSS Academy ?
Aucune expérience préalable n'est requise. CSS 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 3 sur 4.
Combien de temps prend la leçon « Modules CSS : styles à 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 CSS Academy ?
Oui. Chaque leçon CSS 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
- Styled-components : littéraux de modèle balisés
- Emotion : css() et styled()
- Modules CSS : styles à portée limitée
- Vanilla Extract : CSS-in-JS sans exécution