How do I clean unused classes in Webflow?

Open the Style selectors panel

The Style selectors panel lists every class, combo class, and tag you have created or styled. Webflow says to open it from the three droplets icon in the left toolbar, or by pressing G. Classes appear in blue, in the order you created them. Combo classes sit nested under a class. Styled HTML tags appear in pink at the top.

This panel is where unused classes are removed. Deleting a class from an element, in the Style selector field on the Style panel, does not remove it from the site. Webflow keeps it so you can apply it again later. The cleanup is a second step, done here, and only when nothing is connected to that class.

If the list is long, use the search box. Search matches class and tag names, and it also matches property names and values on the main breakpoint, such as a color or a pixel size. Clear the search before you judge the full list. Search results are not the whole site's style list.

See whether a class is still used

A class that still affects an element shows a list icon. Click it. Webflow groups the results into elements on the current page, elements on other pages, and components that contain the class. Click an element on the current page to select it. Click a page name to open that page and see the elements there.

Unused classes do not show a list icon next to the name. Hover the name if you want a CSS preview before you delete anything. Webflow says that preview includes styles from the main breakpoint only. A difference that exists only on mobile will not show in that hover preview. If you are unsure, open a page that used the class and look at the phone breakpoint before you delete it.

Example: 'Card old' has no list icon, and the hover preview shows a shadow you no longer use. 'Card' has a list icon and points at twelve elements on /services. Delete the first one only after the attribute check below. Leave 'Card' alone.

Pink rows are tags, such as a body or a heading you styled directly. They are not the unused-class list. The combo class guide is the page for a class that should change one element without restyling every element on the base class. Cleaning unused classes does not create that combo class for you.

Check class attributes before you delete

Webflow's custom attributes article says the Style selectors panel does not recognize classes referenced on CMS data or on component properties. A class can look unused in the panel and still be applied with a class attribute. If you delete it, the CMS card or the component loses those styles.

Before a cleanup, search the site for a class attribute that types a class name. The custom attribute guide shows where that attribute is set. Class names created in the Style panel are lowercase, and spaces become hyphens. A Style panel class called 'Theme dark' is theme-dark in the attribute. Search for the generated name, not only the label you remember.

Example: a blog template sets class from a CMS option so a featured post receives theme-dark. The Style selectors panel may list theme-dark with no list icon. Keep it. Deleting it removes the featured style on the next publish even though no element had the class selected in the Style panel.

If you do not use class attributes anywhere, this check is quick. If you do, write down the names you must keep, then go back to the panel.

Delete one class, or clear the unused ones

To delete a single unused class, click the wrench icon next to it, then the trash icon. That removes the class from the whole site. There is no list icon on that row, which is how you know it is eligible.

To delete every unused class, click the broom icon at the top right of the Style selectors panel, then click Remove. Webflow says this reduces the weight of the site's code and can improve performance. It does not give you a speed score, and it does not replace image or script work. The site speed guide covers those other cuts. Run the broom after the attribute check, not before.

Do not rename a class in the same pass unless you mean to. The wrench is also how you rename: type the new name and confirm with the checkmark. A rename changes the class everywhere it is used. A delete removes an unused one. They are different clicks. If your goal is cleanup, stop at the trash icon.

Publish and spot-check one real page

After the panel looks right, publish when you want the live CSS to match the Designer. Open one busy page, such as the homepage and a CMS template, on desktop and on a phone. Look for a block that lost its spacing, its color, or its type. That pattern means a class you still needed was removed, often one that lived only on a class attribute.

If a block looks wrong, recreate the class and apply it again, or restore a backup if the cleanup was large and you saved one first. A single unused class named 'Hero draft' is a small delete. A broom pass on a site you do not know is the case for the attribute list and the spot-check.

Create fewer new classes on the next edit so the panel stays short. Apply a class you already have before you make a near copy. An unused row usually starts as a duplicate someone made once and then unhooked.