Utility Classes

Utility classes are a distinct departure from many previous learned CSS theories, but what utility classes allow for is an excellent separation of concerns between the HTML and CSS. The singular focus for utility classes is a single class controls a single style in CSS. Utility Class has significant benefits of reducing scope expansion in the CSS and also gives greater flexibility of crafting user interface components that are currently undefined. Html should continually be written using the best standards for semantics, but it is no longer a concern to follow a components design pattern because it is applicable at the HTML level.

Utility Classes (UCs) are classes that control single styles allowing for quick manipulations of the appearance of the DOM. When combined with other UCs and toggled with javascript you can create complex and new UI without the need of writing styles into the system. Examples of some UC built UIs can be found in the brand sections under Recipes. Learn more about UCs in this section under Anatomy.