The Best CSS Reset of 2024!

Table of contents

• Table of content
• Box sizing
• Margin and padding
• List decoration
• Scroll behavior
• Link underline
• Image and videos
• Inputs
• Prefers reduced motion
• The Body and HTML

Box sizing

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

This sets the percived size of the element in the DOM to include its border.

Margin and padding

*{
    margin: 0; 
    padding: 0; 
}

Because some HTMl elements have default margins and paddings on them, this sets the default margin and padding behavior to 0.

List decoration

ul[role='list'], ol[role='list']{
    list-style: none; 
}

For all ordered and unordered lists, turn off the decoration (the number and dots).

Scroll behavior

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

Set the scroll behavior of all scrollable elements to smooth.

Link underline

a:not([class]){
    text-decoration-skip-ink: auto; 
}

Make the link underlines and normal underlines skip the "hooky" letters and symbols (q, y, j, g). Makes them look more natural.

Image and video settings

• Responsiveness

  img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto;
  }

  Images aren't repsonsive by default, and they become by setting this. Magic.

• Inline images

  img, picture, svg, video, canvas{
    vertical-align: middle; 
  }

  This sets the inline immages to align with the text next to them.

• Font on images ? (stay with me)

  img, picture, svg, video, canvas{
    font-style: italic; 
  }

  In the case an images doesn't load, setting and alternative text that explains the image and that is italic tells the user.

• Backroung images

  img, picture, svg, video, canvas{
    background-repeat: no-repeat; 
    background-size: cover;
  }

  If you want to set an image as a background but the connection is slow, a worse quality image will load first, while the real one loads.

Inputs

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

Make these elements inherit fonts from parent elements.

Prefers reduced motion

@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

Simply put, this turns off animations for people who don't want to see them. (The only usecase for !important)

The Body and The HTML elements

body, html{
    height: 100%; 
    scroll-behavior: smooth; 
}

This makes the elements full screen while keeping the scrolling smooth.