Utilities work within the constraints that you define in your theme settings and stylesheet, ensuring that changes can be made quickly and in a consistent manner. You can tweak your theme’s colors, spacing, typography and much more without having to write any additional CSS.
For example, text alignment utilities like .text-left provide direct control over the alignment of text within an element and can be combined with other utilities to quickly and easily change the appearance of an element or even the entire page.
Although nothing is stopping you from adding additional class names to elements and then styling those classes, once you experience the benefits of this atomic or utility-first approach you’ll have trouble working any other way. Adopting utilities as part of your workflow will allow you to:
-
Achieve consistency
Foundational styles are defined through theme settings, ensuring that all changes are made in accordance with them.
-
Work efficiently
There’s no need to invent arbitrary class names for elements which differ only slightly in appearance.
-
Make changes confidently
You can make changes confidently without having to worry about how it affects other parts of the help center.
-
Rapidly prototype ideas
Because everything’s modular, you can copy and paste compositions and layouts between themes or from the Pattern Library.
-
Avoid writing CSS
Because you don’t have to write custom CSS your attention can remain focused on the actual page templates.
-
Maintain and scale easily
You theme code will be easier to maintain and scale in the future, saving you time and money.
Because utilities are low-level you’re never encouraged to build the same layout twice. Even without changing a single setting it’s easy to make elements and entire layout look completely different. Once you’ve spent some time using them you’ll wonder how you got by without them!