Reset.css resets every design applied to HTML elements by browsers. Normalize.css try to normalize those design across browsers.
Which one is more reliable?
Reset.css is surely more reliable. It reset everything to zero, so it is more reliable and not that it gives you anything new in design of HTML elements.
Normalize.css try to make even the design of HTML elements. There is a chance that it can miss doing so. But those does not matter. You write your own design anyway!
When to use Reset.css and When to use Normalize.css?
Many places I have read that if you are going to work on a big project then use Reset.css. There you can control everything for every elements. It should not be taken like that. If I take like that then I am left to use Normalize.css for smaller projects.
I recently switched between Reset.css and Normalize.css multiple times for a project. I was seeing Normalize.css is bigger in size than Reset.css. Difference in size is measurable. Normalize.css is of ~ 7 kb whereas Reset.css is of ~ 1kb. So, I was interested in using Reset.css.
While I kept on switching from one to another, I kept on working on the web app I was working on. After decent amount of CSS I have written for my project, I again fall in trap of Reset.css and Normalize.css. Which one to finally choose! Switching started again. This time, I was comparing the effect of both on my page. Many CSS for design has been written already and website was looking better so I wanted to see the real effect of both. Without any of my own CSS, it is difficult to compare as I know that Reset.css will take everything so nothing cool will be there to see. I saw no difference in design of my page except some margin on Body when I compared so I thought to use Reset.css. So, I went and give margin:0; to my Body element. Then my eye saw no bold letter on article. Then I tested
<pre> is also coming without any difference with other text. Developer need to write their own CSS for those when Reset.css is used. So, question is what else need to be defined. and if I need to define everything then what will be the size benefits?
I compared again and saw that size different is not major. After minification, Reset.css is ~ 0.5 kb, whereas Normalize.css is ~ 0.8 kb.
Normalize.css provides advantage about using all default CSS which are there for our good. Those design are there according to the type of elements.
Normalize.css allow us to be free of so many HTML elements that we are not using right now but may use in future. What I mean is we can be rest assured that elements will have default design even if we do not give them any time.
I thought to use html5shiv.js, which is needed for IE 9 or earlier IE browser when you plan to use HTML5. Now, you may be thinking why am I talking about html5shiv suddenly?
Normalize.css has few lines of code making HTML5 elements block elements. There are few other elements for which you may not bother about or say you may not bother about very minor design differences among browsers. It may also be the case that those HTML elements are of that kind, which are rarely getting used in your project so why to bother about design differences of those. It make so thin a margin to think about those. So, delete those extra lines of CSS from Normalize.css if you wish to save few more bytes and use Normalize.css instead of Reset.css. Once done, you can use that file for all projects.
Want more about Normalize.css and Reset.css? Can be a good read!