The New CSS Reset – GitHub Project

In 2021 we can create the CSS reset in a better way.

I created this new CSS reset with the new CSS cutting edge features:

  • The global CSS reset keywords, ‘unset’ and ‘revert’ keywords.
  • The new property of ‘all’ which can reset all properties combined.
  • The :where() pseudo-class to remove specfity.
  • The :not() pseudo-class with multi arguments.

The full project and more explanation you can find in the git page of this project “the-new-css-reset”.

Preview:

/*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)){
    all: unset;
    display: revert;
}

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

/* Remove list styles (bullets/numbers) */
ol, ul {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table{
    border-collapse: collapse;
}