Utilities in CSS

One job each, no context, and always the last word in the cascade.

@layer components, utilities;

@layer utilities {
  .flow > * + * { margin-block-start: var(--flow-gap, 1rem); }

  .stack { display: grid; gap: var(--gap, 1rem); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 0.5rem); }
  .center { margin-inline: auto; max-inline-size: 68ch; }

  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}

How it works

1. A utility does one thing, so its name can say exactly what.
2. Putting them in the last layer is what makes them win without !important.
3. Generate the spacing ones from the same scale the components use.

Keywords and builtins used here

• center
• ch
• cluster
• display
• flow
• gap
• grid
• inset
• layer
• overflow
• position
• px
• rem
• stack
• var

The run, in numbers

Lines

18

Characters to type

452

Tokens

128

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 90 seconds.

Type this snippet

Step 2 of 3 in Naming things, step 5 of 9 in Organizing CSS.

← Previous Next →