0

Possible Duplicate:
What is the performance impact of CSS's universal selector?

I'm using the box-sizing property on my stylesheets because it makes everything much easier to lay out.

The way I do it is I make all elements that are fundamental to the layout class="box", and I reset the .box class to border-box. My reasoning being that it's best practice to be as specific as possible. But I recently saw someone use this:

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box;         
}

This is ideal in that it resets all elements and takes 0 back-end fiddling, but would it be a bad idea in terms of performance? Just how expensive is a universal selector for an entire document?

Community
  • 1
  • 1
iDontKnowBetter
  • 443
  • 1
  • 7
  • 19
  • 1
    It's worth mentioning that using `box-sizing` will break your site in IE7 and earlier. – Spudley Jul 26 '12 at 20:32
  • 1
    It's worth mentioning that this is already broken in IE8 (you didn't include `-ms-` prefix). As for IE7 and earlier @Spudley, you could try [this polyfill](https://github.com/Schepp/box-sizing-polyfill). – 0b10011 Jul 26 '12 at 20:37
  • @bfrohs Thanks for the heads up. I checked and I think IE8 now accepts it without the `-ms-`, but it's probably still worth adding just in case. -- As for IE7 and earlier... for my own personal site, I just don't bother. For anything else, I've been going with a separate simpler stylesheet for now because I don't know enough about the older browsers to figure out how to appease all of their quirks. – iDontKnowBetter Jul 26 '12 at 20:52
  • @fakaff, one thing I've learned over the years: **people don't update software**. So assume the worst :) – 0b10011 Jul 26 '12 at 21:00

1 Answers1

1

The universal selector is the most expensive selector you can use in terms of performance.

Benchmarks here: http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/

But that said, it depends what you mean by "performance". If your site is noticeably slow, there are likely other reasons than your stylesheets, unless they're really badly written.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • So since I literally never use it, it looks like one instance of `*` shouldn't impact performance too much, right? - Also, I was not aware of the right-to-left parsing. That changes a lot of my preconceptions. – iDontKnowBetter Jul 26 '12 at 22:41