Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is the CSS star selector considered harmful (and why)?

Tags:

css

Does the star selector in CSS affect page rendering performance?

Are there any caveats using it?

* {   margin:0;   padding:0; } 
like image 920
gpilotino Avatar asked Nov 11 '09 09:11

gpilotino


People also ask

Are CSS selectors bad?

Having a very specific selector will not amount to bad performance, but if there are a lot of declarations applicable for an element, then the performance will take a hit. The only concern otherwise is that it increases the no.

What is the Star Selector in CSS?

The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object.


1 Answers

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

  • Performance Impact of CSS Selectors
  • Simplifying CSS Selectors

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.

[bold emphasis mine]

like image 74
anddoutoi Avatar answered Sep 24 '22 19:09

anddoutoi