Reducing Unused CSS
Find and eliminate dead CSS that bloats your stylesheets, using coverage tools, purging, and modular authoring to ship only the rules each page actually uses.
Reducing Unused CSS is a free Web Performance Optimization & Lighthouse lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Performance Optimization & Lighthouse learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “Reducing Unused CSS” lesson free?
Yes — the full text of “Reducing Unused CSS” is free to read here on the web, and the Web Performance Optimization & Lighthouse course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Performance Optimization & Lighthouse course, upgrade to CoddyKit PRO.
What will I learn in “Reducing Unused CSS”?
Find and eliminate dead CSS that bloats your stylesheets, using coverage tools, purging, and modular authoring to ship only the rules each page actually uses. You practise Web Performance Optimization & Lighthouse with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Performance Optimization & Lighthouse?
No prior experience is required. Web Performance Optimization & Lighthouse on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Reducing Unused CSS” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Performance Optimization & Lighthouse lesson?
Yes. Every Web Performance Optimization & Lighthouse lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.