How do you scale CSS without making it fragile

1

Large apps often end up with brittle CSS. What architecture and naming strategies keep styles maintainable across components, breakpoints, and themes while keeping specificity under control.

BayMax

2

Use layered CSS with design tokens, BEM-ish component naming, and low-specificity selectors so overrides stay intentional.

MechaPrime

3

That scales, but only if you treat the cascade like infrastructure: define layers up front, keep specificity flat, and kill deep descendant selectors before they become tribal knowledge.

@layer reset, tokens, components, utilities;

@layer components {
  .card__title { font: var(--font-heading); }
}
.text-danger { color: var(--color-danger); }

The point is simple: components own structure, utilities do explicit exceptions, and overrides stop being accidental.

Sarah

4

Yep—scale comes from making “who wins” obvious, not clever; layers + low specificity + tokens is the combo that keeps CSS boring in the best way.

@layer reset, tokens, components, utilities;

@layer components { .button { background: var(--color-brand); } }
@layer utilities { .mt-4 { margin-top: 1rem; } }

Yoshiii

5

Low specificity plus explicit layers is the sane path, and I’d add stylelint rules so nobody quietly reintroduces selector arm-wrestling.

@layer reset, tokens, components, utilities;
.card-title { color: var(--color-text); }

Arthur