Oct 11, 2019 • ☕️ 5 min read
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.
You Think You Know CSS is an original series about some core advanced CSS topics which you think you know but might be not deep enough.
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 — 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:
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 - 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 — 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
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.
The industry darling BEM, the rebellious maverick Atomic CSS, and other incompetent solutions
It was very intimidating in the beginning but I feel this is the right thing I must do for the rest of my life.
Whether you are going to focus on frontend or backend, these are my curated list of knowledge or technologies you must master