Classes
Learn how to create and manage classes that improve organization, reusability, consistency and clarity.
Last updated
Learn how to create and manage classes that improve organization, reusability, consistency and clarity.
Last updated
Classes are how we style elements in Webflow. As your project grows, It can be easy for classes to become disorganized and bloated. 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 names follow natural language conventions. Plain English words, spaces and capital letters. 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 names are structured using a modified Block Element Modifier (BEM) approach:
Block – A standalone component that represents a meaningful part of the interface. By grouping classes inside of blocks, we can easily search to see all of our related classes.
Element – A smaller part of a block that provides additional meaning. These should describe what the element actually is or doing.
Modifier (optional) – Represents variations or states of a block or element, adjusting appearance, behavior, or style.
Classes are organized into three types: global, custom, and combo 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 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 extend or modify existing classes to introduce styling variations.
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.
Class names become difficult to manage when elements are nested three or four levels deep. Instead of mimicking the DOM structure, use a flat class structure to simplify refactoring and keep class names short and concise.
