Admito que não penso muito nesta questão... Quão eficiente é o CSS que escrevemos e quão rápido é a renderização do navegador?
É com isso que os desenvolvedores de navegadores devem se preocupar (as páginas carregam mais rápido e os usuários ficarão mais felizes). A Mozilla tem um artigo: sobre melhores práticas É claro que o Google também está muito preocupado com esse problema, e eles também têm um artigo: Otimize a renderização do navegador .
Vamos dar uma olhada no que eles defendem principalmente e depois discutir sua praticidade.
direita para esquerda
Um princípio importante de como os navegadores leem seus seletores CSS é que eles os leem da direita para a esquerda. Isso significa que para um seletor como ul > li a[title="home"], a[title="home"] será lido primeiro. Esta parte é geralmente chamada de "seletor de chave" (pode ser chamada de "seletor de destino" -_-!) A última parte do seletor também é o rótulo selecionado.
Os IDs são os mais eficientes, os universais são os mais lentos
Existem quatro seletores de destino: ID, classe, tag e caractere universal. Vamos dar uma olhada em suas respectivas eficiências:
#main-navigation { } /* ID (mais rápido) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Classe */
ul li a.current { } /* Classe *
ul { } /* Etiqueta */
ul li a { } /* Tag */
* { } /* Universal (mais lento) */
#content [title='home'] /* Universal */ Em seguida, combinamos os conceitos de seletores da direita para a esquerda e de destino, e podemos saber que o seguinte seletor não é eficiente:
#main-nav > li { } /* Parece rápido, mas na verdade é muito lento*/
Embora isso seja um pouco confuso... porque os IDs são os mais eficientes, os navegadores podem encontrar rapidamente li pelos IDs. Mas o fato é que a tag li é lida primeiro.
Não modifique com tags
Não faça isso até a sua morte:
ul#navegação principal { }
Os IDs são únicos, portanto não precisam ser decorados com tags, o que apenas os torna menos eficientes.
Não o use para modificar classes se puder evitá-lo. class não é única, então, em teoria, você poderia usá-la em tags diferentes. Se quiser, você pode usar tags para controlar diferentes estilos, então pode precisar de modificações nas tags (ex.: li.first), mas poucas pessoas fazem isso, então não faça.
Não há absolutamente nada pior do que usar um seletor descendente
David Hyatt:
O seletor descendente é o seletor mais caro em CSS e é proibitivamente caro - especialmente quando colocado depois de tags e universais.
Assim como o seguinte, é um câncer absoluto de eficiência:
corpo html ul li a { }
É mais eficiente que um seletor falhe na renderização do que o seletor seja renderizado
Não tenho certeza se há alguma evidência melhor para isso, porque se você tiver muitos seletores que não podem ser encontrados em uma folha de estilo CSS, pode parecer bizarro, mas é importante observar que da direita para a esquerda Para parafrasear um seletor , uma vez que não consegue encontrá-lo, ele para de tentar. No entanto, se for encontrado, será necessário mais esforço para explicar.
Pense por que você escreve o seletor assim
Pense nisso:
#main-navigation li a {família de fontes: Georgia, Serif };
Você provavelmente não precisa começar com um seletor (se quiser apenas alterar a fonte). Isso pode ser mais eficiente:
#main-navigation {família de fontes: Georgia, Serif };
Praticidade
Também gravou o artigo da Mozilla mencionado anteriormente? Já se passaram dez anos. O fato é: os computadores estão mais lentos do que há dez anos (não que eu tenha entendido mal, ou que o autor queira dizer que a WEB atual está se tornando cada vez mais complexa). Eu sinto que essas coisas pareciam ser levadas mais a sério naquela época. Dez anos atrás, eu era um lindo garoto de 21 anos. Claro, não achei que saberia nada sobre CSS lá. Então não posso falar sobre a situação anterior... mas acho que a razão pela qual a questão da eficiência de renderização não foi levada a sério é porque nunca foi um grande problema.
Aqui estão algumas das minhas opiniões: Não importa o que aconteça, o que foi mencionado acima faz sentido, e você pode fazer isso de acordo com o método acima, porque não limita sua produção de CSS. Mas você não precisa ser muito dogmático. Se você é um perfeccionista e nunca considerou essas coisas antes, é hora de reexaminar alguns dos estilos que você escreveu antes para ver se há espaço para melhorias. Se você não achar que seu site está obviamente sendo renderizado lentamente, não preste muita atenção nele. Apenas preste mais atenção nele em trabalhos futuros.
Super rápido e zero praticidade
Sabemos que os IDs são os seletores mais eficientes. Quando quiser maximizar a velocidade de renderização, você pode configurar um ID para cada tag individual e depois usar esses IDs para escrever estilos. Isso seria super rápido e super ridículo. O resultado é uma semântica extremamente pobre e extremamente difícil de manter. Você não deveria ver isso sendo feito nem no núcleo. Acho que isso serve como um lembrete para não abrir mão da semântica e da facilidade de manutenção em prol de um CSS eficiente.
Obrigado a Jason Beaudoin por me enviar um e-mail sobre a ideia. Se alguém souber mais sobre esse assunto, ou se você tiver dicas adicionais para usar nesse mesmo sentido, vamos ouvir!
A propósito, como os seletores CSS são usados por muitas bibliotecas JavaScript, o que foi mencionado acima ainda se aplica, o seletor de ID ainda é o mais rápido e os seletores descendentes e coisas semelhantes são mais lentos.
PS : Vamos ver quem se atreve a usar mais de N seletores descendentes. . . Também há pessoas que se opõem ao meu uso de identidade. . . Uau haha. . .