tags:

views:

198

answers:

4

does the star selector in CSS affect page rendering performance ?

are there any caveats using it ?

* {
  margin:0;
  padding:0;
}
+1  A: 

Since I'm using the exact same rule in every of my projects and none have serious perfomance issues, I'd say: No, not as far as I know.

ApoY2k
+3  A: 

One view is that it's not so much that the * is a performance problem, it's that good old favourite - there's an IE issue with it. It affects IE 5, 5.5 and 6 as well as Macintosh variants. Basically, there is something called the HTML star selector bug which applies as follows:

* html

This should be interpreted as no element match because html is root and cannot be a child element. IE interprets this as html.

* * body

Again, should match to no element because body cannot be a grandchild element - even though it is a child element of HTML. IE interprets this as * body.

* html body

This should match no element, but IE interprets this as html body.

The performance side is usually treated that applying * only means that the style applies to every element in a page. I rarely find that this is an issue in its own right - the point at which it would become an issue means that you've probably got way too much markup in there anyway. Similarly, as it applies to everything, it means you need to increase your code to cope with elements that shouldn't have that style. As with everything else, it's up to you to decide what the tradeoffs and balance should be.

Pete OHanlon
+2  A: 

For some properties using * can produce unexpected results.

* { color: blue }
li { color: red }

Now given <li><i>text</i></li>, the text will be blue!

Roger Pate
I wouldn't call that unexpected, that's pure CSS-logic. The more specified a rule is, the higher it's priority is over other rules.So, `<li>` has the rules `color: red` from `li{}` and `color: blue` from `*`, and `<i>` has only `color: blue` from `*`. So a text without `<i>` would be red, as the "deepest" child with the most specified rule "wins" the run of what is actually displayed... So: That's not unexpected, that's exactly how it should work :D
ApoY2k
Yes, but you might not *think of it*, when you set the properties for '*'. This is the more true with '*' and interface elements or elements you seldom use.
Boldewyn
@ApoY2K: just because it works as it should, doesn't mean it's expected. When you have a * selector it's easy to forget about it. And when you remember, you have to think about it **every time you add a new element** to check you're not applying styles you don't want.
DisgruntledGoat
@ApoY2k: sure, if you're perfect and never make mistakes, you never write code that works other than as you expect. Otherwise, it's reasonable to think that color is inherited from the parent, and that's how this text being other than red is unexpected.
Roger Pate
+3  A: 

When it comes to performance, Steve Souders is the man:

Shameless quote from one of the reports:

The key to optimizing CSS selectors is to focus on the rightmost selector, also called the key selector (coincidence?). Here’s a much more expensive selector: A.class0007 * {}. Although this selector might look simpler, it’s more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, “*“. This means the browser must try to match this selector against all elements in the page.

anddoutoi
I also quote "It’s clear that CSS selectors with a key selector that matches many elements can noticeably slow down web pages." interesting read, thank you.
gpilotino