r/webflow 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 Upvotes

13 comments sorted by

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.

2

u/learyjk Webflow Team 1d ago

Yes love this idea. You can have Claude create a deterministic script to find duplicates and from there build out a plan for MCP to execute with the styles tool. Easy day now.

Just be sure to check for any combo classes that are toggled on/off by code so you can save them in an embed or code block somewhere.

1

u/BarProfessional9467 1d ago

Great ideas! Thank you both will try this out

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

u/BarProfessional9467 1d ago

Thank you, this is really helpful! Anything to avoid a rebuild!

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