Start from a small, modern base stylesheet

Every browser applies its own default styles. A short base stylesheet removes the differences that cause real bugs, without stripping out useful defaults like focus outlines.

A few rules do most of the work:

• box-sizing: border-box on everything, so padding and borders are included in the width you set.
• Remove the default body margin.
• Make media responsive: images and video never overflow their container.
• Let form controls inherit fonts, which browsers do not do by default.
• Respect reduced motion at the base level, covered in a later chapter.

Put the base styles in their own cascade layer, as the next chapter shows, so any component style can override them without a specificity fight.

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

  body {
    margin: 0;
  }

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

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