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:

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.
Limit the number of Utility Classes
Avoid using more than two utility classes on a single element.
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 cc-white-text
blog-post u-bg-primary
blog-post cc-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 cc-darker

Not recommended:

blog-post u-bg-primary u-text-uppercase u-font-bold
blog-post u-bg-primary cc-darker u-font-bold
blog-post u-bg-primary u-text-uppercase cc-bold
blog-post u-bg-primary cc-darker cc-first

It is much better to create a combo class with a descriptive name, like cc-featured.
Example: blog-post u-bg-primary cc-darker cc-first
You should do this instead: blog-post u-bg-primary cc-featured Or: blog-post cc-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.