CSS Cleanup: Remove Dead Classes Without Breaking Pages

CSS cleanup becomes dangerous when a stylesheet looks unused but class names are assembled by templates, CMS content, markdown, feature flags, or third-party widgets. The goal is to remove dead rules without erasing states the scanner cannot see.

The useful output is a CSS cleanup pull request with selector evidence, dynamic-class checks, visual snapshots, and bundle delta. Keep the review concrete: Remove one selector family or component stylesheet at a time, then make the next action visible to the team that owns the risk. That matters because the cleanup can still go wrong when removing classes generated dynamically.

Key takeaways

Treat each cleanup candidate as an owned system with dependencies, not anonymous clutter.
Use one release cycle that covers major templates, breakpoints, and user states before deciding that “quiet” means “unused.”
Prefer reversible changes first when removing classes generated dynamically is still plausible.
Leave behind a CSS cleanup pull request with selector evidence, dynamic-class checks, visual snapshots, and bundle delta so the next review starts with context.
Measure the result as lower spend, lower risk, less operational drag, or clearer ownership.

Map Rendered Selectors

Start with one frontend surface across templates, components, generated class names, content, visual states, and build output. The best cleanup scope is small enough that owners can answer quickly but wide enough to include the attachments that make removal risky.

Field	Why it matters
Owner	Cleanup needs a person or team that can accept the decision
Current purpose	A short reason to keep the item, written in present tense
Last meaningful use	owners, callers, last change, runtime behavior, and deletion confidence
Dependency evidence	repository search, tests, logs, deploy history, and owner review
Risk if wrong	The outage, data loss, access failure, or rollback gap the review must avoid
Next action	Keep, reduce, archive, disable, remove, or investigate

Do not make the inventory larger than the decision. A short list with owners and evidence beats a perfect spreadsheet that nobody is willing to act on.

CSS Evidence to Check

The useful question is not “how old is it?” It is “what would break, become harder to recover, or lose accountability if this disappeared?” For CSS cleanup, collect enough evidence to answer that without relying on naming conventions.

Check	What to look for	Cleanup signal
Selector references	Components, templates, markdown, CMS fields, tests, and generated files	No rendered path references the selector
Dynamic names	Class composition, variants, safelists, theme maps, and third-party markup	The scanner is not missing runtime-generated classes
Visual states	Hover, focus, error, empty, loading, print, responsive, and dark-mode states	Removing the rule does not break non-default UI states
Bundle output	CSS bundles, critical CSS, route chunks, and screenshots	The deletion reduces shipped CSS without visual regression

Use several signals together. Activity can miss monthly jobs and incident-only paths. Ownership can be stale. Cost can distract from security or recovery risk. The strongest case combines runtime data, dependency checks, owner review, and a rollback plan.

If the evidence conflicts, label the item “investigate” with a named owner and review date. That is still progress because the next review starts with a narrower question.

Example Evidence Check

Search static and dynamic class references before trusting an unused-CSS report.

rg "${CLASS_NAME}|className=|class=|:class|clsx|cva\(" src components pages content
rg "safelist|purge|content:|extract|theme" tailwind.config.* postcss.config.* vite.config.*
rg "${CLASS_NAME}" public docs tests snapshots

Treat the output as a candidate list. Do not pipe these checks into delete commands; add owner review, dependency checks, and a rollback path first.

Delete One Selector Family

Use the least permanent move that proves the decision. In CSS cleanup, removal is only one possible outcome; reducing size, narrowing permission, shortening retention, archiving, or disabling a trigger may produce the same benefit with less risk.

Remove one selector family or component stylesheet at a time.
Check dynamic class builders and safelists before trusting unused-CSS reports.
Capture visual states for affected components before and after deletion.

Track the cleanup candidate with a simple priority score:

Score	Good sign	Bad sign
Impact	Meaningful spend, risk, toil, noise, or confusion disappears	The item is cheap and low-risk but politically distracting
Confidence	Owner, purpose, and dependency path are understood	The team is guessing from age or name
Reversibility	Restore, recreate, re-enable, or rollback path exists	Deletion would be the first real test
Prevention	A rule can stop recurrence	The same pattern will return next month

Start with high-impact, high-confidence, reversible candidates. Defer confusing items only if they get an owner and a date; otherwise “defer” becomes another word for keeping waste permanently.

Styles Scanners Miss

Some cleanup candidates are supposed to look quiet. Do not rush these cases:

CMS-rendered HTML, markdown content, print styles, email templates, and embedded widgets.
Responsive and interaction states that do not appear in a default screenshot.
Utility classes generated from tokens, variants, or runtime config.

For these cases, use a longer observation window, explicit owner approval, and a staged reduction. The point is not to avoid cleanup; it is to avoid making the first proof of dependency an outage.

Run the Visual Cleanup PR

Run CSS cleanup as a decision review, not an open-ended hygiene project.

Pick the narrow scope and export the candidate list.
Add owner, current purpose, last-use evidence, dependency checks, and risk if wrong.
Remove obvious false positives, then ask owners to choose keep, reduce, archive, disable, remove, or investigate.
Apply the least permanent useful change first.
Watch the signals that would reveal a bad decision.
Complete the final removal only after the review window closes.
Save a CSS cleanup pull request with selector evidence, dynamic-class checks, visual snapshots, and bundle delta.

For broader cleanup planning, use the cleanup library to pair this guide with related notes. If the cleanup has infrastructure impact, pair it with a visible owner, a rollback path, and a measurable business case. For infrastructure cleanup, the main cloud cost optimization checklist is a useful companion.

Keep Styles Owned

Prevention should change the creation path, not just the cleanup path. For CSS cleanup, the useful prevention fields are owner, reason to exist, removal trigger, and verification notes. Make those fields part of normal creation and review.

Keep styles owned by components or design-system packages.
Review safelists and legacy global selectors during feature work.
Block new global CSS unless it has a named surface and removal trigger.

The recurring review should be short: sort by impact, pick the unclear items, assign owners, and close the loop on anything nobody claims. If the review keeps producing the same class of candidate, fix the creation path instead of celebrating repeated cleanup.

Example Decision Record

Use a compact record so the cleanup can be reviewed later without reconstructing the whole investigation.

Field	Example entry for this cleanup
Candidate	Unused CSS in front-end applications
Why it looked stale	Low recent activity, unclear owner, or no current consumer after the first review
Evidence checked	Selector references, Dynamic names, and owner confirmation
First reversible move	Remove one selector family or component stylesheet at a time
Watch signal	The metric, alert, job, route, query, or owner complaint that would show the cleanup was wrong
Final action	Keep, reduce, archive, disable, or remove after one release cycle that covers major templates, breakpoints, and user states
Prevention rule	Keep styles owned by components or design-system packages

This record is intentionally small. If the decision needs a long narrative, the candidate is probably not ready for removal yet. Keep investigating until the owner, evidence, reversible move, and prevention rule are clear.

FAQ

How often should teams do CSS cleanup?

Use one release cycle that covers major templates, breakpoints, and user states for the first decision, then set a recurring cadence based on change rate. Fast-moving non-production systems may need monthly review; slower systems can be quarterly if every unclear item has an owner and a review date.

What is the safest first action?

The safest first action is usually ownership repair plus evidence collection. After that, remove one selector family or component stylesheet at a time. That creates a visible test before permanent deletion.

What should not be removed quickly?

Do not rush anything connected to cms-rendered html, markdown content, print styles, email templates, and embedded widgets. Also slow down when the cleanup affects recovery, compliance, customer-specific behavior, rare schedules, or security response.

How do you make the decision useful later?

Write the decision as a small operational record: candidate, owner, evidence, chosen action, watch signals, rollback path, final date, and prevention rule. That format helps future engineers, search engines, and AI assistants understand the cleanup without guessing.