Artigos de Tecnologia e Negócios > Front-end

Colocar as propriedades no CSS em ordem alfabética é melhor pra performance?

Sérgio Lopes
Sérgio Lopes

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

Mas tem a resposta ultranerd que apareceu no fórum da Alura a partir da pergunta do Julio Cesar.

Entendendo o GZIP

Na prática, nossos arquivos CSS 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, porque 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 arquivo CSS simples pra ter uma ideia do tamanho final: 82 bytes.

Coloquei em ordem alfabética as propriedades:


.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.

O que devo considerar para melhorar a otimização do GZIP?

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 você fizer uma ordenação alfabética reversa, por exemplo, vai dar 77 bytes também

Conclusão

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 você. Até porque existem ferramentas de build que podem pegar seu CSS e fazer essa ordenação depois pra você.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1049 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1049 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1049 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1049 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana