Detect Unused CSS Selectors and Remove Them from Your Website

Detect unused CSS selectors with Chrome DevTools Coverage, then strip them automatically with PurgeCSS – setup, safelisting, and WordPress options.

Last updated: July 2026

Old projects accumulate stylesheets where most rules match nothing anymore – dead weight that slows first paint and hurts Core Web Vitals. Two-step cleanup: measure with DevTools, remove with PurgeCSS.

Step 1: Measure with Chrome DevTools Coverage

  1. Open your site → F12 → Ctrl+Shift+P → type Coverage → Show Coverage.
  2. Click the reload button in the Coverage panel.
  3. Each CSS (and JS) file shows a red/blue bar: red = bytes never used on this page. Click a file to see exactly which rules went unused.

One caveat: Coverage reports a single page in a single state. A selector unused on the homepage may be essential on checkout, or only apply after a menu opens. Treat the numbers as a map of where the problem lives, not as a deletion list.

Step 2: Remove automatically with PurgeCSS

PurgeCSS scans your templates and keeps only selectors that actually appear:

npm install -D purgecss
// purgecss.config.js
module.exports = {
  content: ['./resources/views/**/*.blade.php', './public/js/**/*.js'],
  css: ['./public/css/app.css'],
  output: './public/css/purged/',
  safelist: [/^is-/, /^has-/, 'show', 'active', 'fade'],
};
npx purgecss --config purgecss.config.js

The safelist matters: classes added at runtime by JavaScript (modals, dropdowns, slider libraries) never appear verbatim in your templates, so PurgeCSS would strip them. Test every interactive element after purging.

In a bundler it plugs into the pipeline (@fullhuman/postcss-purgecss for PostCSS/Vite/webpack), running on every production build. If you use Tailwind, note that v3+ already generates only the classes you use — no separate purge step needed.

What about WordPress?

Theme + plugin stylesheets are the classic unused-CSS swamp. Options in order of effort: performance plugins with a “Remove Unused CSS” feature (WP Rocket, Debloat) do it managed; or generate a purged stylesheet with the CLI as above from your theme’s template files and enqueue that in a child theme. Either way, click through your interactive pages afterward — comment forms, search overlays, mobile menus — before calling it done.

The payoff

Typical legacy sites drop 60–90% of CSS bytes. Verify in PageSpeed Insights: the “Reduce unused CSS” opportunity should shrink or disappear, and First Contentful Paint improves with it.

Unused-CSS.com: Online Tool

It asks for an online URL to check. From the URL, It scans all CSS files and show the results separately for each stylesheet with graphs. Currently it scans only homepage, but if you need whole website results, you need to provide your e-mail address and it will send the results to you in email.

Helium CSS: Javascript Tool

It is a javascript-based tool and runs from the browser. It is a used for discovering unused selectors across many pages on a web site. It accepts only list of URLs, parses each URL provided and build a list of stylesheets. Using this list of stylesheets and URLs, it generates a list of unused selectors not used in any of the URL provided.

TopStyle 5: Windows Application

It is an HTML Editor, which includes a tool named Style Sweeper. Style sweeper can remove white spaces and blank lines, sort according to Class, Element, ID and also combines multiple selectors. It will also combine repeated property as well as selectors if they are same. But it’s a commercial product costs $80 (USD).

LiquidCity CSS Cleaner: PHP Script

It uses regular expressions to check any HTML page specified by you, generates the report with unused selectors for that HTML page only. From that report, you can manually remove them from the stylesheet.

There are so many other tools available. We will introduce them very soon.

Comments

comments