Izaak’s Standard CSS Reset

Izaak Schroeder
Bootstart
Published in
2 min readJan 7, 2019

There are lots of CSS resets available. This one is based on work with Neal Granger and Eric Meyer’s classic CSS reset with additional rules to strip the styling of other components including inputs and links, as well as enforce some box-sizing best practices. See below for a complete breakdown of the rules herein.

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
article,
aside,
canvas,
figcaption,
figure,
footer,
header,
hgroup,
main,
output,
section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
display: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input, textarea, button, select {
appearance: none;
background: none;
border-color: currentColor;
border-style: none;
border-width: medium;
border-radius: 0;
margin: 0;
padding: 0;
color: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
vertical-align: baseline;
}
::placeholder {
opacity: 1;
color: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
font-family: inherit;
}
a:link {
text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
color: inherit;
}
::-webkit-inner-spin-button {
appearance: none;
}
::-webkit-outer-spin-button {
appearance: none;
}
::-webkit-search-cancel-button {
appearance: none;
}
::-webkit-search-results-button {
appearance: none;
}
::-ms-clear, ::-ms-reveal {
display: none;
}
::-webkit-contacts-auto-fill-button {
display: none;
}
input {
-moz-appearance: textfield;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
height: 100%;
}
body {
min-height: 100%;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Breakdown

--

--