Maintainable CSS

CSS stays manageable when repeated decisions become tokens, components own their styles, and exceptions remain local. The goal is not zero duplication; it is predictable change.

Establish layers and tokens

01@layer reset, base, components, utilities;
02
03@layer base {
04  :root {
05    --space-1: 0.5rem;
06    --space-2: 1rem;
07    --radius: 0.5rem;
08    --color-accent: #4c1c62;
09  }
10}

Tokens capture shared decisions. Layers state which category may override another before selector specificity is involved.

Keep components cohesive

01.course-card { padding: var(--space-2); border: 1px solid #ded9e1; }
02.course-card__title { margin: 0; }
03.course-card[data-featured="true"] { border-color: var(--color-accent); }

Use a naming approach the team can recognize. Classes and data attributes create stable hooks; styling through deep DOM structure creates accidental dependencies.

Ship a quality checklist

• Remove declarations that are permanently overridden.
• Check every component in narrow and wide containers.
• Test keyboard, forced colors, reduced motion, and dark mode.
• Avoid global rules that silently change unrelated components.
• Document unusual calculations and browser workarounds.
• Measure unused CSS and loading cost in production.

Keep this

Build a deliberate cascade, reuse decisions through tokens, keep selectors shallow, and make accessibility part of the component contract.