CSS Pro

Overview

Modern CSS — cascade layers, container queries, :has(), subgrid, custom properties, and logical properties — has retired most of the hacks and half the frameworks. Professional CSS means understanding the cascade instead of fighting it with specificity wars, choosing layout tools deliberately (grid vs flex vs flow), architecting with layers and tokens, and writing CSS that survives the next developer.

The through-line: the cascade is a feature — architect for it, don't carpet-bomb it with !important.

When to use

• Writing or reviewing CSS for idiom and maintainability.
• Debugging specificity, layout, or cascade issues.
• Architecting stylesheets (layers, tokens, naming).
• Choosing layout approaches (Grid, Flexbox, multicol).
• Building responsive, accessible, themeable interfaces.

Core concepts

• The cascade, controlled. Specificity (inline > ID > class > element), source order, and now cascade layers (@layer base, components, utilities) — layers let you declare precedence explicitly instead of winning specificity arms races. Put resets in low layers, utilities high.
• Custom properties as the design API. --color-primary, --space-4, --radius-lg — theming (dark mode = redefining tokens), runtime changes via JS, and scoped overrides. Properties inherit and cascade; use that instead of preprocessor variables for anything dynamic.
• Layout: the right tool. Grid for two-dimensional layout (page structure, cards, dashboards); Flexbox for one-dimensional distribution (nav bars, button rows, centering); normal flow for documents. subgrid for aligning nested grids; container queries (@container) for components that respond to their container, not the viewport.
• Modern selectors. :has() (parent-aware styling), :is()/:where() (:where() has zero specificity — perfect for resets), logical properties (margin-inline-start for RTL correctness), clamp()/min()/max() for fluid type and spacing without breakpoints.
• Architecture that scales. Layers + a naming convention (BEM-ish or utility-hybrid) + tokens; colocate component styles or centralize deliberately — but one system per codebase. CSS Modules or scoped styles for component isolation where the stack supports it.
• Accessibility is styling too. prefers-reduced-motion (disable non-essential animation), prefers-color-scheme, focus-visible styles (never remove outlines without replacing them), sufficient contrast as a token-level concern, not a per-component hope.

Practical workflow

1. Set up the foundation. Reset (modern: *, *::before, *::after { box-sizing: border-box; margin: 0 } + sensible defaults), @layer order declared, tokens defined on :root.
2. Define tokens first. Colors (semantic: --surface, --text, --accent), spacing scale, type scale, radii, shadows, motion durations. Components consume tokens, never raw values.
3. Write layout top-down. Page grid → section layout → component internals. Choose grid/flex per axis deliberately; verify at 320px and 200% zoom, not just your monitor.
4. Style states accessibly. :hover, :focus-visible, :disabled, [aria-*] — every interactive element has visible focus and disabled states; motion respects reduced-motion.
5. Debug systematically. DevTools: which rule won and why (the cascade panel shows it); reduce to a minimal case; check inheritance vs specificity vs layer order before adding weight.
6. Review CSS for: specificity creep, raw values instead of tokens, magic numbers, !important (each needs justification), untested responsive behavior, and missing reduced-motion handling.

Modern CSS sketch:

@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    --color-surface: #ffffff;
    --color-text: #1a1a1a;
    --space-4: 1rem;
    --radius-lg: 0.75rem;
  }
  @media (prefers-color-scheme: dark) {
    :root { --color-surface: #161616; --color-text: #f0f0f0; }
  }
}

@layer components {
  .card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    /* container-aware: adapts to its wrapper, not the viewport */
    container-type: inline-size;
  }
  @container (min-width: 40rem) {
    .card { display: grid; grid-template-columns: 1fr 2fr; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Common pitfalls

• Specificity wars. #app .container div.item span to override a library — then the library updates and everything breaks. Layers, :where(), and lower-specificity source order instead.
• !important as a habit. Occasionally justified (utility overrides, reduced-motion reset); systemically it's a sign the layering/architecture failed.
• Pixel-perfect at one viewport. Fixed widths and magic breakpoints that shatter on real devices. Fluid type/spacing (clamp()), container queries, and testing at extremes.
• Removing focus outlines. outline: none without a replacement — keyboard users are now lost. :focus-visible with a strong, on-brand indicator.
• Animating layout properties. width/top/margin animations jank (layout thrash). Animate transform and opacity (compositor-friendly); use the Web Animations API or CSS transitions deliberately.
• Global namespace collisions. Generic class names (.title, .container) colliding across features. Scoping (modules, layers, naming convention) per the project's system.
• Ignoring logical properties. margin-left in an RTL language breaks layout. Use margin-inline-start/padding-block for direction-aware styling from the start.