Class Naming

Intro to Lumos Class Naming Convention

1. Custom Classes

When building custom sections, every element must have a custom class. It allows for easily targeting elements with custom css, clear labels in the navigator, and global design updates to each element with that custom class. With practice & the Lumos Chrome Extension, the process of creating custom classes becomes effortless. As long as the prefix is unique for each component type, the element names like "layout", "content", "visual", "title", or "text" are highly reusable. Custom 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, hero is the type of section. Secondary is the variation if there's multiple types of hero sections. Wrap, contain, title, & text are all elements belonging to the hero_secondary_ section.

Child Group (Custom Classes)

A grouping of related elements within a parent group.

In this example, .footer_link_wrap is a child group inside the .footer_wrap parent group. This prevents naming collisions when both groups have children with the same names such as _text.

2. Utility Classes

Utility classes can help us work faster when applying a grouping of styles that we'll reuse often. Try to not over stack utilities. Apply styles like margin or flexbox to the custom class when possible.

  • Start with u-

  • Contain dashes, not underscores

  • Should always be stacked on top of a custom class

  • Can be used in any section of the website

Utility Overrides

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 as long as the utility is stacked on a custom class.

Utility Renaming

When a utility class is stacked on a custom 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.

Creating New Utilities

  • 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 using the Finsweet Chrome Extension 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

3. Component Classes

Designed for one time use within a single component.

  • Start with c-

  • Contain dashes, not underscores

  • Have less specificity than utilities so utilities can override them

  • Not used anywhere else throughout the site

4. Combo Classes

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)

PreviousBreakpointlessNextPage Structure

Last updated

Was this helpful?