Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Organizaçãodo css

Se eu organizar meu css por ordem alfabetica. Vai ter algum problema na performace ou na leitura do meu css pelo browser?

1 resposta
solução!

A resposta simples é que não. Esse tipo de variação não afeta muito a performance final.

A resposta ultranerd é que depende e, sim, é possível que melhore alguma coisa. Acho que não é bem o tipo de coisa pra vc ver nesse ponto dos estudos, mas sei la, é domingo de carnaval :) então lá vai:

Na prática, nossos CSSs são servidos com GZIP, um algoritmo de compressão que compacta o arquivo no servidor antes de ser transmitido pro navegador. E acontece que o GZIP é muito bom com textos repetitivos. Pense naquela lousa do Bart Simpson com a mesma frase dezenas de vezes: o GZIP adora isso, a compressão é ótima, pq ele basicamente manda a frase 1x só e manda repetir as demais.

O que isso tem a ver com CSS? Bom, quanto mais repetições você tiver no seu CSS, melhor o GZIP vai trabalhar.

Imagine 2 classes:

.um { background: black; color: white; }
.dois { color: white;  background: black; }

Eu rodei o GZIP em linha de comando (gzip -c file.css | wc -c) nesse CSS simples pra ter uma ideia do tamanho final: 82 bytes.

Coloquei em ordem alfabetica:

.um { background: black; color: white; }
.dois { background: black; color: white; }

E rodei de novo: 77 bytes.

Ambos tem as mesmas propriedades mas como não estão na mesma ordem, diminuem a eficiência do GZIP ao comprimir isso. A ideia é que quanto maior for a intersecção de texto entre diferentes partes do arquivo, melhor pro GZIP comprimir.

Colocar em ordem alfabética vai melhorar a probabilidade de mais texto se repetir dentro do arquivo. Na verdade, qualquer ordenação lógica que não seja aleatória, provavelmente vai aumentar essa chance.

(se voce fizer uma ordenacao alfabetica reversa, por exemplo, vai dar 77 bytes tbm)

Então a resposta super nerd é que ordenar seu CSS com alguma lógica consistente aumenta as chances do GZIP comprimir melhor seu CSS e, logo, menos bytes serem transmitidos pela Internet. Então aumentaria um pouco a performance.

Mas em geral essa "melhoria" é bem pequena, e eu não acho que valha a pena escrever seu CSS assim só por causa disso. Prefiro um CSS que siga o padrão que você julgar mais legível pra vc. Até porque existem ferramentas que podem pegar seu CSS e fazer essa ordenação depois pra você.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software