The New CSS Reset

Why Do We Need A CSS Reset?

Every browser loads a style file called the User-Agent-Stylesheet, which defines default styles for HTML elements.

Normalize CSS Vs. CSS Reset Approach

When it comes to how to reset the styles, there are two main approaches:

  • The Gentle approachNormalize CSS.
  • The Aggressive approachCSS Reset.

Normalize CSS (the gentle approach)

The Normalize CSS's main goal is to resolve browsers’ differences and create consistent basic styles across all of them.

/** 
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}

CSS Reset (the aggressive approach)

Unlike Normalize CSS, CSS Reset’s main idea is very different — it assumes that most of the browsers’ default styles do not fit our projects’ needs, and therefore its main goal is to remove most of them.

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

Which is Better to Use?

This section is, of course, my personal opinion. But you will be surprised by my answer.

/** 
* 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

New reset keywords have been added to CSS in recent years: initial, inherit, unset, revert. Besides these, CSS now also provides the special all property, which allows us to reset all of the properties at once.

Two Types of Properties

There are two groups of properties in CSS:

  • The Inherited properties group - consists of properties that inherit
    definitions from parent elements by default; they are mostly typographic properties (font-size, color, etc.).
  • The Non-inherited properties group - consists of the rest of the properties, and they aren’t affected by parent elements’ definitions.

Every Property Has an Initial Value

Another basic of CSS I want to talk about is CSS properties’ initial values.

the max-width’s initial value is ‘none’.

The Basics of Resetting in CSS

Our first challenge is that we have two groups of properties, and they have to be reset differently.

max-width: initial; /* = none */ 
width: initial; /* auto */
position: initial; /* = static */
/* will get parent element value */font-size: inherit;  
line-height: inherit;
color: inherit;

Auto Reset

To reset these two categories of properties, inherited and non-inherited, we will use another special reset keyword: the unset keyword.

max-width: unset; /* = initial = none */font-size: unset; /* = inherit = get parent element's value */

Reset All Properties Together

CSS has many properties, and we want to make sure that they’re all reset without having to go through them one by one.

/* 
Reset all:
- Inherited properties to inherit value
- Non-inherited properties to initial value
*/
* {
all: unset;
}

CSS’s Default Values Aren’t Always Desirable!

However, in some circumstances, restoring CSS to its default values is
insufficient. For example, if we reset a <div>‘s display property to unset, the initial value that we get will be inline rather than block. Examples:

div { 
display: unset; /* = inline */
}
span {
display: unset; /* = inline */
}
table {
display: unset; /* = inline */
}
/* The inline value will be applied to every HTML element */

Reverting to the Browser’s Default User-Agent-Stylesheet

The default styles in our browser are derived from two sources:

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”

Now that CSS has all these new reset features, creating a CSS Reset is much simpler than up till now.

Basic Idea

With all of this knowledge, I began working on my new CSS reset:

/* 
Reset all the "User-Agent-Stylesheet" styles,
except for the 'display' property
*/
* {
all: unset;
display: revert;
}

Not Everything is Perfect

Having said that, there are a few more details to take care of.

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

More Special Resets

With our 2021 perspective, we can see that some CSS features have been implemented incorrectly. When I built this new CSS reset, I aimed to solve those common problems.

/* Preferred box-sizing value */*,
*::before,
*::after {
box-sizing: border-box;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}

Form Elements

In the past, form elements, such as <input type=”checkbox”>, <input type=”radio”>, <select> and others, were difficult to reset. Over the years, I’ve seen many web developers utilize CSS hacks on the <label> element to style those elements.

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

In this article, we looked at why CSS resets are useful, what sorts of CSS Resets already exist, and how to combine their resets.

The new CSS reset — GitHub page

Browser Support

To create: “the new CSS reset” project, I have used CSS features that while they are cutting-edge, are already implemented in all evergreen browsers:

  • Chrome, Edge: version 88+
  • Firefox: version 84+
  • Safari/iOS: version 14+
  • Opera: version 75+
  • Samsung Browser: version 15+

--

--

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