The Age of CSS Resets

The year 2004 marked the beginning of the age of CSS resets

Why we need resets in the first place? What problems they solve? The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. We think of our CSS as modifying the default look of a document — but with a ‘reset’ style sheet, we can make that default look more consistent across browsers, and thus spend less time fighting with browser defaults.

Minimalistic Reset — Version 1

* {
  padding: 0;
  margin: 0;
}

Minimalistic Reset — Version 2

* {
    outline: 0;
    padding: 0;
    margin: 0;
}

Minimalistic Reset — Version 3

* {
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

Condensed Universal Reset

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

But CSS resets were not the right solution to a problem we were solving. We needed better approaches for cross-browser
consistency

Normalize.css

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.

• 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.

So, where normalize.css is used, it is used in frameworks like Bootstrap, in templates like HTML5 boilerplate and in websites like Twitter.

References:

• Killer Collection of CSS Resets
• CSSresetr
• Reset reasoning