« Voltar
em frontend css

Eficiência dos seletores CSS.

Quando estamos desenvolvendo uma aplicação, queremos que ela seja rápida, certo?

E quando estamos escrevendo código, geralmente sofremos pressão de superiores com relação à prazo para que o negócio saia logo. E infelizmente, muitas vezes trabalhamos apenas pra fazer a coisa funcionar, e não nos preocupamos tanto com boas práticas, performance e etc.

No final, não é tão raro ocorrer problemas de performance e nessa hora ninguém sabe muito bem onde o problema está.

Você sabia que 80% dos problemas de performance em aplicações web são referentes ao front-end?

Há várias coisas que podem ser feitas para melhorar a performance, uma delas é escrever seu CSS pensando na eficiência de cada seletor.
Segue aqui uma ordem dos seletores mais eficientes para os menos eficientes:

1- ID: #cabecalho, #rodape;
2- Classe: .main, .detalhe, .container;
3- Tipo: div, section, header;
4- Irmão adjacente: h1 + p, section + p;
5- Filho: li > ul, div > p;
6- Descendente: ul a, div p;
7- Seletor universal: *;
8- Atributo: [type="text"], [type="submit"];
9- Pseudo-classes: a:hover, a:active.


Quer ganhar 15% de desconto pra gastar na Casa do Código e ainda ficar em dia com as minhas postagens e outras promoções e sorteios legais? Assina minha newsletter: http://gabsferreira.com/newsletter/ (:

Se quiser, curta minha página no Face também! O endereço é https://www.facebook.com/devgabsferreira

comments powered by Disqus