Client-First Class Naming

Client-First is a naming convention and project structure methodology for Webflow. It keeps your projects organized, scalable, and easy for other developers (or your future self) to understand.

The Core Rules

1. Custom Classes Use Underscores

Custom classes that describe a specific component use an underscore as a separator:

• section_hero
• section_features
• navbar_logo
• footer_link

The part before the underscore is the component name, and the part after is the element name.

2. Utility Classes Use Hyphens

Utility classes that apply reusable styles use hyphens:

• padding-section-large
• margin-top-medium
• text-color-white
• max-width-small

3. Every Element Gets a Class

Never leave an element with the default Webflow name ("Div Block", "Section", "Container"). Every element should have a meaningful class name.

What You'll Build

A simple page section that demonstrates proper Client-First naming. Include:

1. A section with a section_ prefixed class
2. A padding wrapper with a padding-section- class
3. A container with a container- class
4. Content inside with properly named classes

Instructions

1. Create a Section

Add a Section element and give it a class like section_hero or section_about.

2. Add a Padding Wrapper

Inside the section, add a Div Block with a class like padding-section-large. This controls the vertical padding of the section.

3. Add a Container

Inside the padding wrapper, add a Div Block with a class like container-large. Set a max-width on it (e.g., 1200px) and center it with auto margins.

4. Add Your Content

Add headings, text, buttons, or images inside the container. Give each element a descriptive class name.

5. Publish and Submit

Publish your Webflow site and paste the URL below to check your naming.

Common Mistakes

• Using PascalCase or camelCase — stick to lowercase with underscores/hyphens
• Leaving default class names — always rename "Div Block", "Section", etc.
• Mixing separators — use _ for custom classes, - for utilities