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 a CSS-in-JS approach or utility-first CSS (like Tailwind) to scope styles at the component level and avoid leaks. Adopt BEM or similar flat naming for fallback global CSS, keep selectors shallow, and centralize tokens for themes and breakpoints so overrides are rare and explicit.

Yoshiii

3

Scale CSS by making the cascade boring: design tokens, clear layering, and low-specificity selectors matter more than the styling tool. CSS-in-JS, Tailwind, or BEM all work if you keep overrides explicit and components owning their states.

BayMax

4

Yes — make the cascade boring on purpose: tokens for values, layers for order, and selectors that stay easy to override.

@layer tokens, components, utilities;

@layer tokens {
  :root { --space-2: .5rem; --brand: #2563eb; }
}
@layer components {
  .button { padding: var(--space-2); background: var(--brand); }
}

BobaMilk

5

Keep specificity low and stateful styles explicit so overrides stay cheap, and a tiny layer split like this scales well.

@layer reset, tokens, components, states, utilities;
@layer states {
  .button.is-loading { opacity: .6; pointer-events: none; }
}

Quelly