Every web developer had an experience where he test his web site on Chrome, IE and FireFox, to find out that the experience is a little bit different, because browsers have their own default implementation and rendering for the HTML elements.
Which means if you don’t overwrite the default implementation with your own CSS rules, then the browser will use its own implementation.
If you are very keen on making the exact same user experience between all browsers even with the smallest details, then the community came up with a technique called “CSS Reset”.
Explain some Cons about CSS Reset
Many developers won’t implement CSS Reset, because in most cases you are going to have your own rules for most of the HTML elements.
So, if you implement CSS Reset, or the ones the come by default, then you will be doing double work, because you are implementing a rule, then you override it, which means double processing time.
Adding to that, it might end up that the reset rules will override your desired rule, if the selectors for the reset rules where more specific than your desired rules.
But it is still better than nothing
But, in-spite of all these issues, it is an effort that worth doing, and there are already ready to use one, and all what you have to do is include them in your build, plus all CSS frameworks like Bootstrap
or Foundation
already implement them, so you don’t have to do anything if you use them.
How to use them?
If you are using a CSS framework like Bootstrap
or Foundation
, then they already added a css reset, so you have to do nothing.
If you are building your css on your own, then you can use one of the ready to use off-the-shelf CSS reset libraries.
For example: