Modern CSS Reset: Small Baseline. Better Components.

A reset should remove accidents. It should not erase HTML, flatten every control, or force your team to rebuild useful browser behaviour one selector at a time.

The durable split is simple: put shared layout and accessibility defaults in the reset. Put visual choices, spacing systems, and states in components. That keeps the first stylesheet short enough to audit and every Velocity Component portable.

Use a baseline, not a wipe

box-sizing: border-box, a body margin reset, responsive media, and inherited form typography solve real cross page problems. Zeroing every heading, list, and element margin creates a private browser default sheet that the next developer has to rediscover.

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: light dark;
  }

  body {
    min-block-size: 100vh;
    margin: 0;
    line-height: 1.5;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  textarea:not([rows]) {
    min-block-size: 10em;
  }

  :target {
    scroll-margin-block: 5rem;
  }
}

color-scheme is useful only when the product genuinely supports both schemes. If your app controls theme with explicit tokens, set it alongside that theme change rather than assuming the browser can safely style every native control for you.

Keep typography decisions out of the reset

Use text-wrap: balance on short headings where the line count is bounded. Do not apply it to an entire article. Browser engines deliberately limit balancing for longer blocks, and body copy has different readability needs.

.display-title,
.article h2,
.article h3 {
  text-wrap: balance;
}

.article p {
  text-wrap: pretty;
}

That is component work. A product title, a case study heading, and a form label need different constraints. The reset should not pretend they are the same element.

Motion belongs behind a user preference

Smooth scrolling is not a free visual upgrade. Motion can make keyboard navigation less predictable and can be uncomfortable for people who ask their operating system to reduce it. Keep the opt out in the baseline so every component inherits the safe behaviour.

html:focus-within {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Velocity Components fit

Velocity Components carry their own state, spacing, and responsive rules. The Readability Kit is a useful example: its callouts and long form primitives assume a predictable baseline but do not depend on a global card system or a hidden collection of utility overrides.

That is the right contract for a subscription library. Install a component into an existing codebase, retain its intent, and avoid a reset that silently restyles everything around it.

Sources and further reading

• MDN: box sizing
• MDN: text wrap
• MDN: reduced motion preference