My CSS Reset/Base

Since writing about the state of CSS resets in 2018, I’ve had a few people ask what my modified CSS reset looks like. As I mentioned in that article, my reset is more like a base at this point because, in addition to resetting some default browser styles, I also include some utilities that I want in every project.

You can view the entire CSS file in my Github repository, which will be kept more up to date, but here is an explanation of everything I’ve included at the time of writing.

A warning, this is very opinionated. I’m writing about this to share my personal preferences and not arguing that anyone else should work the way I do. That said, I’m interested to hear what you think and how you reset/base your projects, so do leave a comment below.

Resetting margins, paddings, and borders #

html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

The first thing I always do is remove the margin, padding, and border on all elements besides the form fields. This is largely taken from Meyer’s CSS Reset with two modifications.

The first modification is that I only included the selectors of elements I'm likely to still use. For example, I removed deprecated elements such as menu, but I also didn't include valid elements I never need to use, such as the ruby element.

The second modification is that I moved the resetting of the font styles to another selector, as you'll see below.

Typography #

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    line-height: 1.4;
}

* {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

a,
a:visited {
    color: inherit;
}

I’m still partial to the method of setting 62.5% font-size on the html element then using the rem unit everywhere else. I don’t have a strong reason for doing it this way, it’s more inertia at this point for me.

I also reset the font-family, font-size, and line-height on every element to inherit from its parent. This is pretty opinionated and is actually a new addition to my reset file. I do it this way because, generally speaking, I want to be proactive about setting any font styles that are different from the paragraph elements. Also, it’s really handy for the form elements like input or button to already be styled like the default body text. Using the default Meyer Reset, I always had to style the font of these elements separately.

Finally, I generally prefer the link colour to be the same as the body text so I set that to inherit as well.

Layout & box sizing #

article,
aside,
footer,
header,
nav,
section,
main {
    display: block;
}

* {
    box-sizing: border-box;
}

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

Here, I set the correct display on the HTML5 elements and set the box-sizing on all elements to border-box.

Resetting specific element styles #

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol,
ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
}

img {
    border-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none;
}

In this section, I target specific elements and undo some of the styling that the browsers add by default. Most of this is pretty standard for CSS resets.

Attributes & states #

[hidden] {
    display: none !important;
}

[disabled] {
    cursor: not-allowed;
}

:focus:not(:focus-visible) {
    outline: none;
}

Next, I handle the styling for certain HTML attributes or states.

Any element with the hidden attribute should not be visible.

Setting the cursor to not-allowed for disabled elements is a style I personally like to add to all projects.

The :focus:not(:focus-visible) selector allows me to remove the outline in cases where the browser has deemed that the focus does not need to be visible. For browsers that don’t yet support the :focus-visible pseudo-class, the entire rule is ignored and the outline remains as normal.

Screen reader only utility #

.sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    left: -9999px;
    top: -9999px;
}

Finally, I always add this sr-only utility class. I add this to HTML elements that should remain in the document, but should be visually hidden.

What’s in your CSS reset/base? #

I wouls really love to see what you include in your CSS reset or base, if you have a custom one. Feel free to write your own article and comment the link below!