Question

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

Ive read that using the * CSS selector isnt ideal as it takes longer to process. However how much is this really an issue? How much longer will it take a page to be displayed if I have the following in my CSS?

#div1 *,
#div2 * {
float: none !important;
width: auto !important;
height: auto !important;
text-align: left;
position: static !important; 
}

It seems to me that the connection speed and number of large assets like images is going to make far more of a difference. The work im doing is for mobile optimization but the page size (due to various libraries) is around 750KB and there is nothing I can do about this.

As a side note im aware that using !important isnt ideal too but the messy code ive inherited means its required in this case.

Answer 1

Read this article.

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.