The Modern CSS Reset

Browsers have default styles that get in the way. Here's a minimal reset that makes sense.

The Full Reset

css

123456789101112131415161718192021222324252627282930313233343536

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

/* Remove default margin */
* {
  margin: 0;
}

/* Body defaults */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form elements */
input, button, textarea, select {
  font: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Root stacking context */
#root, #__next {
  isolation: isolate;
}

Why Each Rule

Box Sizing

css

123

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

Makes width/height include padding and border. Essential for predictable layouts.

Remove Margins

css

123

* {
  margin: 0;
}

Browsers add margins to headings, paragraphs, lists. Remove them and add your own intentionally.

Line Height

css

123

body {
  line-height: 1.5;
}

Default is too tight. 1.5 is readable for body text.

Font Smoothing

css

123

body {
  -webkit-font-smoothing: antialiased;
}

Looks better on Mac. Lighter, more consistent.

Media Elements

css

1234

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

block removes the annoying space below images
max-width: 100% prevents overflow

Form Elements

css

123

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

Form elements don't inherit font by default. This fixes it.

Text Overflow

css

123

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

Prevents long words from overflowing containers.

Isolation

css

123

#root, #__next {
  isolation: isolate;
}

Creates a new stacking context. Prevents z-index conflicts with portals/modals.

Optional Additions

css

123456789101112131415161718

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

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

/* Remove list styles */
ul[role="list"], ol[role="list"] {
  list-style: none;
  padding: 0;
}

The Point

A good reset is small and intentional. It removes browser quirks without overriding everything. Add styles you need, not styles you'll fight against.