Basic CSS reset

Modern CSS reset to reduce browser inconsitencies and light enough so that it can be added upon

Dec 4, 2021 | Read time 1 minutes

The purpose of a CSS reset is to have consistencies between browsers - Firefox, Safari, Chrome. Without resets, you can have different line-heights, margins, borders, fontsizes and so on.

For the lazy, you can get away with a lot with just the following CSS reset:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Further, I prefer to have control of the root html and body element, setting the smooth scroll behavior and the default line height to be 1.5.

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

Specifc resets for different elements

The below are resets for different types of html elements. Removing borders, list stylings and border spacings for elements like tables, ol, ul, images etc.

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

ol,
ul {
    list-style: none;
}

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

img {
    border-style: none;
}

blockquote,
q {
    quotes: none;
}

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

Reset the attributes and states of elements

[hidden] {
    display: none !important;
}

[disabled] {
    cursor: not-allowed;
}

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