new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Webflow's Style Manager displays a complete list of classes, combo classes, and tags you've created or edited in your project. It's a quick way to rename or even clean up any styles you aren’t using anymore.

You'll find the Style Manager in the right panel. Just click the tab or press G to open it. In this video, we'll cover the contents of the Style Manager, and show you how to delete individual styles, rename classes, and even clean out all your unused styles with a single click.

Clone this projectDownload project assetsDownload lesson assets

Transcript

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.