How to clean up styles in Webflow

Hi there :wave:t2:
I manage a Webflow website and I’d like to tidy up all the styles in Style Manager. Over time, lots of classes have been added, without consideration about a class naming structure, like BEM.

I find that the Style Manager is not a convenient place to edit styles, the panel is too small, you can’t have a broad overview of all styles and editing classes at scale is not easily doable.
Also, it seems not possible to add a parent class to an existing styled elements: hence it’s not possible to group elements by components a posteriori.

The goal is be to refactor code so as to keep a light and understandable style structure.

How would you tidy up a Webflow project with a lot of styles?

Welcome to the community!

Outside of removing any styles that were created but are no longer used (which can be done by clicking the small “Clean Up (x)” link at the top right of the Styles panel), there’s no bulk or automatic way to refactor anything you’ve already set up.

image

As with any web project, ensuring clean and efficient styles starts at the beginning of the project. Webflow makes it easy to duplicate classes, and creating new classes based on already existing classes can be fairly speedy if you’re familiar with the interface, so don’t be afraid to recreate things. It also helps to use Symbols wherever possible so that you can update things in one place and have them reflected across all instances of that Symbol—especially easy now that there are Symbol Overrides.

Also, it seems not possible to add a parent class to an existing styled elements: hence it’s not possible to group elements by components a posteriori.

It’s not exactly the best answer, however you can always remove all styles from an element, add the parent class, then include the necessary combo classes. Styles work a bit differently in Webflow compared to traditional web development and relationships need a bit of setup in order to work the way you’d expect them to.

@vincent has a great project/resource available here that gives a bit more insight on how the relationships work that may be beneficial. He also came up with a great little “hack” using rich text element class relationships that you can check out here that goes over getting a more traditional setup within Webflow.

If you have any other questions, don’t hesitate to reach out! :v: