Réduire les CSS inutilisés
Trouvez et supprimez les CSS inutilisés qui alourdissent vos feuilles de style, à l’aide d’outils de couverture, de purge et d’une conception modulaire afin de ne livrer que les règles réellement utilisées par chaque page.
Réduire les CSS inutilisés est une leçon Web Performance Optimization & Lighthouse gratuite sur CoddyKit. Ceci est la leçon 4 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 Web Performance Optimization & Lighthouse, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
The Cost of Dead CSS
Large frameworks and accumulated styles often ship rules no page uses. Unused CSS inflates download size and parse time, and because CSS is render-blocking, it directly delays first paint.
Measuring Coverage
The DevTools Coverage tab records which CSS bytes actually apply during a session. A high unused percentage signals an opportunity to trim.
Why Frameworks Bloat
Utility and component frameworks include thousands of classes for flexibility. If you use a small subset, the rest is pure dead weight unless removed at build time.
Purging Unused Rules
Tools like PurgeCSS scan your templates for class names and strip any selector not referenced, often cutting stylesheets by 90% or more.
// purgecss.config.js
module.exports = {
content: ['./src/**/*.html', './src/**/*.jsx'],
css: ['./src/styles.css']
};Tailwind's Built-In Purge
Utility frameworks like Tailwind scan your content files and generate only the classes you actually use, producing a tiny production stylesheet automatically.
// tailwind.config.js
module.exports = { content: ['./src/**/*.{html,jsx,tsx}'] };Beware Dynamic Class Names
Purgers work by string matching. Class names built dynamically can be wrongly removed. Use a safelist or full static strings to protect them.
// risky: 'bg-' + color -> may be purged
// safe: full literal
const cls = isError ? 'bg-red-500' : 'bg-green-500';Per-Route CSS
Splitting styles by route means each page loads only its own CSS instead of one global blob. Many bundlers and frameworks do this automatically with CSS code splitting.
CSS Modules and Scoping
Scoped styles via CSS Modules or single-file-component styles keep CSS tied to the component that uses it, making unused styles easier to spot and remove.
Minification
After purging, run a CSS minifier (cssnano, esbuild, lightningcss) to strip whitespace, comments, and redundant rules, and compress with Brotli or gzip in transport.
Verifying the Win
Re-run Coverage and Lighthouse after trimming. Lighthouse explicitly reports Reduce unused CSS with the estimated savings, confirming the improvement.
Workflow Summary
- Measure with the Coverage tab.
- Purge unused selectors at build.
- Safelist dynamic classes.
- Split CSS per route, then minify.
Quick Check
Your build dynamically composes class names like 'bg-' + color and they disappear in production. What is the likely cause and fix?
Recap
You learned to cut render-blocking CSS by measuring coverage, purging unused selectors, scoping styles per component and route, and minifying. Watch for dynamically built class names and safelist them so purging stays safe.
Questions Fréquemment Posées
La leçon « Réduire les CSS inutilisés » est-elle gratuite ?
Oui — le texte complet de « Réduire les CSS inutilisés » 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 Web Performance Optimization & Lighthouse, passe à CoddyKit PRO. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Réduire les CSS inutilisés » ?
Trouvez et supprimez les CSS inutilisés qui alourdissent vos feuilles de style, à l’aide d’outils de couverture, de purge et d’une conception modulaire afin de ne livrer que les règles réellement uti… Tu pratiques Web Performance Optimization & Lighthouse 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 Web Performance Optimization & Lighthouse ?
Aucune expérience préalable n'est requise. Web Performance Optimization & Lighthouse 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 4 sur 4.
Combien de temps prend la leçon « Réduire les CSS inutilisés » ?
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 Web Performance Optimization & Lighthouse ?
Oui. Chaque leçon Web Performance Optimization & Lighthouse 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
- CSS critique et diffusion du CSS
- Optimiser le chargement des polices
- Impact des performances de CSS-in-JS
- Réduire les CSS inutilisés