# What is CSS Reset?

The "reset" or "resetting to zero" in French is a concept that consists of removing a certain number of default CSS values from browsers with two main objectives:

• Starting from a neutral base to design your entire site or application from scratch
• Smoothing out the display differences by default between the various browsers

Over the course of their various updates, browsers' default styles tend to look more and more alike, but there are still differences that can sometimes cause problems when integrating a design in CSS. Here are a few examples of differences between browsers:

• Default font sizes
• The weight of certain texts
• Internal and external margins of different sizes
• Uneven borders
• The display mode of several tags
• ...

A CSS reset will therefore allow you to free yourself from these differences and start from scratch for your design, but be careful, you shouldn't do just anything!

Best practices

What not to do

You might be immediately tempted to use a small piece of CSS to fix as many issues as possible at once, by adding for example:

/* Don't do that */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

The problem is that by resetting the margins and borders of all elements to zero, we have simply made all our form fields disappear.

Sure, our style is (partly) reset, but our page is no longer even usable as it is.

Using an existing functional reset

To manage to write a reset that is both smart and complete, you need to have a very good knowledge of CSS but also of the differences between the many browsers so as to only target the relevant elements and avoid any side effects.

This is notably what Eric Meyer did, whose reset script is widely used and available here: https://meyerweb.com/eric/tools/css/reset/

I've prepared an online demo so you can see the difference between a page with a default style and a page reset with the script above:

• Default version: https://nicolasbrondin.github.io/css-reset-vs-normalize-demo/index.html
• Reset version: https://nicolasbrondin.github.io/css-reset-vs-normalize-demo/reset.html

Advantages and disadvantages

We've already covered the main advantages of this method at the beginning of the article, but we haven't talked about the disadvantages that make this concept somewhat controversial.

As you could see in the previous demo, a reset page can be styled much more easily but it also loses a lot of the semantics provided by the browser's default style.

For example, the different heading levels have the same rendering, so the hierarchy of the data becomes incomprehensible until you rewrite a custom style from scratch, and to me that's the biggest drawback.

With a reset, it's too easy to forget to reapply a minimum style to respect both the hierarchy of the data and the accessibility of users across all elements.

I think a reset is a powerful tool if you plan to work on a complete theme, or a CSS "framework" and you're sure you'll be creating your own default style from A to Z.

Otherwise, I'd rather recommend that you look into "normalizing" CSS.

Reset vs Normalize

Unlike a reset, normalizing CSS simply consists of readjusting all the browsers' default styles in order to avoid major differences in styling and positioning.

The advantage is that your page will keep all its semantics and you'll be able to simply apply your custom design on top of a solid, normalized default style.

To do this, it's very simple, all you need to do is include, for example, the normalize.css file available on the website: https://necolas.github.io/normalize.css/

This normalization script is notably used by platforms and websites like Twitter, GitHub, Medium and even Bootstrap, so you can rely on it for your own projects!

If you'd like to compare the rendering of a classic page and a normalized page, I've made a demo available: https://nicolasbrondin.github.io/css-reset-vs-normalize-demo/normalize.html

Bonus

To find all the demos from this article (default, reset and normalize), they are all available in this public Github repository!