Existem vários maneiras de se otimizar o CSS de um site, tentarei passar aqui as de meu conhecimento. Vou me basearnos estilos do blog do Thiago Arraes.
O Thiago utiliza cinco arquivos CSS para seu site, vou listar como otimizar quatro deles:
http://www.thiagoarraes.com.br/wp-content/themes/glossyblue-1-2/style.css (12.029KB), http://www.thiagoarraes.com.br/wp-content/plugins/democracy/basic.css (1.329KB), http://www.thiagoarraes.com.br/wp-content/plugins/democracy/style.css (0.879KB) e http://www.thiagoarraes.com.br/wp-content/plugins/thickbox/thickbox.css (2.577KB) totalizando 16.814KB.
Aconselho todos a deixar uma pasta como backup, com os CSS inteiros e com comentários e uma para os CSS otimizados que serão usados no site.

1) Olhando o style.css do tema glossyblue, podemos perceber que eles repetem a regra “text-decoration: none;” 8 vezes. Para diminuir podemos utilizar os seletores separados por vírgula e utilizar essa regra. Exemplo:
a, a:visited,h1 a, h1 a:visited,h1 a:hover,h2 a, h2 a:visited,h2 a:hover,#nav .page_item a,#sidebar a, #sidebar a:visited { text-decoration:none }
Assim diminuimos bastante o CSS e a regra é atribuída a todos os seletores. Essa dica pode ser usada a todas as regras repetidas.
2) Os comentários são úteis somente para você. Aconselho a deixar somente os comentários caso você tenha baixado algum tema pronto para seu site.
3) Podemos notar que as cores estão em hexadecimal. Cores com letras e/ou números repetidos como em “color: #CC6600;” podem ser diminuídas para “color: #C60;”.
4) Podemos remover os últimos pontos-e-virgulas de uma regra, por exemplo em:
a:hover {

color: #FF6600;
text-decoration: underline;
}
Ele pode se transformar em:
a:hover {
color: #FF6600;
text-decoration: underline
}
5) Podemos remover a medida de tamanho usada quando o valor é 0. Por exemplo ao invés de “0px” pode utilizar somente “0″.
Temos outras maneiras de comprimir o CSS, mas vou dizer em outro post. Existem sites que tem sistemas para fazer todo esse trabalho por nós, como o Clean CSS. Vamos ver o quanto foi comprimido até agora.
http://www.thiagoarraes.com.br/wp-content/themes/glossyblue-1-2/style.css > Entrada: 12.029KB, Saída: 8.224KB, Compressão: 31.6% (-3805 Bytes)
http://www.thiagoarraes.com.br/wp-content/plugins/democracy/basic.css > Entrada: 1.329KB, Saída: 0.986KB, Compressão: 25.8% (-343 Bytes)
http://www.thiagoarraes.com.br/wp-content/plugins/democracy/style.css > Entrada: 0.879KB, Saída: 0.627KB, Compressão: 28.7% (-252 Bytes)
http://www.thiagoarraes.com.br/wp-content/plugins/thickbox/thickbox.css > Entrada: 2.577KB, Saída: 1.416KB, Compressão: 45.1% (-1161 Bytes)
De 16.814KB passamos para 10.626KB conseguimos diminuir em 36.80% o CSS e ainda podemos diminuir mais utilizando PHP!
Crie um arquivo PHP com o código:
<?php if(extension_loaded(’zlib’)){ob_start(’ob_gzhandler’);} header(”Content-type: text/css”); ?>
Cole todo o CSS comprimido de todas as páginas aqui
<?php if(extension_loaded(’zlib’)){ob_end_flush();}?>
Explicando: O primeiro PHP verifica se a extensão zlib de compressão está ativada no servidor. Se sim, ele ativa o buffer de saída. No segundo PHP ele envia o buffer de saída e o desativa. Veja mais sobre ob_start e ob_end_flush em PHP.net.
Vamos ver como ficou. Resultado: 2.95KB! Conseguimos comprimir 4 arquivos CSS de 16.814KB para 2.95KB! São 82.45% de 16.814KB! Isso que é compressão!
Vamos supor que o site do Thiago tenha 300 visitantes diários. Ele gastaria 151.326MBs mensalmente com tráfego somente do CSS. Com o CSS comprimido, ele gastaria somente 26MBs!
É isso aí pessoal, esse exemplo pode ser utilizado no JavaScript também, mas é assunto pra outro dia.

fonte: PedroMenezes.com