css3 - O uso de muitas variáveis no CSS pode afetar o desempenho da página? - Stack Overflow em Português
O uso de muitas variáveis no CSS, pode acabar degradando muito a performance da página?
É possível dizer mais ou menos o uso de quantas seriam necessárias pra começar a trazer um impacto negativo?
Um exemplo de variável:
--example: white;
color: var(--example);
editada 4/11/20 às 4:07
5.05966 medalhas de ouro2626 medalhas de prata6161 medalhas de bronze
Ao que exatamente você se refere quando diz variáveis?
4/11/20 às 3:28
@MagicHat Obrigado, atualizei minha resposta.
4/11/20 às 4:08
Cara eu já li algumas coisas sobre CSS variables, e nunca vi nada relacionado a performance, mas o que vc pode levar em consideração, caso esteja fazendo um framework por exemplo, é que color: var(--example); tem alguns caracteres a mais que color: red; e isso pode aumentar os KBs do seu .CSS. Lógico que é um exemplo para casos extremos com um .CSS com mais de 10mil linhas etc... Talvez com um PostCSS ou Webpacker vc consiga configurar o output dessas variáveis
4/11/20 às 12:06
Vou dividir a resposta em duas parte, vamos lá
Sim pode e muito. A performance pode variar entre varios fatores,
Relacionar o item;
Quantidade de filhos que uma variavel atende;
Se ela é usada em uma div que contem 10000 outras div;
Se ela só possui um filho;
Incluir JS nessa equação vai gerar ainda mais delay no tempo de renderização.
A quantidade não importa tanto, mas sim onde vai ser usada e quanto elemento ela afeta, uma boa pratica seria definir variaveis para pontos chaves como textos alterando tamanho e fontes.
Caso seu objetivo for mesmo a performance você pode usar pré processadores de CSS simples e "leves" como STYLUS.
https://blog.jiayihu.net/css-custom-properties-performance-in-2018/
https://blog.teamtreehouse.com/getting-started-stylus
respondida 4/11/20 às 14:47
Cara pre-processado de CSS não resolve nada, uma vez que o output dele vai continuar sendo um .CSS gigante só que piorado, pois ele vai trocar o que era uma variável, por um valor fixo, dificultando ainda mais as coisas...
4/11/20 às 15:37
A pergunta foi referente a performance de variaveis em css, o arquivo "compilado do css" vai ter uma performance melhor por não usar elas.
4/11/20 às 15:54
Claro, o arquivo compilado não vai ser legivel mas não é bem o foco dele.
4/11/20 às 16:01
Eu estava até repetindo os testes do link aqui, achei bem inconclusivo, talvez precise de um ambiente mais adequado para testar, mas comparado aos testes dele de 2018, no Chrome / iOS, com um arquivo de 25mil linhas, achei difícil afirmar algo, até pq só com esse senário, rodando localmente, a variação foi na casa de 400ms de diferente, algo quase imperceptível visualmente para o usuário
4/11/20 às 16:07
Sim, a quantidade em si não tem tanto inpacto, oque mais gera é onde ela é usada
9/11/20 às 11:31
Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag css css3 variáveis ou faça sua própria pergunta.