The Bell-Coyier CSS reset
Written by Tony Mottaz
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;
}