Aprender a escrever CSS limpo e otimizado exige muita prática e um desejo inconsciente e compulsivo de limpar. Manter seu CSS organizado não se trata apenas de sua necessidade psicológica maluca de estar limpo, mas, especialmente para sites maiores, fará com que as páginas carreguem mais rápido. Tempos de carregamento mais rápidos equivalem a melhor usabilidade e maior satisfação do usuário.
Muitas pessoas têm fetiches por código. Isso não é uma coisa ruim.
Este artigo reunirá técnicas que você pode usar para otimizar seu CSS, bem como algumas ferramentas de compactação online e de desktop que podem compactar seu código automaticamente.
Comprimir ou não comprimir
Antes de discutirmos como compactar CSS, é importante observar que geralmente há um equilíbrio entre compactação e legibilidade do código. Muitos programadores se orgulham da organização limpa de seu CSS e não querem que seu código seja executado por meio de um compressor para remover comentários e quebras de linha. Como designer, você deve analisar os objetivos do código que escreve. Se você estiver criando um site pequeno que requer apenas algumas linhas de CSS, pode não haver necessidade de compactação adicional. Da mesma forma, se você estiver escrevendo um código que precisa ser compartilhado com uma equipe aberta, inserir comentários extras e quebras de linha pode economizar muito tempo de seus colegas e merecer seus sinceros agradecimentos. No entanto, se você estiver projetando um site grande que requer muito CSS, você definitivamente vai querer prestar atenção ao tamanho do arquivo e mantê-lo o menor possível.
Pode levar algum tempo para encontrar a combinação perfeita de compressão e possibilidade, mas vale a pena explorar ambas e alcançar um equilíbrio entre elas pode tornar seu trabalho muito mais fácil. Ao mesmo tempo, é óbvio que a compressão não leva necessariamente a uma diminuição na legibilidade. Existem muitas técnicas disponíveis para compactar código que resultam em um código melhor e mais organizado.
Com isso em mente, vamos começar examinando algumas técnicas para manter o mínimo de arquivos CSS.
Definição de estilo em branco
Vamos começar com o óbvio. Se você tiver um estilo em branco, descarte-o. Não dê desculpas de que você pode precisar deles mais tarde e sabe que eles são uma bagunça. Não os adicione a menos que tenha um motivo válido.
abreviação
A abreviatura CSS é uma forma de combinar várias linhas de CSS em uma única linha. Adquirir o hábito de usar todos os truques de abreviação que você conhece pode reduzir significativamente o número de linhas de código que você acaba escrevendo. Aqui está um exemplo:
Versão longa:
#container{padding-top:5pxpadding-right:10pxpadding-bottom:30pxpadding-left:18px}Versão abreviada:
#container{preenchimento:5px 10px 30px 18px;}Para saber mais sobre abreviações CSS, você pode visitar os seguintes artigos:
Sprites CSS
A ideia original por trás dos sprites CSS era reduzir o número de solicitações HTTP para acelerar o tempo de carregamento da página. A maneira como o Sprite atinge esse objetivo é combinar várias imagens em um único arquivo de imagem, geralmente uma imagem formatada em grade. Cada imagem individual é exibida alternando a posição de fundo da imagem sprite maior. Para código CSS, o uso da tecnologia Sprite pode melhorar muito a capacidade de reutilização e manutenção do código, o que reduzirá significativamente a quantidade de código CSS.
Para saber mais sobre CSS Sprites, confira o tutorial de Chris Coyier sobre CSS-Tricks:
Claro, Front-End Observation também traz alguns artigos e dicas valiosas sobre CSS Sprites.
Reduzir comentários
Gosto de usar comentários em meu código. Quanto mais comentários eu adicionar, mais rápido poderei navegar visualmente em diferentes partes do código. No entanto, se você precisar de CSS altamente otimizado que use poucos recursos, comentários excessivos consumirão bytes preciosos. Portanto, tente remover todos os comentários desnecessários e reformatar aqueles que você deve manter com o mínimo de bytes possível.
Tipo de fonte razoável (font-Family)
Quando o tamanho do arquivo for um grande problema, não inclua fontes alternativas em sua família de fontes. Livre-se de qualquer bagagem desnecessária e reduza suas opções extras a uma ou duas.
Antes:
#container{família de fontes:Palatino,Georgia,Times,serif;}depois:
#container{família de fontes:Palatino,serif;}Em relação às fontes, recomendo fortemente a leitura de "Três palestras sobre fontes padrão da Web", escritas por Yu Bo. Vários artigos mencionados no artigo também valem a pena ler e refletir.
Usar cor hexadecimal
Para reduzir o número de bytes, todos os valores de cores RGB são convertidos em seus valores hexadecimais correspondentes. Isso pode não significar muito para começar, mas qualquer byte vale a pena!
Antes:
#container{cor:rgb(131, 100, 219);}depois:
#container{cor:#8364DB;}Remover quebras de linha
Analise cada atributo de estilo e remova quaisquer retornos definitivos que não sejam necessários. Você também pode remover o último ponto e vírgula.
Antes:
#container{margem:5px;preenchimento:5px 10px 30px 18px;}depois:
#container{margem:5px;preenchimento:5px 10px 30px 18px}10 ferramentas de compactação CSS online
Os minificadores CSS podem automatizar grande parte do trabalho de limpeza do seu código. Muitos deles dirão qual porcentagem de seus arquivos está compactada, então experimente alguns para ver qual é o melhor.
Unidade CSS
Opções:
Modo de compressão: baixa, normal, alta compressão
Compactação de comentários: nenhuma compactação, todas ou mais que um determinado valor.
Compressor CSS
Opções opcionais (você pode escolher Sim ou Não para cada uma):
Reorganizar atributos
Comprimir cor
Comprimir peso da fonte
Seletor de letras minúsculas
Remova o espaço desnecessário
Remova pontos e vírgulas desnecessários
Arantius
Opções opcionais (você pode escolher Sim ou Não para cada uma):
Remover comentários
Remover comentários com pelo menos x bytes de comprimento
Uma regra por linha