O seletor de estrelas CSS é considerado prejudicial (e por quê)?

O seletor de estrelas no CSS afeta o desempenho da renderização de página?

Há alguma advertência usando isso?

* { margin:0; padding:0; } 

Quando se trata de performance, Steve Souders é o homem:

  • Impacto no desempenho dos seletores de CSS
  • Simplificando Seletores de CSS

Citação desavergonhada de um dos relatórios:

A chave para otimizar os seletores CSS é focar no seletor mais à direita , também chamado de seletor de chave (coincidência?). Aqui está um seletor muito mais caro: A.class0007 * {}. Embora esse seletor possa parecer mais simples, é mais caro para o navegador corresponder. Como o navegador se move da direita para a esquerda , ele começa verificando todos os elementos que correspondem ao seletor de chave, “*“. Isso significa que o navegador deve tentar corresponder esse seletor a todos os elementos da página.

[ênfase em negrito meu]

Para algumas propriedades que usam * podem produzir resultados inesperados.

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

Agora, com

  • text
  • , o texto ficará azul!

    Um ponto de vista é que não é tanto que o * seja um problema de desempenho, é o bom e velho favorito – há um problema do IE com ele. Ela afeta o IE 5, 5.5 e 6, assim como as variantes do Macintosh. Basicamente, há algo chamado erro de seletor de estrela HTML que se aplica da seguinte maneira:

     * html 

    Isso deve ser interpretado como nenhuma correspondência de elemento porque html é raiz e não pode ser um elemento filho. IE interpreta isso como html.

     * * body 

    Novamente, deve corresponder a nenhum elemento porque body não pode ser um elemento neto – mesmo que seja um elemento filho de HTML. IE interpreta isso como * corpo.

     * html body 

    Isso deve corresponder a nenhum elemento, mas o IE interpreta isso como corpo html.

    O lado do desempenho é geralmente tratado de forma a aplicar * apenas significa que o estilo se aplica a todos os elementos de uma página. Eu raramente acho que este é um problema em si mesmo – o ponto em que se tornaria um problema significa que você provavelmente tem muita marcação lá de qualquer maneira. Da mesma forma, como se aplica a tudo, isso significa que você precisa aumentar seu código para lidar com elementos que não deveriam ter esse estilo. Como com todo o resto, cabe a você decidir quais são as compensações e o equilíbrio.

    Como estou usando exatamente a mesma regra em todos os meus projetos e nenhum deles tem problemas sérios de desempenho, eu diria: Não, não tanto quanto eu sei.