Minimal CSS Reset

Reduce page weight and simplify code overhead with a minimal CSS reset.

What Is A CSS Reset?

A CSS reset is a snippet of code placed at the beginning of the CSS cascade to set, reset or 'normalize' default styling, establish a predictable starting point for customization and improve cross-browser consistency.

CSS resets in one form or another are a common part of the CSS code that styles website content. Whether added independently or included as part of a front end development framework, a CSS reset is often the first piece of CSS code included in website development projects.

The intended purpose and scope of a CSS reset can vary widely - from a few simple lines to remove default browser styling to a more comprehensive and detailed effort to make HTML elements more uniform between browsers.

Given the way modern web browsers and web standards continue to converge toward a more consistent interpretation and rendering of HTML elements and the CSS that styles them, existing popular CSS resets may be more robust than necessary, particularly for custom designs.

A small CSS reset is an easy way to simplify CSS overhead.

A Minimal Alternative

This minimal CSS reset is designed to remove some default styling on frequently-used elements and add a few common base styles:

/*--- RESET/NORMALIZE ---*/
body, h1, h2, h3, h4, h5, h6, figure, pre, dl, dd, blockquote, input[type="radio"], input[type="checkbox"] {margin:0}
legend {padding:0}
fieldset, ul, ol {padding:0;margin:0}
ul, ol {list-style:none}
body {line-height:1}
main, figure, figcaption, img {display:block} /*--- <main> for IE 11 ---*/
img {max-width:100%;height:auto}
a {text-decoration:none}
fieldset {border:0}
input, textarea, select, button {display:block;max-width:100%;font-family:inherit;font-size:inherit;color:inherit}
label {display:table}
input[type="text"], input[type="email"], input[type="password"], input[type="search"] {-webkit-appearance:none} /*--- for Safari (add/remove types as needed) ---*/
button {line-height:inherit}
button::-moz-focus-inner {border:0} /*--- for Firefox ---*/
html {text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:1.25em} /*--- optional base font size ---*/

As always, be sure to minify the code to reduce file size and logically consolidate with other files for the most efficient file compression.

Some Opinions

Obviously any tags or styles can be added, adjusted or omitted as needed, but as is this small CSS reset includes some opinions - particularly what is included and what is omitted.

These few lines focus on the HTML tags most commonly used for a modern website build, with the assumption that other tags will be added as needed or simply styled later in subsequent custom CSS.

Box Sizing

Perhaps most notable of what is omitted is applying box-sizing:border-box to all elements as is often done with the * universal selector.

Many popular CSS resets include a declaration to set all elements to use box-sizing:border-box rather than the default content-box value. Since it will most likely be needed only occasionally, it can be added only where needed.

Font Size

The very last declaration - font-size:1.25em - may be the most opinionated.

Given that most web browsers use a default base font size of 16px, font-size:1.25em increases that value to 20 pixels, which is both highly legible and also a good basis for em-based sizing, with each .05em equivalent to 1px - or more specifically, 1 CSS pixel.

Using a relative value like this rather than an absolute pixel value allows content to scale appropriately depending on the browser base font size and scaling/zooming of the page, both of which should remain adjustable by the user.

Minimize Critical CSS

Along with simplifying CSS code overhead, a minimal CSS reset helps reduce the critical CSS resources needed to render the initially-visible or above-the-fold content of the page.

Eliminate render blocking resources and manage critical vs non-critical resources for page speed: