Texto original via: 9 dicas para arquivos CSS menores e otimizados
Autor|Autor: Stefan Vervoort
Tradução|Trans: Luc
Como os arquivos CSS são carregados no início da página da web, cada visitante baixa esses arquivos. Otimizaremos arquivos e imagens PHP, mas frequentemente ignoraremos os arquivos CSS. Hoje deveríamos pensar sobre este problema e fazer algo a respeito.
É possível otimizar CSS usando otimizadores de CSS, mas acho que tanto a eficiência quanto o poder serão melhorados se você escrever seu código usando as técnicas mencionadas abaixo.
A otimização de arquivos CSS também pode economizar tráfego e aumentar a velocidade de carregamento da página.
1. Comentários Os comentários são particularmente úteis ao escrever CSS, para que os colegas que trabalham juntos entendam o significado do código. Existem muitas maneiras de fazer anotações, você pode usar os seguintes métodos:
/*-------------------*/
/*-----Comentário-------*/
/*-------------------*/
Você também pode usar o seguinte método:
/*Comentário*/
Isso economiza 20 caracteres e, supondo que haja 15 comentários, salva 300 caracteres.
2. Códigos de cores abreviados Os códigos de cores são definidos com códigos HEX, que contêm 6 caracteres, mas em alguns casos podem ser usados 3 caracteres. Veja o exemplo a seguir:
div{ cor: #ffffff } /* Código curto: cor:#fff;
div{ cor: #ff88ff } /* Código curto: cor:#f8f;
div{ color: #f8f7f2 } /* Nenhum shortcode possível */
3. Mesclar elementos. Por exemplo, se houver vários elementos como h2, h3 e h4, e todos eles tiverem os mesmos atributos e apenas alguns atributos forem diferentes, você poderá escrevê-los da seguinte forma:
h2, h3, h4. {
preenchimento:0;
margem:0;
cor:#333;
espaçamento entre letras: 0,05em;
espaçamento entre palavras: 0,1em;
}
h2{tamanho da fonte:1.2em};
h3{tamanho da fonte:1.1em};
h4{ tamanho da fonte:1em };
Isso mescla elementos com os mesmos atributos enquanto declara diferentes atributos de tamanho de fonte. Pode economizar muito espaço.
4. Quando o valor é 0, Out Px/Em/% é omitido.
0 não requer Px, Em e sinal de porcentagem. Quando seu valor é 0 (que presumo que você usará), a omissão da unidade economiza o dobro de caracteres.
div{ preenchimento: 0px 5px 5px 10px };
/* Abreviação: preenchimento: 0 5px 5px 10px */
5. Mesclar atributos Alguns atributos como preenchimento, margem e borda podem ser escritos separadamente. Por exemplo: preenchimento superior, preenchimento direito, preenchimento inferior e preenchimento esquerdo.
Se possível, combine-os para facilitar a escrita e economizar espaço.
div{
preenchimento à esquerda:0 ;
preenchimento superior: 50px;
preenchimento inferior: 23px;
preenchimento à direita:4px;
/* Abreviação: preenchimento:50px 4px 23px 0 */
Se os valores superior e inferior forem iguais e os valores esquerdo e direito forem iguais, você pode escrever:
div{
preenchimento superior: 5px;
preenchimento inferior: 5px;
preenchimento à esquerda:0 ;
preenchimento à direita:0px;
/* Abreviação: preenchimento:5px 0;
6. Escolha classes/ID com sabedoria
As classes e nomes de ID selecionados devem ser tão curtos, fáceis de entender e significativos quanto possível.
Evite escolher nomes como "HeaderMiddleLeftCategories", use "h-cats". Isso economiza muitos caracteres.
7. Limpe os arquivos CSS para economizar espaço Ao usar CSS para construir um site, o código escrito pode ou não funcionar e ocupa muito espaço. Os arquivos CSS devem ser verificados em busca de erros e códigos inválidos para economizar espaço.
8. Remova o ponto e vírgula do último atributo do seletor. Este é um truque que descobri usando o compressor CSS.
corpo{
plano de fundo:#ccc;
cor:#333;
/* Shortcode: color:#333 */Veja, removi o último ponto e vírgula. O efeito pode não ser óbvio, mas um pouco soma 50 seletores com 50 caracteres.
9. Exclua espaços inúteis e retornos de carro Você pode excluir todos os espaços e retornos de carro porque eles ocupam um caractere. Mas o problema com isso é que destrói a estrutura do CSS e reduz a legibilidade.
Normalmente não faço isso ao otimizar arquivos CSS porque a estrutura é mais importante para mim. Aqui está um compromisso: use arquivos no site que não contenham retornos de carro e espaços. Salvar arquivos contendo retornos de carro e espaços localmente torna a edição muito conveniente.
Conclusão Se você deseja otimizar totalmente os arquivos CSS, recomendo usar o compressor CSS, para que você possa aprender as habilidades acima e melhorar a velocidade de gravação e a qualidade do código CSS.
Se você tiver outras dicas, deixe uma mensagem.