CSS gets better when it has fewer opinions

CSS gets better when it has fewer opinions.

That sounds like a complaint until you look at the diffs that usually hurt the most. A new margin here, a special shadow there, a button variant for one screen, a page-specific heading size because the global one was almost right. None of those changes feels expensive in the moment. Together they turn the stylesheet into a pile of exceptions that the next change has to remember.

The problem is not style. The problem is too many local arguments.

defaults do the heavy lifting

Good defaults are worth more than fancy variants.

The site should already know how text wraps, how links behave, how code reads, how spacing feels, and what focus looks like before a page asks for help. If those defaults are steady, most pages can stay quiet.

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

code,
kbd,
samp,
pre,
.type-mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

That kind of rule does not make a splash. It just keeps the common case from needing a patch every time.

special cases should be hard to miss

Special treatment is fine when the page really needs it.

A homepage treatment can be expressive. A product launch can have a visual moment. A blog card probably does not need its own private universe. If a component wants a custom radius, a new shadow, or a separate spacing scale, I want that exception to feel expensive enough that somebody will ask whether it belongs in the system.

The test is simple: will I want this again?

If the answer is yes, promote it. If the answer is no, keep it visibly local.

tokens should name roles

CSS variables work when they describe decisions.

--surface-wash tells me a role. --profile-orbit-blue tells me a component-specific choice. --cool-blue mostly tells me somebody liked blue that day.

I want token names that help the next person answer three questions:

• what role does this value play?
• where is it allowed?
• what breaks if it changes?

If the token cannot answer those questions, the system may not be ready for it yet.

one layout language is enough

Layout drift is where CSS starts feeling haunted.

One page uses flex with gap. Another uses grid with local margins. Another creates a new wrapper because the hero needed to overlap. Another invents a slightly different container because the first one was close but not quite. The result is a site that makes every new page invent grammar instead of content.

I like a small vocabulary:

• page container
• prose container
• dense toolbar
• repeated item grid
• full-width band
• split layout when the content actually needs it

That is enough. The rest should stay rare.

dark mode exposes the weak spots

Dark mode is a good lie detector.

If the system is role-based, the theme swap is manageable. If colors are scattered through page-specific classes, every adjustment becomes a scavenger hunt. The same is true for shadows, borders, and low-contrast text that looked harmless in light mode.

Boring CSS survives theme changes because fewer pieces are improvising at once.

That is the version I trust: a small set of global decisions, a few component-level exceptions, and no appetite for local drama.