Este post não é de forma alguma uma crítica a qualquer pessoa com quem já trabalhei, é apenas uma lista rápida de coisas importantes que aprendi sobre CSS recentemente enquanto fazia algumas pesquisas pessoais.
O fato de muitos desenvolvedores não se importarem tanto com CSS não é novidade. Você pode observá-lo seguindo conversas on-line ou conversando com alguns amigos e colegas.
No entanto, na comunidade, muito do que aprendemos vem do compartilhamento de conhecimento com os colegas e, como resultado, às vezes percebo que há coisas essenciais sobre o CSS que nunca me disseram antes porque outras pessoas nunca gastaram tempo tentando aprender Mais.
Para tentar consertar isso, decidi fazer algumas pesquisas pessoais e montar uma pequena lista de conceitos que acho interessantes e úteis para entender melhor e escrever CSS.
Essa lista definitivamente não é exaustiva, contém apenas coisas novas que aprendi nos últimos dias e quero compartilhar caso ela possa ajudar qualquer outra pessoa.
Terminologia
Como em toda linguagem de programação, existem termos específicos usados para descrever conceitos. CSS sendo uma linguagem de programação, não é diferente e aprender alguma terminologia é importante para ajudar na comunicação ou mesmo apenas para o seu conhecimento pessoal.
Combinador descendente
Você conhece esse pequeno espaço em branco entre seletores no seu estilo? Na verdade, ele tem um nome e seu nome é o combinador descendente .
Layout, tinta e compósito
Esses termos têm mais a ver com a forma como o navegador processa as coisas, mas ainda é importante, pois algumas propriedades CSS afetarão diferentes etapas do pipeline de renderização.
1. Layout
A etapa de layout é o cálculo de quanto espaço um elemento ocupa quando está na tela. Modificar uma propriedade de “layout” em CSS (por exemplo: largura, altura) significa que o navegador terá que verificar todos os outros elementos e “refluir” a página, o que significa repintar as áreas afetadas e compor-las novamente.
2. pintar
Este processo é o único a preencher pixels para cada parte visual dos elementos (cores, bordas, etc …). Elementos de desenho geralmente são feitos em várias camadas.
Alterar uma propriedade “pintar” não afeta o layout da página, de modo que o navegador pule a etapa de layout, mas ainda faça a pintura.
A pintura é muitas vezes a parte mais cara do pipeline.
3. Composto
Composição é a etapa em que o navegador precisa desenhar camadas na ordem correta. Como alguns elementos podem se sobrepor, essa etapa é importante para garantir que os elementos apareçam na ordem pretendida.
Se você alterar uma propriedade CSS que não requer layout ou pintura, o navegador só precisará fazer a composição.
Para detalhes sobre o que diferentes propriedades CSS acionam, você pode dar uma olhada nos CSS Triggers .
Desempenho CSS
O seletor descendente pode ser caro
Dependendo do tamanho da sua aplicação, usar apenas o seletor descendente sem mais especificidade pode ser realmente caro. O navegador verificará todos os elementos descendentes para uma correspondência porque o relacionamento não está restrito a pai e filho.
Por exemplo:
O navegador irá avaliar todos os links na página antes de se ajustar aos que realmente estão dentro de nossa #navseção.
Uma maneira mais eficaz de fazer isso seria adicionar um seletor específico de .navigation-linkcada <a>dentro do nosso #navelemento.
O navegador lê seletores da direita para a esquerda
Eu sinto que deveria ter conhecido este porque soa essencial, mas eu não…
Ao analisar o CSS, o navegador resolve os seletores CSS da direita para a esquerda.
Se olharmos para o seguinte exemplo:
Os passos dados são:
- coincidir com todos
<a>na página. - Encontre todos os
<a>contidos em um<li>. - use as correspondências anteriores e diminua para as contidas em a
<ul>. - Por fim, filtre a seleção acima para aquelas contidas em um elemento com a classe
.container
Observando essas etapas, podemos ver que, quanto mais específico for o seletor certo, mais eficiente será para o navegador filtrar e resolver propriedades CSS.
Para melhorar o desempenho do exemplo acima, poderíamos substituir .container ul li apor adicionar algo como .container-link-stylea <a>própria tag.
Evite modificar o layout sempre que possível
Alterações em algumas propriedades CSS exigirão que todo o layout seja atualizado.
Por exemplo, propriedades como width , height , top , left(também referida como “propriedades geométricas”), exigem o layout a ser calculado e a árvore de tornar a ser atualizado.
Se você alterar essas propriedades em vários elementos, levará muito tempo para calcular e atualizar sua posição / dimensão.
Tenha cuidado com a complexidade da pintura
Algumas propriedades CSS (por exemplo: blur) são mais caras que outras quando se trata de pintura. Pense no potencial de outras formas mais eficazes de alcançar o mesmo resultado.
Propriedades de CSS caras
Algumas propriedades CSS são mais caras que outras. O que isto significa é que demoram mais tempo a pintar.
Algumas dessas propriedades caras incluem:
border-radiusbox-shadowfilter:nth-childposition: fixed
Isso não significa que você não deve usá-los, mas é uma questão de entender que, se um elemento usar algumas dessas propriedades e for renderizado centenas de vezes, isso afetará o desempenho da renderização.
Encomenda
Ordem em questões de arquivos CSS
Se olharmos para o CSS abaixo:
E então olhe para este código HTML:
A ordem dos seletores em HTML não importa, a ordem dos seletores no arquivo CSS.
Uma boa maneira de avaliar o desempenho do seu CSS é usar as ferramentas de desenvolvedor do seu navegador.
Se você usa o Chrome ou o Firefox, é possível abrir as ferramentas do desenvolvedor, acessar a guia Desempenho e registrar o que está acontecendo quando você carrega ou interage com sua página.
Recursos
Enquanto fazia algumas pesquisas para este post, encontrei algumas ferramentas realmente interessantes listadas abaixo:
Triggers CSS - um site listando algumas propriedades CSS e o impacto no desempenho de usar e modificar essas propriedades em seu aplicativo.
Uncss - uma ferramenta para remover estilos não utilizados do CSS.
Css-explain - uma pequena ferramenta que explica os seletores CSS.
Fastdom - uma ferramenta para processar operações de leitura / gravação DOM para acelerar o desempenho do layout.