Use the Style Manager to rename, clean up, and search for classes and tags.
The Style Manager displays a complete list of classes, combo classes, and tags you've created or edited in your site. Here, you can rename classes, preview your class and tag styles, search for classes and tags, and delete any classes that aren’t in use.
In this lesson you’ll learn:
The Style Manager, located in the right panel, can be accessed by clicking on the Style Manager icon or pressing G on your keyboard.
When you create a new class or style a tag, it appears in the Style Manager in the order it was created. Here, you can rename the class, preview your class or tag’s styles, search the Style Manager, or clean up any unused classes.
All the tags you've styled appear in pink at the top of the Style Manager. Learn more about tags.
All classes appear in blue below the tags in the order they were created. Learn more about classes.
All combo classes appear in blue and are nested under each class with a “plus” icon to their left. Learn more about combo classes.
All nested tags appear in pink and are nested under each class with an "arrow" icon to their left. Learn more about nested tags.
Click the “list” icon to the right of a class or tag to view a list of elements and symbols affected by the class or tag, organized by:
Click an element in the list to select the element on the current page. Click a page name to jump to that page and display a list of affected elements on that page.
To rename a class or a combo class:
If a class isn’t applied to an element in your site, a “trash” icon appears. Click the “trash” icon to immediately delete the unused class.
To view and delete any classes that are not associated with any page elements:
Once you start styling an element, Webflow automatically creates a class to save all the styles you apply to that element. You can rename this class so you can easily reuse it and apply the same class to other elements.
To rename a class or a combo class in the Style Manager:
You can also rename classes directly in the Style panel. Learn more about classes.
If you use a lot of classes in your site, you can search the Style Manager by class or tag name, as well as the properties and values applied to them.
Let’s walk through examples of each:
To search the Style Manager:
You can use the Style Manager to preview a class or tag’s styles before choosing to apply it to an element in your site. You can also use this preview as a way to determine which unused classes you want to remove or keep.
To preview styles:
If you remove a class from an element (by removing it from the Selector field in the Style panel) this will not remove the class from the Style Manager or your site. That’s because a class can be reused at any time to style other elements.
You can fully remove classes from the Style Manager and site only when the classes aren’t connected to any element.
Let’s walk through how you can:
You can delete an individual class from your site if the class is not used anywhere in your site. Unused classes in the Style Manager don’t show a “list” icon next to their name.
To delete an individual unused class:
You can delete unused classes from your site to reduce the weight of your website’s code, and improve your site’s performance.
To delete all unused classes: