Class Naming
Last updated
Was this helpful?
Last updated
Was this helpful?
Every element must have a component class. It shows that the element can only be used within a specific component. It also allows for global style updates to a specific component design used throughout our site. With practice & the Lumos Chrome Extension, the process of creating component classes becomes effortless. As long as the component names are unique, the element names like "title", "text", or "img" are highly reusable across components. Component classes...
Contain underscores instead of dashes
Must never have more than 3 underscores
Must be applied to every element
Must always be the first class applied to an element
_wrap
marks the start of a new component.
Three parts: type_variation(optional)_element
In this example, slider is the type
of section. Vertical is the variation
if there's multiple types of slider sections. Wrap, contain, title, & text are all elements belonging to the slider_vertical_
section.
A grouping of related elements within a parent component
In this example, .footer_link_wrap
is a child component inside the .footer_wrap
component. This prevents naming collisions when both components have children with the same names like _text
.
Can be used inside any section
Start with g_
Often turned into a Webflow Component in the Global /
component folder
Should not be stacked on top of other component classes (unlike utilities)
Faster workflow with cleaner code by applying styles that already exist
Start with u-
Contain dashes, not underscores
Should always be stacked on top of a component class
Can be used in any section of the website
It's recommended to apply style overrides to the custom component class, but style overrides can be applied to the utility without affecting other instances of that same utility.
When a utility class is stacked on a component class, we can rename the utility to swap it out for a different one. Any overrides we applied to this instance of the utility will stay in place. Renaming this "u-text-style-h2" class to "u-text-style-h3" will not change the global "u-text-style-h2" class. It will only rename the class that was stacked on top of every hero_title element throughout our site.
If Webflow says a class name "already exist" when renaming, rename the class to u-
. After that class is renamed, change it back to the full class name.
Create the class on an element that has no other classes.
Start class name with u-
followed by the broadest search term possible.
Example: searching u-text-
shows all text related classes. Searching u-text-transform-
filters down to all text transform classes.
Add the new class inside the styleguide page to prevent removal during class cleanup.
When adding a new utility, reorder it in the stylesheet to avoid any specificity issues. Utilities should be above any custom component classes in the stylesheet. Utilities with multiple styles applied should be above utilities with only a single style applied. https://www.youtube.com/watch?v=lUQSmFiS3BY
Applies specific modifications to an element
Start with is-
Contain dashes, not underscores
Modify an existing class
Should be created on top of a component class (not on top of utilities)