CSS Reset or Normalize?

Question

I heard about the CSS reset and I am also aware of the Normalize CSS which is a kind of reset for browsers to render basic CSS in a standardized way.

Looking for the best solution in CSS, I wondered: Which to use?

Answer 1

The purpose of the reset files to the css are nothing more than, as the name already says, reset the default style that some elements have.

For example, buttons have a gray background, lists have markings on the sides, titles have margins, tables have borders, etc..

All these are native styles of the elements. These reset files will "delete" these styles by OVERWRITING with the css contained in that reset.css.

For example:

button {
    border:none;
    background:transparent;
}

This code css will make the buttons no longer have that style.

Why do this?

The reason for using a reset would be to prevent default properties from interfering with the layout that YOU are creating. If you use a button that has bright colors, etc. It won’t look good with a gray button, or it won’t be the same size. So one of the reasons would be the visual improvement.

Another reason would be the STRUCTURAL IMPROVEMENT. See the image below:

This is a table with the standard style. Besides the look is not attractive, note that it has undesirable edges, which will disturb its structure. To remove these edges, we use a reset to the table.

Which to use?

There is no reset better than the other, not the right one to use, not the restriction of using only one, only another, or even of using more than one at the same time. What you should do is analyze what you need and how much you need to 'clear' the default code. Many of them will create a css for elements that you will often not even use.

I, in particular, have reached the point of not using any preset reset. I myself remove the default styles of the elements I use and need.

To complement your reading, I found these links that seemed interesting:

• http://www.pinceladasdaweb.com.br/blog/2008/11/10/10-tecnicas-para-reset-css/
• http://tableless.com.br/repensando-css-resets/
• http://www.devmedia.com.br/como-utilizar-a-tecnica-css-reset/26797

Answer 2

Reset

A reset as its name says will reset all the preset settings of the browsers, this way you can define your own css, without using the features that each browser uses.

Normalize

Normalize as the name says will normalize, that is, it will try to leave the styles standardized in all browsers.

So if you want to define your own css without interference of the rules defined by the browser use reset , if you want to start based on something that already has high compatibility in browsers and add their rules Normalize it will be better.

I leave a complementary literature on the subject:

CSS: reset or normalize?

Forget normalize or resets; lay your Own CSS Foundation