Utility Classes

Utility classes are very useful but can sometimes be confusing. This guide explains our recommended practices.

Utility classes are ready-made styled classes that can be quickly searched and applied. In the S2 Framework, they are prefixed with u- to make them easy to search and identify.

Use Utility Classes Wisely

Utility classes can sometimes be confusing and even problematic due to some implicit behaviors of how Webflow handles class stacking, which may not be well-known to all users. Additionally, they can be difficult to describe and remember.

We recommend following these rules:

1. Applying Utility Classes

   Utility classes can be applied directly to an element or added as combo classes for quick styling. Use utility classes either on their own or at the end. Avoid placing them in the middle.

2. Limit the number of Utility Classes

   Avoid using more than two utility classes on a single element.

3. Modifying Utility Classes

   When a utility class is used alone, it can be modified by combo classes.

   When a utility class modifies another class, you may stack one additional combo class on top. However, this additional combo class must be a direct combo class of that utility class.

Good:

• u-bg-primary is-white-text

• blog-post u-bg-primary

• blog-post is-today u-bg-primary

Still ok, but be careful not to overuse:

• u-bg-primary u-text-uppercase

• blog-post u-bg-primary u-text-uppercase

• blog-post u-bg-primary is-darker

Not recommended:

• blog-post u-bg-primary u-text-uppercase u-font-bold

• blog-post u-bg-primary is-darker u-font-bold

• blog-post u-bg-primary u-text-uppercase is-bold

• blog-post u-bg-primary is-darker is-first

It is much better to create a combo class with a descriptive name, like is-featured.

Example: blog-post u-bg-primary is-darker is-first

You should do this instead: blog-post u-bg-primary is-featured Or: blog-post is-featured 💯

Modifying the "root" utility class will affect all instances where it's used. For example, updating the styles of u-bg-primary utility class will also apply to blog-post u-bg-primary.

However, modifying blog-post u-bg-primary will add styles on top of the combo and will not affect the utility class itself.

So, while this is technically possible and some may even think it is powerful, trust us, it can cause confusion and make the site difficult to maintain over time.

Get your hands dirty!

To understand how Webflow handles combo classes and utility classes stacking, you should experience your own directly in the Webflow Designer. Go to the Read-only preview of the S2 Framework cloneable and try it out.