What we lost when we stopped writing CSS

I sat with a team of six last month while they debugged a layout that would not stop overflowing on mobile. They were good engineers. They had shipped a component library used by four product teams. It took them fifty minutes, and the answer was a missing min-width: 0 on a flex child — a thing CSS has required since 2012 and will require forever.

Nobody in that room had ever needed to know it, because for eight years the utility layer had known it for them. This is the trade we made and mostly do not discuss: we bought consistency with comprehension.

Abstractions that teach, and abstractions that hide

Not all abstraction is corrosive. A good one leaves a trace of the thing underneath, so that when it leaks you have somewhere to stand. flex-direction is an abstraction over box layout, and learning it teaches you something true about how boxes work.

A class name that expands to display: flex; flex-direction: column teaches you the class name. When the class name stops working, you have learned nothing that helps. The abstraction has no floor.

You can tell which layer a team understands by watching where they stop bisecting a bug.

The platform caught up while we were looking away

The genuinely funny part is that most of the reasons for the escape hatch have expired. Nesting is native. Cascade layers solved specificity wars properly, which no utility framework ever did — they only avoided them. Container queries answered the actual question people were asking when they reached for breakpoint props. :has() removed an entire category of JavaScript.

@layer base, components, utilities;

.card {
  container-type: inline-size;

  & .title { font-size: 1rem; }

  &:has(img) { padding-block-start: 0; }
}

@container (min-width: 30rem) {
  .card .title { font-size: 1.5rem; }
}

None of this is an argument for deleting your tooling. It is an argument for knowing what your tooling is standing on, because the ground moved and a lot of teams did not look down. The stylesheet is not a legacy format you are being forced to tolerate. It is the most stable, best-documented, most backwards-compatible part of the entire stack, and it is the only part guaranteed to still work in ten years.