Skip to content
Web Dev

CSS Reset

Do you need a reset.css file? What should yours look like?

Why use a reset.css

Historically the main goal of a CSS reset was to ensure consistency between browsers. But in recent times the differences have drastically decreased and we might want to keep some styling like font-style: italic for <em> elements.

So nowadays I use a css reset to start from a blank slate, styles that would get applied to any project regardless of it’s requirements.

CSS reset examples

Different variations of a reset.css:

This is the reset.css Josh W Comeau uses, included on his blog post are also explanations for his decisions.

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


* {
  margin: 0;
}


body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


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


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


p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}


#root, #__next {
  isolation: isolate;
}

The CSS reset I use

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


* {
    margin: 0;
}


html {
    color-scheme: dark;
}


html[data-theme='light'] {
    color-scheme: light;
}


body {
    -webkit-font-smoothing: antialiased;
}


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


img {
    font-style: italic;
}


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


p, h1, h2, h3, h4, h5, h6, code {
    overflow-wrap: anywhere;
}


p {
    text-wrap: pretty;
}


h1, h2 {
    text-wrap: balance;
}


ul[role="list"] {
  list-style-type: none; /* Do <ul role="list">, to use when list is semantic*/
  padding: 0;
}


:has(:target) {
    scroll-padding-top: var(--navbar-height)
}


@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
    }
}

So this is my CSS reset.

Explanations and the technical details on these are further explained on the sites I’ve linked to down below in the Sources & References part at the bottom of this page.

There are some things I also usually use like some way to set the height to fill the screen like this:

.s-full-height {
    min-height: calc(100svh - var(--navbar-height) - var(--footer-height));
}

A page with helpful utility classes like these is on the CSS Utility Classes page.

Helpful Sources & References