Our CSS accumulated hundreds of tiny utility classes written ad hoc over several years. They aren't a coherent system; `mt-small`, `margin-top-2` and a dozen similar names all coexist. Rewriting every template for a new framework would be expensive and risky. I'm considering documenting a small spacing and typography scale, then replacing duplicate patterns only when touching each component. Has anyone cleaned up this kind of CSS incrementally without creating an endless transitional mess?
Migrating a CSS codebase from ad-hoc utility classes without rewriting everything
- webdev
- migrating
- codebase
- utility
43
4 replies
I’d start by freezing new additions right away, then put the old utilities on a short list of allowed replacements. If people keep inventing...
I’d start by freezing new additions right away, then put the old utilities on a short list of allowed replacements. If people keep inventing fresh variants, the cleanup never really starts.
Yeah, the naming problem is usually the real problem. If `mt-small` and `margin-top-2` both mean “small top margin,” pick one canonical class and make the others legacy.
I’d also log what gets changed when you touch a component. Otherwise six months later nobody remembers which utility was supposed to be the...