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;
}