The Opinionated Decision on CSS Resets

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

CSS resets refer to any solutions that fix above problem. Those solutions can be categorized by the way they touch browser default styles — resetting, normalizing, and personalizing.

They try to achieve a combination of following tasks but different in degree of how much aggressive and opinionated they override default styles:

• Undo any opinionated browser default styles
• Correct browser styling errors in older browsers
• Create a consistent, largely opinionated, style base

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.

Resetting

Resetting is a very aggressive approach that wipes out all browser default styles and lets you start from scratch. It imposes a homogenous visual style by flattening everything, all HTML tags will have no padding, no margin, no border, same font-size and same alignments.

These resets are intended to be used as a starting point, not a self-contained black box of no-touchiness.

• Modern browsers have fewer quirks so the hard reset is unnecessary.
• It removes valuable parts like the headings or margins so you have to redeclare styles for all the common elements, let alone many we didn’t know existed or edge cases in browsers you don’t use.
• 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.

Meyerweb’s reset - was created more than 10 years ago, intentionally very generic. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline.

minireset.css - a tiny modern library that resets font sizes, resets block margins, resets tables, preserves the inline padding, sets the border-box box sizing, etc.

Normalizing

Normalizing is a modern approach that retains useful default browser styles. 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.

Normalizing is way better than resetting:

• You don’t have to redeclare styles for all the common elements.
• It might also fix common styling errors in older browsers like 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.
• It doesn’t spam your developer tools with a bunch of useless code because there isn’t a large inheritance chain.
• It 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 - The most popular, modern, HTML5-ready CSS reset library in this category. It normalizes styles for a wide range of elements, corrects bugs and common browser inconsistencies, improves usability with subtle modifications, and explains what code does using detailed comments.

Modern-normalize - It’s a port of Normalize that, as the name suggests, is modernized to remove some of the older stuff and add a few opinionated bits.

Personalizing

Personalizing is an approach that built upon previous approaches by resetting or normalizing default browser styles first, then add some opinionated base styles which suit a unique need or follows a design system.

Resetting is not efficient and deprecated. Normalizing makes elements look consistent across browsers and it does it well, but it does not remove the user agent’s assumptions about how things look. Personalizing provides a rich ready-to-use highly-opinionated baseline.

sanitize.css - A reset library developed alongside and synced with normalize.css, which means every normalization is included, and every normalization and opinion are clearly marked and documented.

Reboot.css - A reset file designed for Bootstrap framework, built upon normalize.css, provides many HTML elements with somewhat opinionated styles using only element selectors, additional styling is done only with classes.

Conclusion

There is no absolute right or wrong answer when it comes to CSS resets. Each developer will have their own opinionated decision on which gets the job done. My favorite approach is to include normalize.css untouched and build upon it, overriding the defaults later in my CSS if necessary.