2

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.

1
  • 2
    I wouldn't concern yourself with writing "efficient" css, you will never notice the difference in performance.
    – user229044
    Aug 26, 2010 at 20:24

7 Answers 7

3

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.

2

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)

2
  • How exactly does styling a button or input element become impossible due to the * selector? If I'm not mistaken, * has a specificity of 0 so every rule you write will overwrite the *.
    – Moses
    Aug 26, 2010 at 20:40
  • 1
    have you ever tried to write css rules that style a button EXACTLY like how it looks natively? In different browsers, different OS's and so on? Yeah, if you want custom buttons then there's no problem, if you don't, you're in a world of pain. Aug 27, 2010 at 13:22
1

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.

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/

1
  • I know that's the intent, my point was that it seems to waste a lot of time when the browser interprets the CSS.
    – Moses
    Aug 26, 2010 at 20:26
1

I discover a base CSS to use to replace the reset CSS. The Base CSS if for making all browser the same but not to just remove all style that you will need to put back later.

Explication here: http://blog.teamtreehouse.com/setting-rather-than-resetting-default-styling

CSS base here: http://tjkdesign.com/ez-css/css/base.css

Its like Use Nicolas Gallagher's Normalize.css but more simple and easy to use

0

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.

0

Use Nicolas Gallagher's Normalize.css - http://necolas.github.com/normalize.css/

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.