Classes

Improve class organization, reusability, consistency and clarity.

Overview

To help manage your classes, the Base System uses a simple naming structure inspired by Block Element Modifier (BEM) and organizes classes into three different types: global, custom, and combo classes.

---

Class Naming

Class names follow natural language conventions. Plain English words, spaces and capital letters.

IMAGE OF CLASS NAMES CLEAN NAVIGATOR

This approach is a natural extension of Webflow no-code/low-code philosophy. It enhances readability, makes projects easier to collaborate on, and classes can still be targeted with custom code.

Class Structure

Class names are structured using a modified Block Element Modifier (BEM) approach:

Block

A standalone component that represents a meaningful part of the interface.

IMAGE OF BLOG SECTION BLUE OUTLINE

By grouping class names using blocks, we can easily organize our related classes. For example we can search for all our Blog classes.

Class names become too long if you try to mimic the DOM structure, use a flat class structure to simplify refactoring and keep class names short and concise.

IMAGE OF CLASS NAMES

Element – A smaller part of a block that provides additional meaning. These should describe what the element actually is or doing.

ELEMENT BLUE HIGHLIGHTED

Modifier (optional) – Represents variations or states of a block or element, adjusting appearance, behavior, or style.

Examples

Block	Element	Modifier
Hero Header Navigation Testimonial Team Logo Footer Blog FAQ Newsletter CTA Timeline Contact 404 Features Form Filter Carousel	Card Grid Input Content Image Footnote Button List Item Slide Icon Heading Tabs Link Dropdown Select Divider Details Description	Large Small Outline Border Filled Featured Primary Secondary Left Center Right Top Bottom Active Disabled Error Success Wide Tall

---

Class Types

Classes are organized into three types: global, custom, and combo classes.

Global Classes

Global classes are used across a project, for example Headings, Buttons, and Containers. By reusing these classes we can save time, reduce duplication, and make global style changes easier.

Custom Classes

Custom classes are created for specific elements that need unique styling which cannot be achieved using global classes.

Custom classes will make up the bulk of our classes in our project, and we encourage using custom classes over deeply stacking combo classes or multiple utility wrappers. We can still maintain global control and consistency using variables.

Combo Classes

Combo classes extend or modify existing classes to introduce styling variations.

---

Class Management

Don't over stack combo classes

Use combo classes for minor adjustments like font color or background color, but avoid stacking multiple combo classes, as it complicates inheritance and styling management. For deeper variations, creating a custom class is a better approach to ensure maintainability and consistency.

---