Class Naming

Intro to Lumos Class Naming Convention

1. Component Classes

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.

---

Child Component Classes

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.

---

Global Component Classes

• 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)

---

2. Utility Classes

Faster workflow with cleaner code by applying styles that already exist

Why are utility classes important for workflow & page speed?

Utility classes can help us work faster when applying a grouping of styles that we'll reuse often. Utilities can also be used inside the class attribute on a component prop for increased flexibility.

• 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

---

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.

---

Utility Renaming

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.

---

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 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. 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)