Use Utility Classes Wisely

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.

Utility classes can sometimes be confusing and even problematic due to some hidden behaviors of how Webflow handles class stacking, which may not be well-known to every user, and it is also hard to describe and remember.

• 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 of a class stack; avoid placing them in the middle.

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

• A utility class can be modified by combo classes only when it's used alone.

Good:

• u-bg-brand cc-white-text

• blog-post u-bg-brand

• blog-post cc-today u-bg-brand

• u-bg-brand u-text-uppercase

Still ok:

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

Not recommended:

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

• blog-post u-bg-brand cc-darker

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

Example: blog-post u-bg-brand cc-darker 😑 → blog-post cc-featured 💯

You can then modify and add styles to the combo blog-post cc-featured, or create another combo class to further modify an element, such as blog-post cc-featured cc-mini. You can also apply a utility class to the end blog-post cc-featured u-hide_xs.

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

However, modifying blog-post u-bg-brand 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 mode of the S2 Framework cloneable and try it out.