Question

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?

Answer 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.