Velocidade / redundância de seletores em CSS [fechado]

Question

Alguém tem informações sobre velocidades Browser Selector em CSS? Em outras palavras, como diferentes seletores comparar uns aos outros (in th mesmo navegador).

Por exemplo, muitas vezes eu ver (e escrever) um código como este:

#content #elem { ...rules... }

Mas desde que esses elementos são identificadores únicos, eu deveria só precisa #elem, certo? Isso me fez pensar sobre se talvez seja mais rápido para navegadores ter seletores mais complexas - o meu pensamento é que um navegador pode encontrar #content e sabem apenas olhar nesse elemento, em nenhum outro lugar

.

Outro exemplo pode ser table tr td .class vs table .class

Answer 1

Para ser honesto, você está falando de uma pequena quantidade de tempo que eu não acho que realmente faz a diferença.

Em termos de utilização seletores mais específicos - Eu acho que isso é uma boa prática para um par de razões:

1. Ele melhora a legibilidade do código -. De relance pode ver mais onde você está seletores estão sendo aplicadas em relação ao HTML
2. Reduz a probabilidade de seus seletores sejam substituídos em outro lugar, como um seletor com mais especificidade teria ser escrita que é muito improvável que isso aconteça.

O que você está falando sobre pode fazer a diferença quando se usa JavaScript bibliotecas como jQuery - como eles têm para analisar todo o documento em si, mas eu certamente nunca notou qualquer diferença de velocidade mesmo.

Answer 2

Aqui alguma informação que eu tenho após uma pesquisa rápida.

Answer 3

Pode haver uma diferença na velocidade, mas em que não é perceptível em qualquer caso, o uso normal. A verdadeira razão para escrever seu CSS como essa é a especificidade. Isto é, se você tiver

#content #elem {color: black;} 

e

#elem {color: red;}

O elemento deve ser de cor preta, uma vez que é a regra mais específica.

Answer 4

Para não ser um cara sábio, mas o tempo que você levou para escrever essa pergunta provavelmente exceder a soma de todas as poupanças de tempo de todos os usuários que nunca vai visitar o seu site (em relação ao #id # ID2 vs # ID2) . O mesmo acontece com o tempo para escrever esta resposta ....

Você pode votar-me para baixo agora:)

Answer 5

diretrizes da Mozilla pode ser interessante.

Answer 6

1. Há sempre alguma escolha entre eficiência e legibilidade. Claro table tr td .class é mais legível, mas muito ineficiente e pode ser simplificada - você tem visto em qualquer lugar (assumir marcação válida) tr sem table ou td sem tr? Pelo menos você pode comentar parte redundante como:

   /* table tr */ td .class {
       color: #ccf;
   }
   

2. Às vezes, como outros mencionados você precisa especificidade adicional, por exemplo, seu #elem deve ser vermelho em toda parte exceto quando em contexto específico de #content.

   #elem {
       /* usually red */
       color: red;
   }
   
   #content #elem {
       /* except when in specific context */
       color: black;
   }