Class Naming

Webflow Class Naming Foundational Strategy

https://www.youtube.com/watch?v=QqqK30GpgPY

Why every element needs a custom component class

𝗖𝗹𝗲𝗮𝗻𝗲𝗿 𝗰𝗹𝗮𝘀𝘀 𝘀𝘁𝗮𝗰𝗸𝗶𝗻𝗴 & 𝗰𝘀𝘀

If starting with a utility class first, we'll often find ourselves adding a component-specific combo class on top like "u-container-full is-testimonial". This is a terrible practice. If we need to change the style to "u-container-small" in the future, all of the overrides we applied to "is-testimonial" are lost. Or if we need to add another utility class later, we get a utility class sandwich like "u-container-full is-testimonial u-min-height-screen". Starting with a component class first allows us to apply any overrides to that base class. This not only creates a cleaner css selector but also allows us to add or rename utility classes on top as needed.

𝗧𝗮𝗿𝗴𝗲𝘁𝗶𝗻𝗴 𝘄𝗶𝘁𝗵 𝗰𝘀𝘀 & 𝗷𝘀

Selecting an element by its utility class name or tag might seem like a great idea but either of those may have to change. Instead of targeting "u-text-style-h2", we could apply data attributes to each element, but this requires more time than adding custom classes without the added benefits of custom classes. (Data attributes should be reserved for when multiple components share the same functionality.)

𝗣𝗿𝗲𝘃𝗲𝗻𝘁 𝗮𝗰𝗰𝗶𝗱𝗲𝗻𝘁𝗮𝗹 𝗴𝗹𝗼𝗯𝗮𝗹 𝗰𝗵𝗮𝗻𝗴𝗲𝘀

Using only utility classes throughout a build is risky because even pros can unintentionally make changes that break the entire site due to how Webflow handles classes. Starting with a component class prevents accidental styling of the utility class.

𝗠𝗼𝗯𝗶𝗹𝗲 𝗼𝘃𝗲𝗿𝗿𝗶𝗱𝗲𝘀

Utility classes often can't accommodate every breakpoint-specific change, like adjusting font size on mobile or switching a grid to flexbox. Relying solely on utility classes results in cookie-cutter, templated websites.

𝗖𝗹𝗲𝗮𝗿 𝗹𝗮𝗯𝗲𝗹𝘀 𝗶𝗻 𝘁𝗵𝗲 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗼𝗿

When searching for an element, it's much easier to find specific names like "hero_content" or "hero_visual" instead of opening each "u-column-6" to find the right one.

𝗩𝗮𝗿𝗶𝗮𝗻𝘁𝘀 & 𝘀𝘁𝗮𝘁𝗲𝘀

A class like "hero_contain u-container is-tall" is more specific than "u-container is-tall". We can safely style the first example while knowing we're only affecting tall hero sections throughout the site. Adjusting the hover of "blog_card" is a more contained change than adjusting a generic "card" hover.

---

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_

---

2. Utility Classes

Faster workflow with cleaner code by applying styles that already exist

Why are utility classes important for workflow & page speed?

Anytime we add a style using the style panel, Webflow adds new lines of code to our website's css file. Webflow's css file serves all css to every page even if it contains class names and styles not used on that page. This can impact our page speed. By using utility classes, we're able to keep our code light and clean. Utility classes can also help us work faster when applying a grouping of styles that we'll reuse often. If we don't apply styles in our component class and use utilities instead, the component class will not show up in or add to our global site css.

• 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

Since utilities are always stacked on a component class, we can override any of their styles without affecting other instances of the 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

Using the class attribute, combo classes can be linked to a component field or cms field. By applying the same combo class name to multiple elements and giving each one different styles, we can adjust multiple elements from one component field.