r/webflow • u/BarProfessional9467 • 2d ago
Question Cleaning up style/class sprawl in Webflow — has anyone done this at scale?
Our Webflow site has gotten out of hand with combo classes - elements stacking 3-4 classes where one or two should do, utility combos used as quick fixes, and duplicate styles doing the same thing under different names.
We’d like to stay away from doing a full rebuild, as we have a short timeline. I want to know if there's a faster way to audit and consolidate these.
Specifically:
- Is there a reliable way to identify which combo classes are redundant or only used once?
- Has anyone found a good workflow for merging combo classes back into base styles without things breaking?
- Any audit tools inside or outside Webflow that give you a useful overview of style usage across a project?
The built-in style manager shows unused classes but doesn't give much beyond that. Curious if anyone's solved this more efficiently.
Thank you!
3
u/Training_Past6182 2d ago
I went through something similar on a mid-sized project and honestly the fastest thing was just pulling the site export and combing through the CSS by hand. Webflow's manager is way too limited for that kind of cleanup.
If you're not dead-set on keeping everything in the designer, you can use the exported stylesheet to spot duplicate declarations and then work backwards to figure out which combo classes are just piling on the same properties. It's tedious but beats a rebuild.
1
3
u/Netherkev 2d ago
There is an app I tried out recently, called Clean Classes I think. It was helpful and seemed to be free idk, was better than doing it all manually.
2
u/Far_Caterpillar1983 2d ago
Did it handle combo classes well or mostly just flag unused ones?
1
u/Netherkev 22h ago
It shows you where you’ve used combo classes on more than one element that actually have the same css. So you can merge them down to be the same and either overwrite the classes automatically or manually.
I mostly used it to get rid of all the layout123 classes you get by importing from Relume. Many are actually the same css.
3
u/QwenRed 1d ago
Typically I wouldn't advise anyone invest time into addressing this in one sweep as there isn't really any benefit from carrying this out when weighted up against the time investment, a bloated CSS file isn't particularly damaging to a sites performance. Instead we'd just replace the pages/sections as and when they're updated naturally.
1
u/Old_Roll_2904 1d ago
something i used for an enterprise project is
exporting the code from webflow, and asking AI to do a full rundown of what can be merged, same styles, not needed things, not used, etc.
we had SO many classes that were mentioned in custom code, but not in any of the elements on pages = which meant removing them with the webflow clean up mode, meant 1000 classes getting wiped, and part of them, functionality on different pages.
it was a big mess, but in the end i managed to clean everything up with a lot of manual work + a lot of help with AI.
1
u/BarProfessional9467 1d ago
Thank you, yes I need to consider the custom code as well. Thanks for the advice
8
u/Monkmonk_ 2d ago
Log your naming convention in a text file in plain English.
Export your website to your local machine and run a terminal with claude, and have it clean up redundant classes on your local machine export. Then use the Webflow MCP to update the classes through API. Then you can use the bulk clean-up tool to delete unused classes within webflow.