The Best CSS Reset Stylesheets

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:

  • The History of CSS Resets
  • A Comprehensive Guide to CSS Resets

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

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.

Related:Ā Eric Meyerā€™s thoughts on CSS3

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

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

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:

1 <code><divĀ class="blog-post <strong>typeset</strong>">
2 Ā Ā <h1>Blog Post Title</h1>
3 Ā Ā <p>My blog post.</p>
4 </div></code>

Cleanslate

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

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

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.