Use the Style Manager to rename and clean up 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 project. Here, you can rename styles and delete any styles that aren’t being used anymore.
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 or clean up any unused classes as indicated in the top right.
All the tags (pink) you've styled will appear at the very top.
All the classes appear in blue below the tags in the order they were created.
All combo classes appear in blue and are nested under each class with an icon to their left.
All nested tags appear in pink and are nested under each class with an arrow icon to their left.
Click this icon to view a list of all elements affected by a class or combo class on the current page, a list of pages with elements affected by this same style, and a list of symbols containing elements with that style.
Clicking an element in this list will select the element on the page. Clicking a page name will jump to that page and display a list of affected elements on that page.
Click the wrench icon to rename a class or a combo class. Once you’ve renamed the class, click the check icon or press enter to save the new name. To discard the changes, click the x.
Click the wrench icon to delete classes that aren't applied in your project. Click the trashcan icon that appears only for unused classes.
To view and delete any classes that are not associated with any page elements, select clean up in the top right. Make sure you confirm the deletion of classes by clicking remove. To abort, click cancel.
Once you start styling an element, a class is created to save all the styles you apply to that element. You can rename this class so you can easily reuse it to apply the same classes to other elements.
To rename a class or a combo class in the Style Manager, click the wrench icon next to the class name, rename the class, and press enter.
You can also rename classes directly in the Style panel. Learn more about classes.
Removing a class from an element (by removing it from the selector field in the Styles panel) will not remove the class from the Style manager or your project. That’s because a class can be reused for styling other elements at any time.
Classes can be fully removed from the Style Manager and project only when they aren’t connected to any element.
You can delete an individual style from your project from the Style Manager if the style is not used anywhere in your project. You can easily detect these unused styles in the Style Manager because there won’t be a list icon next to their name.
Clicking the wrench icon next to these styles will reveal a trashcan icon that allows you to delete the style from the project.
Unused styles add weight to your website’s code, so cleaning up any unused styles will help improve your website's performance as unused styles add weight to your website’s code.
To delete all unused classes, go to the Style Manager and click “clean up” then confirm the deletion of classes by clicking “remove”.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback