I handed a 1,400-line stylesheet to a model and asked for consolidation. The result was 22 percent smaller and wrong in three places.
What It Did Well
- Merged duplicated rules reliably. Nine near-identical card variants collapsed to two.
- Found genuinely dead selectors that I had stopped using months earlier.
- Suggested a consistent spacing scale, which is the kind of task I postpone.
Where It Broke
- It changed a stacking order that depended on source order rather than
z-index. Visually identical until a dropdown opened. - It removed a media query covering a tablet breakpoint that only mattered for one component.
- It renamed custom properties in a way that was internally consistent and incompatible with the dark-mode overrides that had not been written yet.
None of these appeared in a screenshot diff of the homepage. Two appeared immediately on a real device.
The lesson
CSS regressions hide in states the screenshot does not capture: open menus, hover, focus, print, and unusual widths.How I Would Run It Again
- Refactor one component at a time, not the whole file.
- Diff the computed styles on a fixed set of pages before and after.
- Keep a manual list of order-dependent rules, because the model cannot see why they exist.
Verdict
Useful for mechanical consolidation, unreliable for anything structural. I will keep using it, and I will keep reviewing every line.
