How to rename a class in Webflow?

Renaming classes in Webflow is a straightforward process, but it matters more than you might think. Clean, descriptive class names keep your project organized and make collaboration easier — especially on larger builds.

Renaming a class in the Designer

To rename a class in Webflow:

1. Select any element that has the class applied.
2. In the Style panel (right sidebar), click on the class name at the top.
3. The name becomes editable — type the new name.
4. Press Enter to confirm.

The rename applies everywhere that class is used across your entire project. All styling rules and element references update automatically.

Renaming from the Style Manager

You can also rename classes from the Style Manager:

1. Open the Style Manager by clicking the paintbrush icon at the bottom of the left panel, or press G then S.
2. Find the class you want to rename.
3. Right-click the class name and select Rename.
4. Type the new name and press Enter.

This method is useful when you want to rename a class without selecting a specific element first.

Things to keep in mind

• Global impact: Renaming a class changes it everywhere it is used in the project. There is no undo specifically for renames, so use Ctrl+Z (or Cmd+Z) immediately if you make a mistake.

• Combo classes: If the class is part of a combo class, the rename propagates through the combo as well.

• CMS bindings: If you are dynamically styling elements via CMS fields, class renames do not affect those bindings — they reference classes by their updated name.

• Best practice: Use a consistent naming convention like BEM (Block Element Modifier) or a utility-based system. Renaming later is easy, but starting with good names saves time.

Why renaming matters

Poorly named classes — like div-block-42 or heading-copy-3 — make your styles panel harder to navigate and your project harder to hand off. Taking a moment to rename classes to something meaningful (hero-title, nav-link, card-image) pays off as the project grows.