Bonus: Class naming convention

We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos.

Bonus: Class naming convention

Use consistent, readable class names to build smarter, scalable styles.

Why naming matters

Naming your classes well makes a big difference — especially as your site grows, or when you’re working on a team. Clear, consistent class names make it easier to understand what each class is for, avoid duplicates, and keep your design system organized.

A good class name tells you what kind of styles it contains and how it should be used — without needing to inspect the styles directly.

Class naming principles

Here are a few best practices to keep in mind as you name classes in Webflow:

Be consistent. Pick a naming style and stick with it. Avoid mixing dashes, underscores, or camelCase. If you’re using prefixes, use them consistently.
Keep names short — but clear. Don’t make class names too long, but avoid abbreviating so much that the name becomes confusing. Clarity helps prevent people from creating multiple versions of the same class.
Use shared language. Align your class names with your team’s terminology or your design system. That way, everyone’s speaking the same language.
Use prefixes to show class purpose. Prefixes help make class intent obvious at a glance — for example, whether it’s a utility class, a layout variation, or a base style.

Recommended structure

While there’s no single “right” way to name classes, it’s recommended that you establish a convention for each class type we discussed in this course. Below are some ideas for how you could approach each one.

Base classes

Remember, base classes define the foundational styling for an element or pattern. Their names are often simple and descriptive.

You don’t need a prefix; just use clear, human-readable names, such as:

section
container
heading
button

Pro tip: Choose flexible names that stay useful as your layout evolves. Instead of hero-section, stick with section, then add a combo class like is-hero if needed.

Combo classes

Combo classes add a variation to a base class — like changing the background color or adding extra spacing — without creating a brand new class from scratch.

Start combo class names with a prefix like is- or has-, followed by a readable description of the variation, such as:

is-secondary
is-wide
has-shadow
is-light

Pro tip: Don’t over-nest combo classes. If you find yourself creating more than one or two combo variations on the same base class, consider creating a new base class or switching to a utility class for more flexibility.

Global classes

Global classes (sometimes called utility classes) apply a single, specific style that can be layered on top of other classes and reused across your site in different contexts.

Start global class names with u- (for utility) followed by a short description of what the class does.

Examples:

u-grid-12
u-padding-top-large
u-text-center
u-all-caps

Pro tip: Use global classes to avoid duplicating styles across your project. If you find yourself setting the same property within multiple classes, consider creating a single-purpose global class to reuse.

Putting naming into practice

Let's look at how this works. Imagine you’re building a section with three pricing plan cards. You might use:

section as the base class that defines the outer wrapper
card as the base class for the component that makes up each plan card
is-featured as a combo class to highlight the recommended plan with a different style of stroke and shadow
u-padding-top-large, a utility class to add consistent spacing to the section
u-text-center, a utility class to center content in each card

This setup keeps everything easy to read, easy to reuse, and consistent across breakpoints.