Skip to content

Lazzzer00/Best-CSS-Reset-2024

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

The Best CSS Reset of 2024!

Table of contents

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.

Releases

No releases published

Packages

No packages published

Languages