The Webflow class system we use on every build

Open an inherited Webflow project and you can usually date it. There is a class called blue-heading that is no longer blue, another called section-2 sitting in section five, and eleven variations of a button that differ by a pixel.

None of this happens because the original builder was careless. It happens because Webflow makes it trivially easy to create a class and slightly awkward to reuse one, and that difference compounds over a couple of years.

Name things after what they are

The single rule that prevents most of the damage: a class describes the role of an element, never its appearance. card-title survives a rebrand. blue-heading becomes a lie the first time someone changes the palette.

This sounds obvious written down. It is still the convention most often broken, usually at four in the afternoon when someone needs one heading to be slightly larger.

Three tiers, and nothing else

We allow exactly three kinds of class in a project.

Layout classes handle structure: containers, grids, section padding. There are perhaps a dozen and they are set once at the start of the project.

Component classes describe a thing on the page: card, card-media, card-title. They are built once and reused everywhere.

Utility classes cover the small adjustments: spacing steps, text alignment, colour tokens. They are drawn from a fixed scale, and the scale is the point. If a utility does not exist for the value you want, the correct move is almost always to use the nearest one that does.

The type and spacing scale is not negotiable

We define a type scale and a spacing scale in the first week and treat them as fixed. Every margin in the project is one of eight values. Every text size is one of seven.

The constraint does two things. It makes the site look composed rather than assembled, because relationships repeat. And it makes the project maintainable, because a new person can only make choices that were already sanctioned.

Combo classes, sparingly

Webflow combo classes are useful and dangerous in equal measure. Our rule: a combo class may modify a component, never define one. card is-featured is fine. card is-featured is-large is-dark blue is a class system that has given up.

If you need more than one modifier, you probably need a second component, and that is a cheaper conversation to have at build time than eighteen months later.

Write the convention down

The system only survives if the next person can find out what it was. Every project we hand over includes a page inside the site itself, unlisted, showing every component and every utility with its class name next to it.

It takes a day to build. We have never regretted it, and clients who came to us from another studio always say the same thing: it is the first time they have been able to see what they own.