Why does the universal selector * have a negative impact on browser rendering?

Question

I was just applying a CSS Reset to my website. I usually use the one suggested by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ . But I was looking at Diego’s suggestion http://tableless.com.br/css-reset/ that is so :

* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}

I found it cool, simpler (of course Eric Meyer’s is more complete.)

I was testing on my Visual Studio Express 2013 for Web, and Web Essentials fired a warning saying :

Performance : Never use the universal selector. It has a big Negative performance Impact on browsers Rendering.

Translating :

Performance : Never use the universal dial. This has a great negative performance impact on browser rendering.

Why the universal dial * causes this negative impact on the rendering of browsers?

Answer 1

The concept that the universal dial is slow is a myth coined ten years ago when, in fact, there were performance problems, nothing surprisingly, because of Internet Explorer 6.

Nowadays, in modern browsers the performance impact of the universal dial is insignificant as long as you do not define rules that result in slower effects on it.

Unlike the reference article, personally, I would not define CSS3 effects on the universal selector. Not only because I vehemently doubt that ALL elements would REALLY need that particular effect, but also because I am in favour of reusable generic classes present in frameworks CSS such as Bootstrap.

Source: Article on Telerik’s Blog through an answer in the Soen

Answer 2

The main argument against the universal selector was not so much performance, but the impact it caused on property inheritance.

In practice, neither loss of performance nor inheritance problems were ever relevant enough to abolish the use, because it was much faster and more practical to use it and make a few specific definitions afterwards, including adopting sheets of styles specific to the late IE6, which was already obsolete when the use of CSS2 gained strength and table-based layouts began to go into disuse.

A model I always adopted, recently upgraded to Html5, was:

* {
  margin:0;
  padding:0;
 /* outros estilos com base no projeto */ 
}

div, article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

a, a:link, a:visited, a:hover, a:active { 
  text-decoration:none; 
  font:inherit; 
}

li {
  list-style-type:none;
}

Because, again, in practice, you always need to define the styles according to the project, each one specifically, and in the reset enter only the elements that can really mess or repeat a lot in the creation.