Como micro-otimizar seu CSS

Post traduzido de http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/

Existem muitas maneiras de otimizar suas folhas de estilos. Além de reduzir a quantidade de requisições HTTP e comprimir os arquivos, nós podemos diminiuir a quantidade código. A maneira mais prática de diminuir seu CSS é comprimi-lo atravéz de um "Code Minifier" qualquer que encontramos pela web, que automaticamente elimina caracteres estranhos. A "minification" encolhe o tamanho do seu arquivo em torno de 30% ou mais. Esta redução é resultado de vários técnicas de micro-otimizações aplicadas à sua folha de estilos. Ao aprender essas técnicas e coloca-las em prática, você criará um CSS mais otimizado.

A idéia básica por trás dessa micro-otimização envolve a escrita de um código limpo, eliminando characteres estranhos, e reduzindo o tamanho do arquivo original. E você não precisa confiar em um script para fazer isso para você. Em vez de escrever um código pesado para depois comprimi-lo atravéz de um "Code Minifier" é melhor escrever um código otimizado.

Dica 1: Use o menor valor possível para cores

Para propriedades que as cores são usadas, use o menor valor possível. Por exemplo, vamos dizer que você quer aplicar um background branco ao elemento <article>. Você irá escrever algo parecido com:

article { background-color: rgb(255,255,255); }

Com certeza irá funcionar, mas podemos melhorar:

article { background-color: #ffffff; }

Muito bom, mas nós ainda podemos reduzir:

article { background-color: #fff; }

Ótimo. Mas olhe a propriedade background - não é necessário escrever tudo isso. Em vez disso, use:

article { background: #fff; }

Vamos comparar o "antes" e o "depois" para esse exemplo:

article { background-color: #ffffff; }
article { background: #fff; }

Uma significativa melhora. Além disso note que certos nomes de cores são mais curtos que suas representações hexadecimais. Por exemplo, red é mais curto que #CC0000`.

Dica 2: Agrupe propriedades duplicadas

Depois de você ter concluído o sua folha de estilos, reserve um tempo para procurar propriedades duplicadas e então agrupa-las. Você deve fazer isso manualmente, ou para grandes arquivos você pode usar um otimizador de CSS online. De qualquer maneira, o objetivo é reduzir a quantidade de código utilizado, eliminando propriedades, valores e declarações redundantes. Veja o seguinte exemplo:

p {
  font-family: Georgia, serif;
  font-weight: normal;
  line-height: 1.33em;
  font-size: 1.22em;
}
p {
  font-family: Georgia, serif;
  font-weight: normal;
  line-height: 1.33em;
  font-size: 1.33em;
}

Nesta ordem, as últimas regras serão aplicadas e as primeiras ignoradas, assim você pode muito bem combinar as propriedades para salvar alguns bytes:

p {
    font-family: Georgia, serif;
    font-weight: normal;
    line-height: 1.33em;
    font-size: 1.33em;
}

Dica 3: Sempre que possível use a sintaxe abreviada

A idéia da sintaxe abreviada é agrupar certas propriedades em apenas uma declaração. Como exemplo vamos abreviar a sintaxe anterior:

p { font: normal 1.33em/1.33 Georgia, serif; }

Muito, muito melhor. Há algumas propriedades que podem ser combinadas. Veja os exemplos:

/* essas 4 propriedades */
background-color: #fff;
background-image: url(i/dope.png);
background-repeat: repeat-x;
background-position: 0 0;

/* podem ser escritas assim */
background: #fff url(i/dope.png) repeat-x 0 0;

/* essas 4 propriedades */
margin-top:    10px;
margin-right:  20px;
margin-bottom: 10px;
margin-left:   20px;

/* podem ser escritas assim */
margin: 10px 20px 10px 20px;

/* essas 3 propriedades */
border-width: 1px;
border-style: solid;
border-color: red;

/* podem ser escritas assim */
border: 1px solid red;

Dica 4: Combine valores numéricos similares

Olhando no exemplo anterior, nós podemos observar uma otimização possível. Considere o seguinte:

margin: 10px 20px 10px 20px;

Para propriedades como margin e padding que permitem o uso de múltiplos valores numéricos, nós podemos salvar alguns bytes dessa maneira:

margin: 10px 20px;

Dica 5: Omita zeros extras

Esta é pequena, mas se for muitos fazem a diferença. Quando você escreve valores numéricos, não inclua zeros extras. Por exemplo:

padding: 0.1em;
margin: 10.0em;

Você não precisa desses zeros extras.

padding: .1em;
margin: 10em;

Dica 6: Omita unidades para valores zero

Considere o seguinte:

padding: 0px;

Parece bastante inofensivo, mas há dois caracteres que não precisam estar ai. Quando se usa valores zero, você não precisa especificar a unidade. Zero é Zero.

padding: 0;

Significativo? Da próxima vez que estiver escrevendo seu arquivo de estilos, conte quantas vezes você usou o valor zero e multiplique por 2. O resultado é a quantidade de bytes que você economizou.

Dica 7: Omita o último ponto-e-virgula(;)

Você sabia que o último ponto-e-virgula em cada bloco de regras poderia ser omitida? É verdade, não é necessário inclui-la.

p {
  font-family: Georgia, serif;
  font-weight: normal;
  line-height: 1.33em;
  font-size: 1.33em
}

Dica 8: Remova os comentários dos arquivos de produção

Comentários são essenciais para a manutenção de um arquivo CSS, mas eles são ignorados pelos navegadores. Então, porquê inclui-los em seus arquivos de produção? Se isso te soa estranho, relaxe, eu te explico como fazer isso isso no final do post.

Dica 9: Remova espaços em branco desnecessários

Remova todos os espaços em branco que for possível, quanto mais melhor. Exceto pelos casos de valores abreviados, na maioria das vezes não precisamos usar espaço em branco. Vejamos um exemplo, é um tipico bloco de regras para um body:

body {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    background-color: #333;
    text-align: center;
    margin: 0px auto;
    font-size: 62.5%;
    color: #FFF;
}

Removendo os espaços em branco não necessários, temos isso:

body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}

13 espaços e 8 quebras de linha foram removidos desse bloco de regras. Parece pouco? Considere isso: se temos 50 (um número modesto) seletores no nosso stylesheet, cada com aproximadamente 10 espaços, nós temos mais de 500 caracteres que podem ser removidos. Isso é mais do que 500 bytes para cada vez que o arquivo é carregado, que é significativo para qualquer site com uma quantidade considerável de tráfego.

Dica 10: No code-folding shenaniganz!

Se há uma coisa que eu gosto, é a maneira que eu escrevo CSS. Eu gosto de fazer com que pareça agradável aos olhos. Nenhuma dessas coisas de linha única. Quebrar as linhas e usar o tab faz com que o arquivo se torne mais atraente aos olhos. Aqui esta um exemplo de como estou formatando meu código:

hr {
    margin: 25px 0 25px 0;
    background: #CF7400;
    text-align: left;
    padding: 15px 0;
    display: block;
    border: 0 none;
    color: #CF7400;
    height: 1px;
    clear: both;
    width: 96%;
    }
acronym, abbr {
    border-bottom: 1px dotted #514031;
    cursor: help;
    }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
sup {
    font-size: 10px;
    line-height: 0;
    color: #cccc99;
    }
em       { font-style: italic; }
small    { font-size: 10px;    }
strong   { font-weight: bold;  }
strong:target, h3:target, h4:target {
    background: #CF7400;
    padding-left: 25px;
    }
code, kbd, samp, tt, var {
    font-family: "Courier New", Courier, monospace, sans-serif;
    color: #cccc99; /* #cc9933 #cccc66 #cccc99 */
    font-size: 11px;
    }
    h3 code { font-size: 13px; }
pre {
    border-left: 1px solid #CF7400;
    padding: 10px 0 12px 10px;
    background: #3B2E22;
    overflow: auto;
    margin: 25px 0;
    width: 525px; /* 95% of 555px = 525px */
    }
    pre:hover {
        border-left: 1px solid #FFFFCC;
        background: #3B2E22;
        }

Basta olhar para o código que você verá quanta informação inútil. Uma maneira muito mais eficiente de escrever o CSS é esse:

hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; }
acronym,abbr { border-bottom:1px dotted #514031;cursor:help; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sup { font-size:10px;line-height:0;color:#cc9; }
em { font-style:italic; }
small { font-size:10px; }
strong { font-weight:bold; }
strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; }
code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; }
h3 code { font-size:13px; }
pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; }
pre:hover { border-left:1px solid #FFC;background:#3B2E22; }

Veja, muito ruim para os olhos mas eficiente. Comecei a usar esta técnica depois de trabalhar com Chris Coyier. Tudo que ele escreve é em uma linha. Há uma certa elegância no CSS com uma única linha.

Dica 11: Valide seu CSS!

Reserve um tempo para validar seu CSS em algum validador online. É rápido, gratuito, informativo e é uma ótima maneira de pegar qualquer coisa que tenha faltado. Sempre me surpreendo dos erros que cometi em meu próprio CSS, alguns sutis e outros grotescos.

Dicas bônus: Outras idéias

Enquanto escrevia este post me surgiu duas idéias.

Primeiro, uma coisa que a maioria dos designers e otimizadores CSS fazem é esquecer o espaço em branco após o nome dos seletores. Por exemplo, isso:

a:link, a:visited {}

Pode ser escrito assim:

a:link,a:visited{}

A segunda coisa que é bastante incomum é a remoção de quebras de linha entre os conjuntos de regras. Considere o seguinte código:

h1{color:#111}
h2{color:#333}
h3{color:#777}

Sobre o que é geralmente visto na web, podemos ir mais longe, eliminando as quebras de linha depois de cada conjunto de regras:

h1{color:#111}h2{color:#333}h3{color:#777}

Isto é tudo sobre micro-otimização

Individualmente, cada uma dessas dicas de otimização pode parecer pouca coisa. Mas quando estamos falando sobre 10, 20, ou mais instâncias de cada técnica de otimização em um arquivo CSS isso se torna relevante. Então multiplicar os ganhos de um arquivo pelo total de vezes que ele é entregue. Fazendo as contas, você vai notar que essas técnicas de "micro-otimização" são extremamente benéficas in termos de velocidade de download, ganhos de banda e recursos de servidor. Pode ser difícil de começar a escrever um código bem otimizado, mas você pode ir praticando gradativamente cada regra dessa, e quando menos perceber, estará escrevendo códigos bem otimizados.

A linha base é que você deve otimizar seu arquivo de produção. Este sempre casos em que você deseja deixar o código bem formatado e legível, mas em 99% dos casos, é melhor entregar os arquivos otimizados. Para computadores não importa o quão bonito é código, o importante é estar sintaxamente correto.