Most real jobs involve inheriting CSS no one fully understands — full of !important, deep nesting and dead rules. Refactoring it safely, without breaking a live product, is a defining senior skill. The watchword is: incremental and measured.
Understand before you change
Never refactor blind. First map what exists: which stylesheets load, which rules are actually used, where the specificity hotspots are. Browser coverage tools and search across the codebase reveal what is safe to touch and what is load-bearing.
Add, do not edit
The safest large refactor often does not modify old CSS at all. Instead, introduce a new, clean layer (new classes, new tokens, a new <code>@layer</code>) and migrate components to it one at a time. The old styles stay untouched until nothing uses them, then they are deleted.
Work in small, verifiable steps
Refactor one component or page at a time, verifying each change visually before moving on. A huge "rewrite everything" branch is high-risk and hard to review. Small steps are reviewable, reversible and rarely cause outages.
Measure and delete dead CSS
Legacy codebases carry rules for components that no longer exist. Use coverage tooling to find unused CSS, confirm with search, and delete it. Less CSS is faster and easier to reason about — but verify before deleting, since dynamic classes can fool simple tools.
/* delete old.css, write new.css, ship *//* add new layer, migrate per component, then remove old */Doing a big-bang rewrite of all the CSS at once. It is unreviewable, risky and usually breaks things subtly. Refactor incrementally behind the existing styles.
Measure first, add clean code alongside the old, migrate component by component with visual verification, and delete dead CSS only after confirming it is unused. Incremental and measured beats brave and big.
Take a messy selector with high specificity and !important. Plan a safe migration: a new flat class in a later @layer that overrides it cleanly, then a path to remove the old rule once nothing depends on it.
1. First step before refactoring legacy CSS?
2. Safest large-refactor approach?
3. Before deleting "unused" CSS you should…
- Understand and measure legacy CSS before changing it.
- Add clean code in a new layer and migrate incrementally.
- Work in small, visually-verified, reversible steps.
- Delete dead CSS only after confirming it is truly unused.