Existe uma vantagem de usar seletores muito específicas em CSS?

Question

Eu entendo que em jQuery, é vantajoso ser mais específico ao usar seletores de modo que jQuery não tem que percorrer todo o DOM para encontrar o que você está procurando. Por exemplo, $('span.description') é melhor do que apenas $('.description') se eu sei que a classe description é sempre apenas aplicado aos elementos <span>.

Este é o caso com CSS, também? Existe alguma vantagem específica para mim usar span.description { } vez de .description { }? Estou pensando em termos de velocidade, otimização, etc. Am I salvar o navegador qualquer trabalho, dizendo-lo exatamente para onde olhar?

Answer 1

Isto é verdade em CSS -

Uma regra boa é a descer da ID mais próximo. IDs são indexados para localizá-los é extremamente rápido. Não há razão para usar mais de um em seu seletor.

processamento do navegador Google Code-Optimize

Este respondeu uma série de perguntas que eu tinha sobre o assunto, incluindo este um- Eu espero que você encontrá-lo útil.

Answer 2

Leia-se sobre css especificidade -. Que é a razão mais importante para ser mais ou menos específico com o seu css

http://www.w3.org/TR/CSS2/cascade .html # especificidade

Como navegador desempenho é praticamente um não-problema (exceto em jQuery, como você mencionou), a minha orientação é para ser específico quando você está controlando precedência, ou quando você quiser fazer algo um pouco mais legível seu css. Ao longo especificando pode torná-lo complicado para re-uso seletores CSS e fazer as coisas muito complicadas.

Editar

Isto parece um pouco de uma segunda via:

CSS Desempenho Pergunta

Answer 3

sempre depende de sua quantidade de código html e da estrutura. É definitivamente uma boa idéia usar especialmente ids e seletores apropriados. (Ou seja, em vez de #nav li li.nav). Desde navegador primeiro carregar o html e, em seguida, aplicar o css que você está ajudando muito.

Dito isso, quando se trata de css puro (sem jquery) a diferença de velocidade é hoje em dia não é fácil de distinguir, porque os motores de renderização são altamente otimizadas - especialmente quando se trata de aplicar css. Então, normalmente ele não deve importar.

Answer 4

Tanto quanto eu sei, como específica seus seletores são fazer muito pouca diferença no desempenho.

As duas áreas onde seletores mais específicos são mais úteis, é reduzir o risco de que ele não é aplicada quando você não quer isso, e para fazer um seletor têm precedência sobre a outra.

Answer 5

A regra mais específica tem precedência sobre uma regra específica menos, assim:

span.myclass {}

tem precedência sobre: ??

.myclass {}

(não importa o que a ordem é em que as regras foram declarados)