Is there a better alternative to using css reset?

Question

I've been trying to build a web site and I was using a CSS Reset Stylesheet to aid in cross-browser compatability. However, now that I am looking at the results in Firebug, it looks like all CSS Resets do is spend a lot of wasted time traversing up the DOM. For instance, a simple line of code like:

<div><span><p>...</p></span></div>

Will inherit a bunch of wasted styles from p, span, div, body, and html which will probably be overwritten by a class or id anyways. And for many of the scenarios I can think of, a simple inheritance from body{} would suffice. This seems really inefficient to me.

My real question is, would it be better practice if I just set:

* {margin:0; padding:0; border:0;} and maybe body {font-size:62.5%}

Or is that code equally inefficient? At this point, those two CSS rules seem to be the only useful part of a reset stylesheet.

Answer 1

"which will probably be overwritten by a class or id anyways"

That's the intent. The reset is 'zeroing out' all styles so you can declare everything yourself by over-riding them.

As for your other question, yes, I'd tend to agree. The universal selector should be all you need and put all your 'zeroed out' styles in that if you're going for a rather basic reset.

Eric Meyer's reset isn't too big, though:

http://meyerweb.com/eric/tools/css/reset/

Answer 2

Css isn't eficient anyway, it was built on the assumption that computers are fast enough anyway (which is a truth for css), so don't worry about your css being efficient.

Instead, do whatever you feel is more readable, but think about someone else being able to take over your project later as well.

Answer 3

Don't use the universal selector to do a CSS reset. I learned this the hard way, but it's rather impossible to get buttons and input elements and things like that to look normal/native when you do that.

Actually, it's not rather impossible, it's just impossible.

You're much better off using a css reset made by someone else who seemed like they know what they're doing: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ (that is to say this is one of the most widely used css reset scripts out there)

Answer 4

To quote Eric Meyers about his Reset style sheet.

That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”. Nor am I saying that everyone must use them or else be cast into darkness. Remember before that I termed these “my take on the topic of reset styles” (emphasis added). Your take may be subtly or greatly different. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults. Simply the act of taking those defaults into consideration and thinking about them closely puts you ahead of 99% of your peers. I do think that reset styles are quite useful; otherwise, I wouldn’t have written about them here, and certainly not to the extent that I have. My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers.

If you discover that a simpler reset style sheet works best for you then I really can't disagree with you. I think you have identified the parts that really matter for layout purposes, and if that is all you are looking for, you don't have to push it any farther.

Answer 5

Certainly universal selector's performance is not better than other multiple selectors. You can test it here and read about it here.

That said i think that css performance is not much of an issue unlees you are dealing with an exceptionally huge dom.