Utility classes do one job each, and live in the last layer.

Components like .card style a whole thing. A utility class does one small job: .u-flush removes margins and .u-muted softens text. You add one in the HTML when a single spot needs a tweak, instead of writing a new rule.

A utility must always win, or it is useless. Put utilities in the last cascade layer, after components. Then .u-flush beats .card .title with no ids and no heavier selectors.

Keep each utility tiny and build it from tokens, like .u-gap-3 reading var(--space-3).

<div class="card">
  <h2 class="title u-flush">Holiday plans</h2>
  <p>Booked for August.</p>
</div>

@layer components, utilities;
@layer components {
  .card .title {
    margin: 16px 0;
  }
}
@layer utilities {
  .u-flush {
    margin: 0;
  }
}