How do I rename a class in Webflow?

Rename the class you already have

A class stores styles you can apply to as many elements as you want. Webflow gives it a name from the element type at first, such as Paragraph, and you can rename it.

There are four ways to rename a class in the Designer:

• Double-click the class name in the Style selector, type the new name, and press Enter.
• Press Command + Shift + Enter, type the new name, and press Enter.
• Right-click the element, choose Rename class, type the new name, and press Enter.
• Hover the class name in the Style selector, open the dropdown, choose Rename class, type the new name, and press Enter.

The new name shows in the Style manager and in the Style selector. You can also rename a class from the Style manager.

Example: a class named blue-button is on every form button, and the name describes a color you might change. Rename it to form-button. Webflow's naming guidance prefers a name based on function, with hyphens as dividers, and uses form-button as the good example and blue-button as the one to avoid.

The new name is still the same class

Editing a class affects every instance of that class on the site. A rename is the name of that same class. Elements that used blue-button now show form-button, and they still share one set of styles.

Before you rename, look at the Affected elements count under the Selector. It shows how often the class is used on this page and across the site. Click the count to outline those elements. If the outline covers buttons you did not mean to include, you want a different class on those buttons, not a rename of the shared one.

Style changes are a separate step from the name. After the rename, select any element that has the class and change a style only if you want every instance to change. The text color guide is one of those style edits. Do it on the class you mean to share.

Typing a new name is not always a rename

Command + Enter on Mac, or Control + Enter on Windows, opens the Style selector so you can add a class. That is not the rename shortcut. Command + Shift + Enter is the rename shortcut.

If a class is already on the element and you type a second name to the right of it, you create a combo class. A combo class is for a change on this element that should not restyle every element with the base class. The combo class guide is that second name. Use it when one button needs more padding. Use rename when the shared class simply has the wrong name.

If you need a full copy that will no longer follow the original, duplicate the class instead. Hover the class, open the dropdown, choose Duplicate class, and name the copy. The duplicate is disconnected. Later edits to the original do not flow to it.

Follow the naming rules so two classes do not collide

Class names are case-insensitive. A class called alert is the same as ALERT. Names must start with a letter. Prefer letters, numbers, and hyphens, and avoid special characters.

Webflow converts a special character in a class name to a hyphen. A plus sign and a dollar sign can both become a hyphen, so two names you thought were different are treated as one class. Style edits then apply to both. Use form-button, not a name built from symbols.

Removing a class from one element does not rename it and does not delete it from the site. Click the Style selector and press Delete, or hover the class, open the dropdown, and choose Remove class. The class can still be applied by typing its name. A full delete of a class that is no longer used is a cleanup task. The unused classes guide is that pass. Do not rename as part of a delete unless you mean the name itself to change.

Publish when you want the live site to use the current styles. The name change is how you find the class later. The look of the buttons changes only if you also edited the styles.

Renaming a class on a site you already have is ordinary upkeep. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.