Coisas que ninguém nunca me ensinou sobre CSS.

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-radius
• box-shadow
• filter
• :nth-child
• position: 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.