As abreviaturas CSS podem reduzir efetivamente o tamanho dos arquivos CSS

Uma métrica chave da usabilidade do site é a velocidade, ou mais precisamente, a rapidez com que uma página aparece na janela do navegador do visitante. Existem muitos fatores que afetam a velocidade, incluindo a velocidade do seu servidor web, a conexão do visitante com a Internet e o tamanho do arquivo que o navegador deve baixar. Embora não seja possível controlar a velocidade do servidor e da conexão, você pode controlar o tamanho dos arquivos que compõem as páginas do seu site.
Para tornar os sites mais rápidos, os construtores de sites compactam e otimizam rotineiramente todos os arquivos de imagem em seus sites, muitas vezes sacrificando a qualidade da imagem para reduzir o tamanho do arquivo em alguns pontos percentuais. Como as folhas de estilo CSS são arquivos de texto simples e relativamente pequenas em comparação com as imagens, os construtores de sites raramente consideram tomar medidas para reduzir o tamanho de seus arquivos de folhas de estilo CSS. No entanto, usando abreviações CSS e outros truques simples, você pode reduzir bastante o tamanho da sua folha de estilos. Em um teste ad hoc informal de minhas próprias folhas de estilo, reduzi o tamanho do arquivo em cerca de 25 a 50%.

Usando a natureza abreviada do CSS

Propriedades abreviadas CSS são nomes de propriedades especiais usados ​​para substituir vários conjuntos de propriedades relacionadas. Por exemplo, a propriedade padding é a abreviação de padding-top, padding-right, padding-bottom e padding-left.

O uso de propriedades abreviadas permite compactar vários pares de propriedades/atributos em uma única linha de código em uma folha de estilo CSS. Por exemplo, considere o seguinte código:


Substituí-lo por algumas propriedades de abreviação pode reduzir o código ao seguinte, o efeito real dos dois é exatamente o mesmo:


Observe que a propriedade abreviada também possui diversas propriedades, cada uma delas correspondendo a uma propriedade regular que é combinada na propriedade abreviada. As propriedades são separadas por espaços em branco.
Quando as propriedades têm valores semelhantes, como para medições lineares de propriedades de margem, a ordem das propriedades que seguem a propriedade abreviada é importante. A ordem dos atributos começa na parte superior (a borda superior está em branco) e continua no sentido horário ao redor da caixa.
Se todas as propriedades de uma propriedade de abreviatura forem iguais, você poderá simplesmente listar a propriedade única e copiá-la quatro vezes na frente. Portanto, as duas propriedades a seguir são iguais:


Da mesma forma, você pode representar pares de propriedades superior/inferior e direita/esquerda usando duas propriedades após a margem da borda ou propriedades de espaçamento.


A ordem dos atributos não é importante quando são valores diferentes. Portanto, propriedades como cor da borda, estilo da borda e largura da borda podem seguir a propriedade do contorno em qualquer ordem. Ignorar um atributo equivale a omitir a propriedade geral correspondente das regras de estilo.
Abaixo está uma lista de propriedades abreviadas de CSS e as propriedades gerais que elas representam.

Plano de fundo: anexo de plano de fundo, cor de plano de fundo, imagem de plano de fundo, posição de plano de fundo, repetição de plano de fundo
Borda: cor da borda, estilo da borda, largura da borda
border-bottom (borda inferior): cor da borda inferior, estilo da borda inferior, largura da borda inferior
borda esquerda (borda esquerda): cor da borda esquerda, estilo da borda esquerda, largura da borda esquerda
borda direita (borda direita): cor da borda direita, estilo da borda direita, largura da borda direita
border-top (borda superior): cor da borda superior, estilo da borda superior, largura da borda superior
sugestão (sugestão sonora): pré-sugestão, pós-sugestão
fonte: fonte, tamanho da fonte, estilo da fonte, espessura da fonte, variante da fonte, altura da linha, ajuste do tamanho da fonte, alongamento da fonte
estilo de lista: imagem de estilo de lista, posição de estilo de lista, tipo de estilo de lista
margem (em branco): margem superior, margem direita, margem inferior, margem esquerda
contorno: cor do contorno, estilo do contorno, largura do contorno
preenchimento: lacuna superior, lacuna direita, lacuna inferior, lacuna esquerda
pausa: pausa depois, pausa antes

Reduza o espaço em branco

Outra maneira de reduzir o tamanho de uma folha de estilo CSS é remover a maior parte dos espaços em branco desnecessários do documento. Em outras palavras, coloque cada quebra de regra em uma única linha de código, ou seja, remova as novas linhas e recuos que foram originalmente inseridos no código para separar cada propriedade/atributo em linhas separadas.
Por exemplo, os exemplos de código a seguir são idênticos em conteúdo, mas o segundo é muito mais refinado:


excluir comentário

Remover comentários do seu código CSS é outra maneira de reduzir o tamanho do arquivo. Embora os comentários sejam úteis para a leitura do código, eles não ajudam o navegador a gerar suas páginas da web. Muitos construtores de sites estão acostumados a comentar cada linha de código, ou pelo menos cada instrução de regra. Comentários tão generosos raramente são necessários em folhas de estilo CSS porque a maioria das propriedades e propriedades CSS são fáceis de ler e entender. Se você usar nomes significativos para classes, IDs e outros seletores, poderá eliminar a maioria dos comentários e, ao mesmo tempo, manter seu código legível e de fácil manutenção.


Usar propriedades abreviadas, remover espaços em branco inúteis e omitir comentários pode reduzir bastante o tamanho do arquivo da folha de estilos CSS. Isto, por sua vez, representará uma contribuição pequena, mas potencialmente perceptível, para o objetivo geral de acelerar o seu site.