Use the Style Manager to rename, clean up, and search for classes and tags.
The Style Manager displays a comprehensive list of classes or tags we've created or used in our current project. It's a good overview of these styles, and it's a quick way to rename or even clean up anything we're not using.
With that in mind, we'll cover Anatomy, Renaming, and Clean Up using the Style Manager.
Let's start with anatomy. From anywhere in our project, we can click the Style Manager on the top-right. Tags we've styled will appear at the top. And that, we have our classes and combo classes appear underneath with a plus sign to their left. This is a quick way to determine class inheritance (the relationship between base classes and combo classes).
Let's select a heading here — no class is currently applied. Let's click to create a new one and give it a name. Press enter. Back over in the Style Manager, if we scroll all the way to to the bottom, we can see the new class we just created.
Classes are listed in the order they were created.
Now let's move on to renaming.
We'll select the wrench icon and rename the class we just created. If we do that, and go back to the Style panel? We can see that the class name has been updated. Double-click there, rename again, and if we go back to the Style Manager all the way at the bottom, the name's been updated there, too.
Finally, let's cover clean up. And for many, this can induce euphoria. Because it does the work for you, and automatically cleans up classes we're not using.
Let's actually start by removing the class from our heading. Now it's no longer used in our project.
Go back to the Style Manager, and if we scroll down, it's still there all the way at the bottom. That's because classes aren't removed from our project in case we want to use them elsewhere. But up on the top-right, we can see Clean Up. And press Clean Up, and we get a confirmation showing us any unused styles (anything not currently associated with page elements). Let's press Remove. And we're free to continue styling.
So, the Style Manager is a great reference for tags and classes we have in our project. We can get a quick overview, rename, or clean up unused styles at any time.
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:
Something went wrong while submitting the form. Please contact support@webflow.com