The New CSS Reset

Why Do We Need A CSS Reset?

Normalize CSS Vs. CSS Reset Approach

/** 
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/* http://meyerweb.com/eric/tools/css/reset/     
v2.0 | 20110126
License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/** 
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
Every inspection of an element in the browser’s Dev Tools will show you this huge
CSS selector.
@import "resets/normalize.scss";
@import "resets/reset.local.scss";
/****** Elad Shechter's RESET *******//* box sizing border-box for all elements */*,
*::before,
*::after { box-sizing:border-box; }
a { text-decoration:none; color:inherit; cursor:pointer; }
button { background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer; }
figure{ margin:0; }
ul, ol, dd { margin:0; padding:0; list-style:none; }
h1, h2, h3, h4, h5, h6 { margin:0; font-size:inherit; font-weight:inherit; }
p { margin:0; }
cite { font-style:normal; }
fieldset { border-width:0; padding:0; margin:0; }

The New Way to Reset CSS in 2021

the max-width’s initial value is ‘none’.
max-width: initial; /* = none */ 
width: initial; /* auto */
position: initial; /* = static */
/* will get parent element value */font-size: inherit;  
line-height: inherit;
color: inherit;
max-width: unset; /* = initial = none */font-size: unset; /* = inherit = get parent element's value */
/* 
Reset all:
- Inherited properties to inherit value
- Non-inherited properties to initial value
*/
* {
all: unset;
}
div { 
display: unset; /* = inline */
}
span {
display: unset; /* = inline */
}
table {
display: unset; /* = inline */
}
/* The inline value will be applied to every HTML element */
HTML div tag’s user agent’s base style
div { 
display: revert; /* = block */
}
span {
display: revert; /* = inline */
}
table {
display: revert; /* = table */
}

Creating “The New CSS Reset”

/* 
Reset all the "User-Agent-Stylesheet" styles,
except for the 'display' property
*/
* {
all: unset;
display: revert;
}
/* works on every element except for content elements */*:not(iframe, canvas, img, svg, video):not(svg *) {    
all: unset;
display: revert;
}
/* these styles don't affect the element when I use CSS reset with the :not() pseudo-class with multiple arguments */div { 
color: red;
}
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {    
all: unset;
display: revert;
}
/* Preferred box-sizing value */*,
*::before,
*::after {
box-sizing: border-box;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
web forms
input[type="checkbox"],
input[type="radio"] {
/* base styles here */ &:checked {}
&:disabled {}
&:focus {}
}
input[type="radio"] { border-radius:50%; }
input,
textarea,
select {
all: revert;
}

To Summarize

The new CSS reset — GitHub page

Browser Support

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store