By the end of this lesson you’ll understand how classes really work in Webflow — not just what they are, but what actually happens under the hood when you rename one, duplicate it, add a combo, or reach for a global class. Get this right and everything about styling in Webflow gets calmer and more predictable.
Classes are the foundation of styling in Webflow: every color, every font size, every bit of spacing is tied to one. The concept looks simple until you start renaming and stacking things — that’s where the confusion (and a few stubborn myths) creep in. So let’s clear all of it up, once and for all.
The mental model I keep coming back to: picture each element on your page as a person, and a class as an outfit you designed. The outfit is reusable — you can put the same one on ten elements or a hundred — and from that base you can rename it, clone it, or add accessories. Everything else here is just a variation on that one idea.
How it works
A class is a label you give to one or more elements to connect them to a set of CSS style rules. It says “every element wearing this should look like this.” That’s why it’s reusable: design the outfit once, put it on as many elements as you like, and change the design in one place to update them all.
Renaming is the gentlest operation. Click the small arrow next to the class name in the Style panel (or hit Cmd/Ctrl + Shift + Enter) and type a new name. You’re relabelling the model, not restyling a single shirt — so renaming hero-section to main-hero updates every element that used it, automatically, with no design change at all.
Duplicating is for when you want something similar but independent. Say you have a vertical card and want a horizontal one that keeps the padding, radius, and shadow but changes the layout and background. Duplicate the class and Webflow copies every style into a brand-new class that’s completely detached — edit it however you want and the original never moves.
Combo classes are the subtle one. A combo isn’t a new class; it’s a variation layered on top of a base class (click right after the class name, or Cmd/Ctrl + Enter). Think of it as an accessory — a scarf on a suit — or as tailoring that overrides the base, like is-secondary making a button transparent. The catch: a combo is saved as a unique style tied to its base, so you can’t use it elsewhere. And two combos with the same name (has-border on a card and has-border on a section) look identical but are completely separate entities — changing one won’t touch the other.
Global classes solve exactly that. A global is a class you can drop on any element, on top of any other class — usually created in your style guide, named with a g- or u- prefix, and styling just one property (g-radius-8, u-bg-red). Technically it’s identical to a normal class; the only difference is intent — a normal class defines a whole outfit, a global controls one small accessory. But here’s the gotcha: the moment you add a global to an element that already has a class and then edit it there, Webflow silently turns the pair into a combo (card g-radius-8). Your change stays local to that element, and the underlying global stays clean and reusable — which is exactly what you want, as long as you know it’s happening.
Finally, what happens on publish. Webflow cleans class names so they’re valid, safe CSS: uppercase → lowercase, spaces → hyphens, a leading number gets an underscore, a leading hyphen is ignored, and emojis and special characters are stripped. You’ll rarely think about it — until you write a CSS or JavaScript snippet and need to target the real published class name.
How to use it
- Rename — click the arrow next to the class name (or
Cmd/Ctrl + Shift + Enter) and type a new one. Every element using it updates; nothing about the design changes. - Duplicate — arrow → Duplicate class when you want a similar-but-separate variant (the horizontal card from a vertical one). Edit freely; the original is untouched.
- Add a combo — click right after the class name (or
Cmd/Ctrl + Enter) and add a variation likeis-secondaryorhas-border. It layers on top and can override the base, but it’s locked to that base class. - Create a global class — in your style guide, drop a div block, name it with a
g-/u-prefix, and style a single property (e.g.g-radius-8). Now you can add it to anything. - Keep globals clean — remember that editing a global on an element that already has a class turns it into a combo, so the change stays local. If you want the change to apply everywhere, edit the global class in isolation instead.
- Stay consistent with naming — pick a convention and stick to it. Webflow will tidy the names on publish, so keep them simple if you plan to target them with custom code later.
Once you use classes deliberately — renaming to relabel, duplicating to branch off, combos for quick variations, globals for reusable accessories — your projects get cleaner, faster, and far more predictable. Every change in Webflow starts with a class, so the better you understand them, the more control you have.