A reset worth keeping in CSS

Not the 400-line kind: the dozen rules whose absence you would actually notice.

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

body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: 4rem;
}

body { min-block-size: 100svh; line-height: 1.5; }

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

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

How it works

1. Border-box everywhere, inherited, so a component can opt out.
2. Media elements are block-level and never wider than their box.
3. text-size-adjust stops iOS inflating text in landscape.

Keywords and builtins used here

• color
• display
• font
• margin
• rem

The run, in numbers

Lines

18

Characters to type

411

Tokens

106

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 75 seconds.

Type this snippet

Step 1 of 3 in Foundations, step 1 of 9 in Organizing CSS.

Next →