Mr Branding: The Best CSS Reset Stylesheets

Monday, June 1, 2015

The Best CSS Reset Stylesheets

Resetting your CSS to baseline property values is useful for gaining control, predictability, and uniformity with regards to how browsers render your HTML elements.

To learn about CSS resets in greater detail, see these articles:

If you’re looking for a stylesheet to help you reset your CSS, in my opinion, these are your top options right now:

Reset CSS

Eric Meyer’s Reset CSS — this is the stylesheet that made CSS resets a mainstay. Reset CSS either nullifies a default CSS property by setting it to 0, or it sets the property to a common-sense value (e.g., line-height: 1 on the <body> element). Explicitly declaring certain CSS property values can help reduce inconsistencies in the way our HTML elements are rendered by the browser.

Note that Reset CSS was last updated in 2011. Many CSS reset stylesheets we’ll be talking about haven’t been updated in a while.

HTML5 Reset Stylesheet

This reset stylesheet by Richard Clark is a modification of Eric Meyer’s Reset CSS. This CSS reset is geared towards modern HTML 5 elements. Other tweaks found in HTML5 Reset Stylesheet are the removal of a :focus pseudo-class reset and the use of attribute selectors to target the <abbr> and <dfn> elements in a way that minimizes the scope of their style rules.

CSS Mini Reset

This is a minimalist CSS reset by Vladimir Carrer. It only has four CSS style rules. It only resets the most frequently-used HTML elements — the ones you’ll actually use in your web development projects. Check out CSS Mini Reset on GitHub.

reset.css (from HTML5 Reset)

This stylesheet is part of the HTML5 Reset boilerplate. Its inception was inspired by three open source projects: Reset CSS, HTML5 Reset Stylesheet, and HTML 5 Boilerplate. This reset stylesheet is robust and opinionated. For example, it has specific style rules for the :before and :after pseudo-classes and it sets the box-sizing property to border-box, which your other options don’t do.

Marx

This CSS reset is a boilerplate stylesheet for small website development projects. For simple websites, such as one-page sites, you most likely don’t need to use a big front-end framework like Bootstrap. In these cases, Marx is an option to consider.

Specialized CSS Resets

These two CSS reset stylesheets are purpose-specific:

Typeset.css

This is a baseline CSS reset just for Web typography. It’s geared towards text-heavy sites and web pages, such as blogs and news sites.

Note that Typeset.css will only work on HTML elements that are the children of an element with a class of typeset. So to implement Typeset.css, you’d need to do something like:

<div class="blog-post typeset">
  <h1>Blog Post Title</h1>
  <p>My blog post.</p>
</div>

Cleanslate

This CSS reset stylesheet is extremely aggressive. It’s designed for use on content that will be distributed on another website, a scenario where your control over style rules is restricted. Cleanslate uses an !important declaration on all property values to force browsers not to follow normal cascading and CSS specificity rules. This gives you a fighting chance when it comes to overwriting the style rules of the third-party website.

CSS Normalization: A Modern Alternative

Browsers today are pretty good at setting appropriate default styles. Also, they now abide by modern standards and best practices. Default styles are now more predictable and consistent across the board.

So, instead of doing a blanket reset on all the default browser styles, we can instead focus only on specific HTML elements and CSS properties that aren’t being rendered uniformly in different browsers. We keep the other useful browser defaults.

That’s the main idea behind CSS normalization.

In other words, for our unstyled HTML elements, we implicitly let the browser or the normalization stylesheet set the style rules for us. This way, if we forget or don’t assign a style rule to an element, they will still render predictably and consistently across the various browsers.

One benefit of CSS normalization is it keeps our stylesheets DRY. We aren’t resetting an HTML element’s property values to 0, only to overwrite the property declarations farther down the cascade with another style rule.

Related: Should You Reset Your CSS?

Here are the top two CSS normalization stylesheets to check out:

Normalize.css

This popular CSS normalization stylesheet is used in major sites like Twitter and GitHub, and is a dependency in big open source projects like Bootstrap and HTML5 Boilerplate. Normalize.css is the one that started it all.

sanitize.css

This CSS normalization stylesheet is by Jonathan Neal, the co-author of Normalize.css. sanitize.css has style rules that will help you render HTML elements consistently in different browsers. This normalization stylesheet has a Sass version, which many developers will appreciate.

Mr Branding