Utilities

Small reusable pieces of CSS

Utilities are handy for styling individual elements, but this is a balancing act between what’s maintainable and what’s a mess.

If we only use utilities, our code becomes unmanageable and prevent approaches that leverage the strengths of the language. A rule of thumb is to write custom CSS when the chain of utilities on an element contains around five to six classes. We have basic flexbox utilities, but for more complex layouts, it’s recommended to write new CSS.

How it works

Look up classes in the various sections or search using class names or CSS properties. Apply them to the markup like this:

<div class="maxw40r mbl pam bg-gray2">
  <div class="text-1.25r">
    Use design system classes before writing new CSS
  </div>
</div>

Which applies the following properties:

.maxw40r { max-width: 40rem; }
.mbl { margin-bottom: 2rem; }
.pam { padding: 1rem; }
.bg-gray2 { background-color: hsl(0, 0%, 95%); }
.text-1\.25 { font-size: 1.25rem; }

Resulting in: