5

No lado do CSS já faço a compilação e minificação do arquivo CSS.

As dúvidas começaram a surgir quando notei que alguns sites trabalham com um tipo de compile inclusive nos arquivos HTML`. Em outros casos, como por exemplo o Facebook, existem diversas classes com o nome bem diferenciado, parecendo que foi codificado, como na foto abaixo:

SS

Isso é mesmo algum tipo de codificação das classes/nomes? Me pareceu estranho, já que tanto o arquivo css como o html são de fácil acesso ao cliente.

Mas em contra partida, vejo alguns pontos positivos em usar isso. Pode dar uma dificuldade um pouco maior em entender o contexto/propósito daquela classe, já que ela não teria um nome tão intuitivo como nav.menu_mobile. Ou então, deixar o source do projeto com maior liberdade no uso de nome das classes sem deixar um HTML extenso e exagerado. Por exemplo, poderia criar classes com nomes cadastro_cliente, cadastro_cliente_dependente, e na compilação ficaria apenas um código simples de 4-5 letras, como no exemplo.

Seria isso então realmente uma forma de compilação ou apenas uma convenção interna partindo já do desenvolvimento?

Outra dúvida seria na parte de compilação do arquivo HTML. Este já sei que é possível, mas não sei até onde é recomendável essa prática, visto que em alguns casos a hierarquia do HTML altera o comportamento estrutural (dependendo da estrutura CSS). Por exemplo:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Tem um comportamento diferente deste código:

<ul><li></li><li></li><li></li></ul>

Sou novo em manutenção de projetos grandes. Agora estou trabalhando em um que está sendo realmente desafiador e grandioso então gostaria de saber até onde posso/devo ir com essas questões. Sei que no quesito performance isso pode não ter um impacto tão significativo a ponto ser vantajoso passar tanto tempo focado nesse aspecto.

Mas se for algo que valha a pena, por uma questão de otimização, organização e melhorias, creio valer a pena.

2
  • Não sei qual, mas deve ser uma dessas tecnologias. :P Commented 29/11/2015 às 22:56
  • Nenhuma ideia mais objetiva? São MUITOS repositories hahaha Commented 29/11/2015 às 23:04

1 Resposta 1

4

Já falo sobre a minificação em outra pergunta. Ela é interessante em elementos que mudam pouco. O HTML costuma mudar muito, então é melhor fazer compressão ou deixar sem qualquer ganho de tamanho. Mas há casos que o HTML pode mudar pouco também, isto ocorre cada vez mais com as chamadas "páginas aplicação" (SPA).

O que pode ser feito nos casos que o HTML muda a cada chamada é minimizar o tamanho de algumas coisas que mudam pouco mesmo quando o HTML é gerado. A própria geração do HTML pode se encarregar de minificá-lo.

O HTML é todo texto, então todo ele que está grande e pode ficar menor isto é feito. Pode ser feito até mesmo antes de gerar o HTML.

É possível abstrair certos elementos de tal forma que o texto específico que será usado para montar o HTML nem é de conhecimento do programador que está montando aquela página. Então ele usa algo que pra ele é cadastro_cliente, mas o que será usado de fato no HTML é _2gyi.

Programação moderna é criar abstrações para facilitar o trabalho da codificação e obter um resultado concreto melhor. Unir o útil ao agradável.

Não sei se este caso podemos chamar de compilação. Olhando a estrita definição do termo, acho que não, mas criar um HTML não deixa de ser uma compilação de textos vindo de diversas fontes. Aí o termo é mais literal ao que conhecemos fora da computação.

Transformar o HTML pronto em outro HTML minificado não deixa de ser uma compilação, embora o termo minificação cairia melhor neste caso.

Obviamente estas técnicas compensam mais em sites de grande volume de tráfego.

Em geral é bom minificar o HTML (estático). Os bons minificadores sabem até onde podem ir sem comprometer nada. Se você for criar um algoritmo que montará HTML minificado, tem que saber todas regras para não passar do ponto.

Não sei de nenhum problema em usar as listas do HTML nas duas formas apresentadas. Pra mim elas funcionam do mesmo jeito. Se não é o caso demonstre isso (de preferência em outra pergunta, está já está ampla demais).

3
  • Certo. Perfeita explicação. Mas nesse meu caso, o que eu poderia utilizar para a o processo dos nomes das classes? Do processo de html encontrei no link que você passou, e o min do css já faço com grunt. Commented 29/11/2015 às 23:21
  • Não entendi o que você quer saber. Isso? github.com/yiminghe/grunt-class-id-minifier Existem alguns minificadores que fazem isto.
    – Maniero
    Commented 29/11/2015 às 23:22
  • Isso. Acredito que seja isso, vou dar uma analisada melhor nos processos. Obrigado. Commented 29/11/2015 às 23:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .