What's a 'CSS reset'?
Every browser has their own default CSS styling for elements. A CSS reset is a set of styles which helps even out the inconsistencies between each browser. Even though browsers are getting more and more alike there's still a few things I like to "reset" before I start writing the CSS for my project.
The reset
For a long time I used Eric Meyer's classic CSS reset whenever I started a project. Nowadays I just reuse some of his styles and some styles that other "web gurus" have pointed out – plus some of my own.
1. Box-sizing
*,
*:before,
*:after {
box-sizing: border-box;
}
The default box-sizing
is content-box
, meaning that the width/height of an element is determined by it's padding, border and width/height. An element with width: 200px
and padding: 40px
will be 280px
(40px on the left side and 40px on the right side) wide. There are so few scenarios where I would want that to happen that it's best to reset it to a more valuable default.
This reset makes sure that every element has the right box-sizing
by using the *
-selector.
2. Removing unnecessary margins
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
These elements have margins and I do not necessarily want that. If I want margins on my headings or paragraphs I'll add that where it seems fit, but I do not want it from the get-go.
3. Horizontal scrolling is annoying
html {
overflow-x: hidden;
}
Sometimes you find yourself in a position where you've added an element the exceeds the window's width and adds horizontal scrolling to the <html>
element.
I hate when that happens - and I struggle to find a scenario where I would want that either, so by default I remove horizontal scrolling.
4. Body
body {
scroll-behavior: smooth;
line-height: 1.5;
}
The body is the parent of everything. I give it line-height: 1.5
so that the text on my site has a nicer line-height than the default. Sometimes I even go with 1.6
to let the text breath even more. Remember: this doesn't mean that I don't have tighter line-heights on some elements, I override this wherever it seems fit, like for buttons or textareas.
scroll-behavior: smooth
secures that whenever a user uses an anchor to jump to a certain point on the website the site will scroll smoothly up/down to that point, not snap to that point like the default does. It's just a personal preferance.
5. Avoid overflowing images
img {
max-width: 100%;
display: block;
}
By default, if an image's width is wider than the container, it will overflow the container. max-width: 100%
takes care of this problem.
Images are also inline by default, so writing display: block
makes them easier to work with, like adding margin for instance.
6. Change the default link styling
a {
color: inherit;
font-weight: bold;
}
Unstyled links are blue. This makes them the same color as the parent's color. Links should also differentiate from normal text, so therefore I make them bold by default.
7. Fix the font on input elements
input,
button,
textarea,
select {
font: inherit;
}
It's so frickin stupid that I have to even write this reset, but input elements (like the ones above) does not inherit font-family
, line-height
,color
or font-size
from body
by default.
font: inherit
thankfully takes care of this.
FYI, this could also have been written like this:
input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
color: inherit;
line-height: inherit;
}
8. Remove the default button styling
button {
border: 1px solid;
background-color: transparent;
}
Buttons are ugly by default. This makes them less ugly, but I still have to override their appearance wherever I need buttons in my design.
9. Recude motion for people who prefers reduced motion
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
This is taken straight out of Adam Bell's CSS reset, so you can read more about it there.
Notice that I'm overriding the scroll-behaviour
from my body
.
The complete reset
*,
*:before,
*:after {
box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
html {
overflow-x: hidden;
}
body {
scroll-behavior: smooth;
line-height: 1.5;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
font-weight: bold;
}
input,
button,
textarea,
select {
font: inherit;
}
button {
border: 1px solid;
background-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
That's it, that's my go-to CSS resets. I always write more resets throughout a project (like ul.some-class-name {list-style: none}
), but not on a global level like the ones above.