3

I have been using css reset for quite a while now in different project, and I am quite pleased with it, always get good results.

One thing that always bothered me was that I needed to overwrite a lot of elements, for example clearing the margin of an H2, and later on adding the margin again. Another thing is that a lot of elements are cleared that I do not even use.

Now I have been reading a lot about normalize.css, I also see that the HTML5 Boilerplate uses this as it's default stylesheet. It does not reset everything, it just compensates for browser differences.

If I compare the reset with the normalize I see that in the normalize a lot is left out. One big difference are the headings and paragraphs, they are left untouched in normalize. For all the rest of the elements I see that they are set to specific margins and padding.

So actually the way I see it is as follow:

Reset.css: You begin from 0 and then build your way up. Add your margin, add your styles. You add this above your project and you are ready to go. Minor browser inconsistencies you add along the way.

Normalize.css: You begin somewhere is the middle which is a consistent state in all browsers, and work your way up or down (adding or removing margin/padding) by changing the sheet itself.

Now in the end of your project, you end up pretty much in the same place. Differences I can think of are:

  • with normalize you have a stylesheet that is more optimized than the one with the reset as you only have what you need.
  • You can't just copy and paste the normalize sheet from one project to another, it is most of the time custom made for a particular project.

In the end, I think you are better of with the normalize script, as it has a smaller footprint.

So is this correct or am I looking at this the wrong way and just stick with the normal reset.

2 Answers 2

1

What you describe as normalize is what I understand Eric Meyer to be saying about how you should use reset.css: [1]

It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline.

and [2]

It's easier for most people to create a block of styles that zero everything out and then build from that foundation. That said, there’s nothing wrong with people grabbing the reset styles, modifying them to their own personal defaults, and using that as an ongoing foundation.

3
  • Oh no I will edit in the links. With reset I mean the style sheet from eric meyer, but with the normalize i an talking about the stylesheet that html5 boilerplate uses, the basic idea is found here: necolas.github.com/normalize.css Commented Nov 9, 2011 at 18:39
  • @SaifBechan, my point is that if you use reset.css in the way Eric Meyer suggests and you use normalize.css in the way they suggest, they'll converge on something rather similar if not identical. (Although I see that normalize has a lot of HTML5-specific hacks which reset doesn't, so that might be a consideration). Edit: actually, I see that you made that point yourself. I may delete or rewrite this answer after thinking about it a bit. Commented Nov 9, 2011 at 18:58
  • Yes it is exactly as you say, they are quite same, only the normalize has a lot more hacks for html5, especially the version that html5bolerplate usses. That's why I am considering putting starting with normalize.css in my new projects, instead of the everything to zero approach. Just wondering is there are some special considerations people might suggest. Commented Nov 9, 2011 at 20:14
0

Both are good solutions, but the best solution is whatever fits your project, I would fork one (or both) of them and adapt them to your needs.

If you find that you never ever use blockquote and the styles for it are just causing bloat, then remove it in your version.

1
  • You are right that you have to look at what suites your project best, I was wondering if there were any major benefits of choosing one above the other. So far not. Commented Nov 9, 2011 at 20:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.