Class Naming

1. Component Classes

Show relationship between elements. Allow for global updates to a specific component design used throughout our site.

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

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.

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

https://youtu.be/8RBs278onMA?si=4ObEFjsZQK5tEYmg&t=176

---

Utility Renaming

When a utility class is stacked on a component class, we can rename the utility to apply a different style to the custom class. Any overrides we applied stay in place.

https://youtu.be/8RBs278onMA?si=wZrJzAi2x056LvSQ&t=202

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.

---

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.

https://www.youtube.com/watch?v=HQB6-RhiIlo