A Simple and Minimal CSS Reset

Web developers use CSS resets to counteract the default styles various browsers apply. Different browsers apply different default styles, leading to inconsistencies in your design when viewed across multiple browsers.

These days, browsers don't have massive differences, so it isn't as necessary anymore. That said, I do think resetting helps with a few things.

The purpose of a CSS reset:

Improve consistency: Resetting your styles can ensure your website or web app appears similar across different browsers and that your styles are intentional. Reduce browser testing: With a CSS reset, you'll spend less time testing your site across browsers to check if they apply a particular default style. Remove default styles: Some default styles, like the padding and margins on the body element or the list styles on ul and ol elements, are commonly unwanted. A CSS reset can remove these upfront, saving you time.

A simple reset

Here's the reset I start most of my projects with:

/* Because the default box-sizing is stupid... */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* #root and #__next cover my usual frameworks - Optional if you arent using one! */
html, body, #root, #__next {
  height: 100%;
}

body {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  /* Optional but I like to apply a base font always */
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

/* Stop long words causing overflow */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

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

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

If you think something is missing, let me know in the comments. 👇

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉