Finding the balance

For me, one thing I look for is something that might change frequently, in inconsistent ways.

For example, in our design, we have three sections one after the other, where the background color changes for each one.

We could do that like this:

<section class="section"> ... </div>

<section class="section bg-accent"> ... </div>

<section class="section bg-dark"> ... </div>

I much prefer this than trying to come up with a meaningful name for each section based on the content.

The content might change, making the class name you created meaningless.

And if the design is updated and we need to change the background, it's very easy to do with this approach.

I also don't really like doing something like this:

<section class="section"> ... </div>

<section class="section section--accent"> ... </div>

<section class="section section--dark"> ... </div>

The reason I don't like using a modifier here is the only thing it's doing is changing the background color, and then if I needed to do something similar somewhere else, I'd repeat myself.

A simple class that helps me change between backgrounds is great.

We don't need an .inverse in this project, but often those change background and text colors. I still consider that a utility.

On the other hand, I wouldn't do that for the cards in the three column layout.

I could do something like this for each one:

<div clas="bg-light padding-md br-2"></div>

But then I have to repeat that for each card, and then if the designer decides they want to change the colors, or padding, or border radius, I need to change it for each one.

Also, these same styles are used in the grid on the second page as well, where repeating it would be even more annoying.

Instead, something like this would work:

.card {
  background: var(--background-light);
  padding: 1rem;
  border-radius: var(--border-radius-3);
}

And then, if I need to make an update, I know it's updating all of my elements that use that class.

My quick wins

These are the classes I think will be useful to get started with:

@layer utilities {
  .text-center {
    text-align: center;
  }
  .text-brand {
    color: var(--text-brand);
  }
  .text-high-contrast {
    color: var(--text-high-contrast);
  }

  .section-title {
    font-size: var(--font-size-heading-regular);
  }

  .background-base {
    background-color: var(--background-base);
  }
  .background-light {
    background-color: var(--background-light);
  }
  .background-extra-light {
    background-color: var(--background-extra-light);
  }
  .background-dark {
    background-color: var(--background-dark);
  }
  .background-extra-dark {
    background-color: var(--background-extra-dark);
  }

  .background-accent {
    background-color: var(--background-accent-dark);
  }

  .font-size-sm {
    font-size: var(--font-size-sm);
  }
  .font-size-regular {
    font-size: var(--font-size-regular);
  }
  .font-size-md {
    font-size: var(--font-size-md);
  }
  .font-size-lg {
    font-size: var(--font-size-lg);
  }
}

This is how I like to work

Some people prefer having no utilities at all, whereas others like having a lot more.

I've gone from using none, to using a lot, and now I adjust project to project.