The opinionated decision on CSS resets

Browsers ship with a set of default styles that are applied to every web page in what is called the user agent stylesheet. Most of these styles are consistent across all user agents. However there are some inconsistent styles like header padding, button border, line height, display mode, font size and margin, etc.

So how serious is the problem of inconsistent default styles? It depends on browser versions you target (the older the worse) and your expectation on consistent styles across browsers.

Currently there are three popular approaches - Reset CSS, Normalize CSS, Custom CSS - to this problem, different in terms of how much aggressive and opinionated they override styles. Basically they try to achieve a combination of following tasks:

- Undo any opinionated user agent styling
- Correct user agent styling errors in older browsers
- Create a consistent, largely opinionated, style base

Reset CSS

Reset CSS — an approach that resets the styling of all HTML elements to a consistent baseline. It is a very aggressive approach that wipes out all the default styles and lets you start from scratch. If you want to truly start from scratch, a reset file will let you do that.

The first attempt was Eric Meyer’s original reset created more than 10 years ago. The reset reasoning was to make default look more consistent across browsers, and thus spend less time fighting with browser defaults.

Reset CSS imposes a homogenous visual style by flattening the default styles for almost all elements. We define all HTML tags to have no padding, no margin, no border, the same font-size and the same alignments.

It’s true that Reset CSS was helpful and spared from the headaches, but it has some drawbacks:

• It removed the valuable parts like the headings or sup/sub formatting. Modern browsers have fewer quirks, and the hard reset is unnecessary.
• It is unreadable when debugging because they have a big chain of selectors and make a lot of unnecessary overrides.
• It often fails to bring browsers to a level starting point with regards to how an element is rendered - particularly true of forms.

minireset.css is a tiny modern library that follows CSS Reset strategy and well maintained until today with following features:

- It resets tables
- It resets the font sizes
- It resets the block margins
- It preserves the inline paddings
- It sets the border-box box sizing
- It sets responsive media elements

Normalize CSS

Normalize CSS - an approach that retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common elements. When an element has different default styles in different browsers, it aims to make those styles consistent and in line with modern standards when possible.

Normalize CSS fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements, correcting font-size for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.

Normalize CSS doesn’t try to make you a clear code, its goal is to create a right and consistent starting point which achieve less code after all.

Normalize CSS doesn’t spam your developer tools with a bunch of useless code because there isn’t a large inheritance chain.

Normalize CSS is broken down into relatively independent sections, making it easy for you to see exactly which elements need specific styles. Furthermore, it gives you the potential to remove sections (e.g., the form normalizations) if you know they will never be needed by your website.

Normalize.css is a modern, HTML5-ready library that follows Normalize CSS approach. It makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

- It preserves useful defaults, unlike many CSS resets
- It normalizes styles for a wide range of elements
- It corrects bugs and common browser inconsistencies
- It improves usability with subtle modifications
- It explains what code does using detailed comments

Custom CSS

Custom CSS — This approach incorporates the benefits of each of the methods. We want the benefits of the Normalize CSS, while in other cases we want the benefits of a Reset CSS without those big chains of ugly CSS selectors.

Many developers use normalize.css, with little bit of reset.css, and with their own custom base styles.

reboot.css is a Custom CSS reset inside Bootstrap framework. It is built upon normalize.css, providing many HTML elements with somewhat opinionated styles using only element selectors.

- It uses box-size border-box by default on all elements
- It resets browser styles for consistent cross-browser development
- It keeps a simple, elegant and natural base-style on elements
- It's definitely opinionated designed for Bootstrap world
- It doesn't have its own repo, it's a part of Bootstrap

Conclusions

There is no absolute right or wrong answer when it comes to browser resets. Each developer will have his or her own opinionated decision on which gets the job done.

CSS resets can save you a lot of time matching a duplicate experience for each web browser. Just keep in mind these resets may not be necessary for every website and you should begin to understand the purpose of individual CSS libraries over repeated use.

The story of CSS resets has always been controversial. But Normalize CSS was initially very important when HTML5 came out because it also showed the browsers what defaults the new semantic tags should have.

You probably had some problems you didn’t know of in certain weird edge cases in browsers you don’t use. If you look through normalize.css code it does a very good job of documenting what problems - many we didn’t know existed - it’s fixing.

My favorite approach is to include normalize.css untouched and build upon it, overriding the defaults later in my CSS if necessary.