Foto de Jantine Durnbos em UnsplashIsso não é de forma alguma uma crítica aos colegas, mas apenas uma pequena lista de coisas importantes que eu mesmo aprendi sobre CSS recentemente.Não é segredo que muitos desenvolvedores parecem não pensar em CSS. É fácil perceber isso nas discussões na Internet e nas conversas com amigos e colegas. No entanto, obtemos muito conhecimento precisamente dos colegas e, às vezes, entendo que ninguém me falou sobre algumas nuances importantes do CSS, porque as pessoas simplesmente não passam tempo estudando esse tópico.
Para corrigir isso, fiz algumas pesquisas e fiz uma pequena lista de conceitos que acho interessantes e úteis para uma melhor compreensão e redação do CSS.
Esta lista definitivamente não é exaustiva. Ele contém apenas o novo que aprendi nos últimos dias e o que quero compartilhar, de repente, ajudará outra pessoa.Terminologia
Como em qualquer linguagem de programação, certos termos são usados para descrever conceitos. Sendo uma linguagem de programação, o CSS não é diferente, por isso é importante aprender alguma terminologia para simplificar a comunicação e apenas para o desenvolvimento pessoal.
Combinador Descendente
Você já viu a diferença entre os seletores no seu estilo? De fato, tem um nome, é
um combinador descendente.
Combinador DescendenteLayout, renderização e composição
Esses termos estão relacionados à renderização no navegador, mas são importantes porque algumas propriedades CSS afetam as várias etapas do pipeline de renderização.
1. Layout
A etapa de layout é o cálculo de quanto espaço um elemento ocupa na tela. Alterar a propriedade 'layout' no CSS (por exemplo, largura, altura) significa que o navegador precisará verificar todos os outros elementos e redesenhar a página, ou seja, redesenhar as áreas afetadas e sobrepor-se a elas.
2. Desenho (tinta)
Esse processo preenche com pixels todas as partes visuais dos elementos (cores, bordas etc.). Os elementos geralmente são desenhados em várias camadas.
Alterar a propriedade 'pintar' não afeta o layout, portanto o navegador pula a etapa do layout, mas faz a renderização de qualquer maneira.
A renderização geralmente leva mais tempo ao renderizar.
3. Composição (composta)
Composição é a etapa na qual o navegador deve desenhar as camadas na ordem correta. Como alguns elementos podem se sobrepor, nesse momento, o navegador verifica se os elementos são exibidos nessa ordem.
Se você alterar a propriedade CSS, que não afeta o layout nem a renderização, o navegador precisa fazer a composição.
Para obter mais informações sobre quais processos acionam várias propriedades de CSS, consulte
Gatilhos de CSS .
Desempenho CSS
O seletor de filhos pode ser caro
Dependendo do tamanho do seu aplicativo, o uso apenas do seletor descendente sem instruções específicas pode afetar bastante os recursos. O navegador verificará a conformidade com cada elemento do descendente, porque o relacionamento não está limitado ao elemento pai e filho.
Por exemplo:
Exemplo de Seletor DescendenteO navegador terá que avaliar todos os links da página antes de passar para os que estão na seção
#nav .
Uma maneira mais eficiente é adicionar um seletor
.navigation-link específico a cada link
<a> dentro da seção
#nav .
Navegador lê seletores da direita para a esquerda
Parece que eu deveria saber disso antes, mas não sabia ... Ao analisar CSS, o navegador analisa seletores da direita para a esquerda.
Considere o seguinte exemplo:
O navegador lê da direita para a esquerdaPassos:
- corresponde a todos
<a> na página;
- encontre tudo
<a> contido em <li> ;
- pegue fósforos e reduza-os àqueles em
<ul> ;
- por fim, filtre a seleção acima àquelas contidas no elemento com a classe
.container .
Observando essas etapas, vemos que quanto mais específico for o seletor certo, mais eficiente o navegador poderá filtrar e aplicar propriedades CSS.
Para melhorar o desempenho do exemplo acima, podemos substituir o
.container ul li a adicionando algo como
.container-link-style na própria tag
<a> .
Se possível, não altere o layout.
Alterações em algumas propriedades CSS requerem a atualização de todo o layout.
Por exemplo, as propriedades geométricas de
width ,
height ,
top e
left exigem recalcular o layout e atualizar a árvore de renderização.
Se você alterar essas propriedades em muitos elementos, levará muito tempo para calcular e atualizar sua posição / tamanho.
Tenha cuidado com a complexidade da renderização
Algumas propriedades de CSS (como desfoque) são mais caras que outras quando se trata de renderização. Pense em maneiras mais eficazes de alcançar o mesmo resultado.
Propriedades caras de CSS
Algumas propriedades CSS são mais caras que outras. Isso significa que a renderização leva mais tempo.
Algumas das propriedades caras:
border-radiusbox-shadowfilter:nth-childposition: fixed
Isso não significa que eles não possam ser usados, mas você precisa entender que, se um elemento usar algumas dessas propriedades e for renderizado centenas de vezes, isso afetará o desempenho.
Encomendar
A ordem importa
Vejamos esse CSS:
E então veja o código HTML:
A ordem dos seletores em HTML não importa, mas em CSS, sim.
Uma boa maneira de avaliar o desempenho do CSS é usar as ferramentas do desenvolvedor em um navegador.
No Chrome ou Firefox, você pode abrir as ferramentas do desenvolvedor, acessar a guia Desempenho e registrar o que acontece quando você carrega ou interage com sua página.
Captura de tela da guia Desempenho no ChromeRecursos
Explorando o tópico deste artigo, me deparei com algumas ferramentas realmente interessantes, listadas abaixo:
CSS Triggers é um site que lista alguns recursos de CSS e como eles afetam o desempenho.
O Uncss é uma ferramenta para remover estilos não utilizados do CSS.
CSS-explore é uma pequena ferramenta que explica os seletores de CSS.
Fastdom é uma ferramenta de leitura / gravação em lote do DOM para acelerar o desempenho do layout.
Por enquanto é tudo! Espero que isso faça sentido!