4

Considerando a montagem do CSSOM pelo browser e parser (leitura) que se dá right to left. Gostaria de jogar uma pergunta, pois estava a escrever um css num projeto e sempre tenho comigo por questão de performance não usar Seletores de Tipo e procuro usar a metodologia de módulos do BEM.
Dúvida: Se escrevo um seletor descendente assim: .media__bd--gretting h1{} ou seletor com pseudoclasse .media__bd--gretting h1:nth-child(1).
Sem considerar a especifidade e desconsidera o seletor de tipo (h1) na declaração, qual tem o melhor desempenho?

Obs: Coloquei dessa forma pois estava a fazer um módulo .css (tipography) não queria injetar um classe no html no que compõe o Block (módulo) "media__bd".

1
  • 1
    Posso ser sincero, não posso dar a resposta, mas acho que existe muito exagero sobre a performance dos seletores css, o que vai definir melhor a performance (acredito eu) é quantos nodes você tem na página. É provável que com nth-child(1) seja mais lento, mas é provável que também leve o mesmo tempo pra percepção dos microssegundos, a sem pseudo pode levar 1.5ms já a com pseudo pode levar 2.2ms por exemplo, é tão imperceptível que chega a ser um tipo de optimização que não compensa. No então vou lhe dar +1 na pergunta pois ainda sim é algo interessante.
    – Syzoth
    Commented 28/07/2015 às 17:04

1 Resposta 1

3

TL;DR: O seletor .media__bd--gretting h1{} é mais rápido.

Digo que é mais rápido baseado em uma série de artigos que vou citar aqui, mas vale iniciar a minha resposta dizendo o quão complicada é a sua pergunta, e o quão difícil é acertar no pulo ao construir essa resposta. Nas palavras de David Hyatt, arquiteto do Safari e do Webkit:

The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.

O que, basicamente, quer dizer que seletores CSS3 (que englobam o seu caso do :nth-child() não devem ser usados, se o seu foco é performance. Essa quote foi retirada deste artigo, que data de 2009. Se você ler o artigo, vai ver que a conclusão foi de que esse tipo de otimização, quando realizada, resulta em pouco ganho de velocidade, e que a relação custo-benefício é praticamente nula. Se, em 2009, o ganho era pouco, imagine agora, em 2015, com a tecnologia como um todo muito mais eficiente.

Eu discuti, nessa resposta, sobre boas práticas de CSS. Um dos pontos foi sobre o bloating. Já dei manutenção em código onde cada elemento, por mais repetitivo que fosse, tinha a sua própria (e única), declaração. Um exemplo real disso é

.bloco1 {
    float: left;
    width: 33%;
    line-height: 1.5;
}

.bloco2 {
    float: left;
    width: 33%;
    line-height: 1.5;
}

e isso repetia-se por, acredite se quiser, 12 blocos, todos com as mesmas regras de estilo. O resultado final é um bloating de código enorme e, portanto, ineficiente. Neste caso, especificamente, era possível reduzir o CSS para:

.bloco1, .bloco2{
    .
    .
    .
}

o que já ajudaria a diminuir o tamanho do arquivo e o excesso de repetitividade no código. Em um mundo ideal, existiria uma classe chamada .bloco, e o markup seria criado de acordo (o que não foi o caso). Nesse tipo de situação, você deixa de ter uma Cascade Style Sheet, e passa a ter uma Style Sheet, ignorando por completo uma das features mais poderosas quando se fala de estilização.

Esse exemplo ilustra que, o maior dos problemas de performance encontram-se não na profundidade da especificidade do seletor, mas sim em um escopo geral de o quão grande está a sua aplicação inteira, e o tempo de render que ela leva. Isso inclui a otimização de tudo, HTML, CSS e JS.

Essa publicação (mais recente, de 2014), trás consigo uma série de testes que foram feitos em cima de performance de CSS, e quais são as melhores (e piores) práticas. Uma leitura interessantíssima, que leva à uma série de conclusões bacanas, sendo duas delas:

sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it’s really not worth spending much time over. Furthermore, there is disparity across browsers of what the slowest selectors are anyway. ...

e

the battle for high performing CSS will not be won in the selectors used, it will be won with the judicious use of property and values

O que, basicamente, quer dizer: Existem seletores mais rápidos que outros? Sim. Noites mal dormidas valem a pena por causa disso? Não. A batalha da velocidade será vencida através da inteligência usada na construção do seu CSS (e da sua aplicação como um todo) e das propriedades usadas, e não nos milissegundos ganhos caso você use ou não um um pseudo-seletor.

1
  • 1
    Muito bem esclarecido, pois joguei essa questão pensando hipoteticamente em um (DOM) extenso com mesmo elemento que usaria um seletor ou outro para estiliza-lo. E sem dúvida, montar regras com profundidade de especificidade muito grande é fora de cogitação pensando em um css modular e reutilizável e demonstra digamos um certo desconforto com css pra não dizer falta de experiência ou conhecimento da linguagem que dizem ser tão simples.
    – dic-chen
    Commented 30/08/2015 às 2:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .