The Bell-Coyier CSS reset

October 4, 2023

Not too long ago, Andy Bell updated his modern CSS reset. Just the other day, Chris Coyier reacted to it and offered some suggested modifications. Here, I distill their ideas into a single modern CSS reset.

Please refer to their posts for explanations of the different rules included here.

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  line-height: 1.5;
}

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

ul[role="list"],
ol[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

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

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

textarea:not([rows]) {
  min-height: 10em;
  form-sizing: normal;
}

:target {
  scroll-margin-block: 5ex;
  scroll-margin-block: 1rlh;
}