Um quantidade de estilos como essa deve se encaixar em uma ou mais das seguintes categorias...
Redundância de atributos
Pode ser que haja muitos atributos repetidos em diversas classes. Por exemplo, imagine que você esteja formatando os títulos assim:
h1 { font-weight: bold; font-size: 24px; ... }
h2 { font-weight: bold; font-size: 20px; ... }
h3 { font-weight: bold; font-size: 16px; ... }
...
Nesse caso, poderia agrupar os atributos comuns assim:
h1, h2, h3 { font-weight: bold; ... }
h1 { font-size: 24px; ... }
h2 { font-size: 20px; ... }
h3 { font-size: 16px; ... }
Estilos muito específicos
Outro problema comum é usar classes sempre muito específicas. Já vi alguns sistemas com uma classe para cada elemento usando o id
como seletor.
Imagine algo como o seguinte:
#link1 { A; B; C; D }
#link2 { A; B; C; D }
#link3 { A; B; C; D; E }
(Sendo A
, B
, C
, D
e E
estilos quaisquer)
Se você tiver várias classes CSS com estilos parecidos, separe o que é igual e coloque numa nova classe, então use composição de estilos no atributo class
dos elementos da página separando o nome das classes por espaços em branco.
Exemplo:
.link { A; B; C; D }
.link-maior { E }
<a href="#" class="link link-maior">Meu Link</a>
No exemplo acima, a classe .link
poderia conter os atributos gerais dos links, enquanto a classe .link-maior
teria uma formatação específica para links maiores.
Falta de padrão
Um CSS grande também pode ter origem em falta de padronização, onde cada componente de cada tela é um pouco diferente dos demais.
Neste caso o ideal é refatorar as telas, padronizando-as em um conjunto de estilos unificado.
Ferramenta de geração
Outra possibilidade é que alguma ferramenta está gerando os estilos com muito lixo, sendo que vários dos cenários acima podem ocorrer simultaneamente.
Conheço uma ferramenta desse tipo onde todos os componentes da tela são posicionados de forma absoluta. Como os posicionamentos e estilos são únicos para cada elemento da página, o sistema gera um arquivo CSS com uma classe para cada elemento com sua posição e formatação.
O ideal seria jogar fora essa ferramenta e fazer as telas do jeito certo. Caso não seja possível, ao menos divida os estilos de cada tela em arquivos separados.
Sistema realmente grande e complexo
Por último, pode ser que o sistema seja realmente grande o suficiente para justificar um estilo tão grande.
Neste caso, a melhor estratégia seria dividir o arquivo de forma que ele não seja carregado como um todo.
Coloque as classes principais usadas em todas as telas num arquivo principal, depois divida o restante dos estilos em diferentes arquivos seguindo algum critério relacionado ao uso do sistema, como grupos de telas que geralmente são usadas ao mesmo tempo, tipos de usuário (administrador, normal, ...) ou ainda com um CSS individual para cada tela.
O tamanho total dos estilos não vai diminuir, mas o carregamento dos CSSs será diluído entre várias requisições, melhorando um pouco a experiência do usuário ao acessar o sistema.
Não se esqueça de comprimir
O Autor da Pergunta (AP) afirmou que o arquivo já está comprimido ou "minificado", o que consiste na remoção de todos os caracteres desnecessários como espaços em branco e quebras de linha.
Mas para deixar a resposta completa, não podemos esquecer de que aplicar a "minificação" é um passo elementar para a otimização do tempo de resposta de qualquer aplicação não trivial.
Audits
do Developer Tools no Chrome? É exibido uma série de itens do que pode ser feito para melhorar a performance da sua página – Lucio Rubens 17/12/14 às 2:26