Webflow Client-First Naming: The Rules for Classes, Sections, Components and Interactions

Key takeaways

• Client-First is a naming and structure system for Webflow, made by Finsweet. Its docs say a developer, client or marketer should understand a class from its name, even if they have never heard of Client-First.
• One character decides the class type. A class with an underscore is a custom class. A class with only dashes is a utility class. A combo class adds the is- prefix to a base class.
• Names go from general to specific. Finsweet's example is text-size-large, not large-size-text, because the order makes class search and folders work.
• Do not deep stack classes. The docs give four reasons, and the main one is that Webflow will not let you reorder a stacked list in the Styles panel.
• Every section gets a section_ name. It acts as a sitemap in the Navigator, so a client can find the right block without help.
• Components use Group / Identifier and interactions use Element [Action + State].

All rules below come from Finsweet's Client-First documentation at finsweet.com/client-first/docs, read on 1 November 2026.

The three class types and how to tell them apart

Finsweet's classes strategy page names the types. The easy way to tell them apart is the look of the name.

"Global" does not mean "utility". The docs say any class meant to manage styles across the whole project is global, and a custom class can be too. Their example is faq_item, used for every FAQ item on the site.

A combo class does not work alone. The docs say is-brand only works as an addition to the base button class. If you see is- you know there is a base class next to it.

How to name a class: general to specific

Finsweet's naming goal is no abbreviations, no shorthand and no confusion. A class name should say what the class does and where it sits in the site.

The pattern is keywords that move from general to specific. The docs break text-size-large into three parts:

1. text says it is about a text element.
2. size says it changes font size.
3. large says which size.

For custom classes, the docs use team-list_headshot-wrapper. The part before the underscore is the group, team-list. Then comes the element, headshot, then what it is, wrapper. Add more elements inside and the list stays tidy:

• team-list_headshot-wrapper
• team-list_headshot-image
• team-list_headshot-texture-layer
• team-list_headshot-background

A wrong and right list

These are our own illustrations of the rules above, using a made-up pricing section. They are not from Finsweet's docs, and the right column simply applies the rules.

Do not deep stack classes

Finsweet calls this a universal rule: do not deep stack. Deep stacking means many classes stacked on one element. The docs list their reasons:

The docs say this is a Webflow-specific view. In hand-written CSS, stacked classes can be faster. In Webflow, they say, a custom class is quicker to make and easier to manage.

Their example is a background texture. Instead of stacking background-absolute, fit-size and opacity-low, create one custom class named services-item_background-texture. The name says what it is, and you can edit it freely.

Utility classes still have a place, but the docs say they should not build the whole project. Use one when it makes the job simpler. Use a custom class when it does not.

Page structure and section names

Finsweet's core structure page describes the default layers of a page.

1. page-wrapper
2. main-wrapper
3. section_[section-identifier]
4. container-large

In the default structure, the docs say global padding and section padding sit directly on the section through variables, so no extra classes or layers are needed. When a project needs more control, the alternative structure adds a layer inside the section with padding-global and padding-section-[size].

What each layer does, per the docs:

The docs suggest naming sections for what is on the page, such as section_header, section_about, section_testimonials and section_contact. The list works as a sitemap of the page, which helps when you onboard a client.

Spacing, variables and sizes

Finsweet's spacing strategy and utility class systems pages use one fixed set of size names for padding, margin and gap. A size name means the same distance whichever class you use it through.

That is 13 sizes, as shown on the docs' utility class page on 1 November 2026. Variables control the values, so a project can change them.

The variables page explains why. A value is defined once and reused, so one change updates the whole site. Client-First splits variables into five collections: Base, Theme, Typography, Layout and Sizes. It also separates primitive tokens, named by value such as red-100, from semantic tokens, named by purpose such as Background > primary. The docs say to style with semantic tokens and avoid linking primitives straight to classes without a strong reason.

Folders, components and interactions

Folders from underscores

The folders page explains that the underscore creates a virtual folder in the Designer, with Finsweet's extension doing the grouping. One underscore equals one folder. Their example is nav_primary_logo-wrapper: a nav_ folder, a primary_ folder inside it, then the element logo-wrapper. Any class without an underscore goes into the Utility folder.

The docs say to nest with purpose. A small site may need one folder level only.

Component names

The component naming page uses Group Name / Component Identifier, such as Card / Blog Post or Global / Nav. The slash is visual only. Webflow does not create a group from it, so you create the group in the Components panel and move the component in. A component named Card / Blog Post that sits outside the Card group, the docs say, defeats the purpose.

Interaction names

The interactions naming page uses Element [Action + State], for example Nav Menu [Open] or Sort Button Arrow [Rotate Open]. Keep names short, capitalise each word and put the action and state in square brackets. The docs say to add a trigger such as Click or Hover with care, because one interaction can run with different triggers on desktop and mobile.

A short naming audit for an existing project

Use this list on any Webflow project.

1. Open the Styles panel and count classes with names like div-block or a trailing number. Each one is a rename job.
2. Check that every section has a section_ name in the Navigator.
3. Look for elements with four or more stacked classes. Each is a candidate for one custom class.
4. Check that sizes come from variables and not typed pixel values.
5. Check components and interactions follow one format.

If you find a mess, rename page by page on a staging copy and look before you publish.

When Client-First is not the right fit

Keep your own system if these are true:

• A small team already shares a clear convention. A working system beats a switch for its own sake. The docs themselves say the system is a set of principles you adapt.
• The site is one page with a few dozen classes. Folders and variable collections may be more than you need.
• You are not on Webflow. The rules are written for the Webflow Designer and its Styles panel. The docs say Client-First is a collection of principles created specifically for Webflow.

A naming system does not make a site fast or fix a bad layout. It makes a site easy to edit later. If you are weighing platforms, our Webflow vs Framer comparison covers the editing side.

How we help at Amariq

We build on Webflow, and clear class names matter most on the day someone else has to edit the site. If your project is full of names like div-block-47, we can audit the structure, agree a naming plan and rename page by page on staging before anything goes live. On a new build, we set up naming and variables from the start.See Webflow development and Webflow maintenance.

Related reading

Figma to Webflow shows how Figma layer names become classes. Webflow CMS, Webflow forms and Webflow pricing by plan cover other parts of a build. Red flags when hiring a Webflow agency and website maintenance cost cover handover and upkeep.

Frequently asked questions

What is Client-First in Webflow?

Client-First is a documented system of naming and structure rules for Webflow projects, published by Finsweet. Its docs describe it as principles created specifically for Webflow. It covers classes, page structure, spacing, variables, folders, components and interactions.

Why do Client-First custom classes use an underscore?

The underscore creates a virtual folder in the Designer. Utility classes have no underscore and go into the Utility folder.

What does the is- prefix mean?

It marks a combo class, a variant of a base class. In the docs, button is-brand means the brand version of the button. A combo class only works with the base class before it.

What is deep stacking and why avoid it?

It is putting many classes on one element. Finsweet says it makes styles hard to reorder in the Styles panel, slows edits and raises the learning curve. Its fix is usually one clearly named custom class.

Do I have to use Client-First utility classes everywhere?

No. The docs say utility classes are optional and should not be used to build the whole project. Custom classes with margin or padding are acceptable when they are faster.

Can I use Client-First on a site that is already built?

Yes, as a clean-up and not a rebuild. Rename by page on a staging copy, check the layout, then publish. Renaming a class to a name that is already in use can change how elements look, so check the staging copy.

How should I name a section?

Use section_ followed by what the section is, such as section_testimonials. The docs say this gives the Navigator a sitemap feel that helps both developers and clients.