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.