espera aí...

25 de março de 2019
Coisas que ninguém nunca me ensinou sobre CSS.
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 .

Coisas que ninguém nunca me ensinou sobre CSS.

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:

Coisas que ninguém nunca me ensinou sobre CSS.
Exemplo de seletor descendente

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:

Coisas que ninguém nunca me ensinou sobre CSS.

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-style<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:

Coisas que ninguém nunca me ensinou sobre CSS.

E então olhe para este código HTML:

Coisas que ninguém nunca me ensinou sobre CSS.

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.

Coisas que ninguém nunca me ensinou sobre CSS.

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.

Posted in Blog
Write a comment