0

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.

Community
  • 1
  • 1
Evanss
  • 23,390
  • 94
  • 282
  • 505
  • 1
    This feels like premature optimisation: Eliminating or reducing large assets will make much more of a difference. Keep in mind that on mobile you're processor and memory constrained, so the less work you make the browser do, the better. – Olly Hodgson Dec 04 '12 at 15:25

1 Answers1

3

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.

dsgriffin
  • 66,495
  • 17
  • 137
  • 137