๐Ÿงน CSS

The Modern CSS Reset โ€” What to Actually Put in 2026

๐Ÿ“… Jul 3, 2026 โฑ 2 min read

The 200-line resets of 2010 are dead. Modern browsers agree on most defaults โ€” you need ~15 thoughtful lines.

The reset, annotated

*, *::before, *::after { box-sizing: border-box; }  /* sane sizing */

* { margin: 0; }               /* opt INTO spacing deliberately */

body {
  min-height: 100dvh;
  line-height: 1.6;             /* readable default */
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;               /* kills mystery gap under images */
  max-width: 100%;              /* never overflow their container */
}

input, button, textarea, select { font: inherit; }  /* forms don't inherit fonts! */

p, h1, h2, h3 { overflow-wrap: break-word; }  /* long URLs can't break layout */

h1, h2, h3, h4 { text-wrap: balance; }        /* nicer heading line breaks */

Reset vs Normalize (interview trivia)

Reset strips everything to zero; Normalize keeps sensible defaults and fixes cross-browser bugs. The modern approach above is a hybrid โ€” remove what causes bugs, keep what helps. Paste it at the top of every project's CSS; every rule earns its place.

โ† All Articles