Overview

When working on new website projects, you often run into the issue of being thrown off due to default stylings. This issue becomes more challenging to work with when considering all the different browsers.

To alleviate this issue, There are many CSS libraries and frameworks that allow you to start a project with a clean slate. These libraries and frameworks are called CSS Reset and CSS Normalization libraries.

Keep in mind, CSS Reset and CSS Normalization are often used interchangeably and achieve similar goals. However, the purposes of both are slightly different:

CSS Reset

The purpose of a CSS Reset library is to “reset” all CSS styling to remove default browser styling, sometimes setting default styling that is often used by default, for example: 

div { box-sizing: border-box; }

This allows you to start working on your project without worrying about browser inconsistencies, or forgetting to overwrite properties that may have unintended styling. Using a CSS Reset library, all styling set on an element will only be what you defined.

CSS Normalization

Just like CSS Resets, CSS Normalization libraries will provide you with a clean slate. However, unlike CSS Reset libraries, CSS Normalization libraries will provide standardized styling for all elements. For example, your headings should look the same in all browsers, Spacing should be normalized, etc. The goal of a normalization library is less about removing all default styling: the focus is to provide a base styling that is consistent across different browsers.

1. normalize.css

normalize.css is arguably the most popular CSS normalization library. It has been around for a long time and is used in some popular frameworks such as Bootstrap and HTML5 Boilerplate. From their About page, it aims to do the following:

  • Preserve useful browser defaults rather than erasing them.
  • Normalize styles for a wide range of HTML elements.
  • Correct bugs and common browser inconsistencies
  • Improve usability with subtle improvements.
  • Explain the code using comments and detailed documentation.

2. minireset.css

From the GitHub page, minireset.css is “A tiny modern CSS reset that covers the basics:

  • resets the font sizes: so that using semantic markup doesn’t affect the styling
  • resets the block margins: so that the spacing is only applied when you need it
  • resets tables: so that tabular data only takes the space it needs
  • preserves the inline paddings: so that buttons and inputs keep their default layout
  • sets the border-box box sizing: so that borders and paddings don’t affect the set dimensions
  • sets responsive media elements: so that images and embeds scale with the browser width

It can be used via npm like most modern libraries or included directly using the file or their CDN link.

3. The New CSS Reset

This is the reset that is currently being used for this site. It accomplishes its functions using modern CSS techniques that were not available at the time for older libraries. A lot of pseudo-classes are used allowing the file size to be minimal. This library was chosen for the site due to its small file size, and the fact that it is regularly updated.

4. sanitize.css

sanitize.css is a CSS normalization library that is developed alongside normalize.css. The two share similarities, with the difference being that sanitize.css provides opinionated default styling to “adhere to common developer expectations and preferences”. The base CSS file is minimal and provides additional CSS files to import only the styling you wish to have on your site.

5. The Modern CSS Reset

Despite its name, The Modern CSS Reset is a minimal CSS normalization library. It supports all normalizations used in normalize.css with other default stylings. The Modern CSS Reset provides great browser support, allowing you to support older browsers as needed.