Quando nos deparamos com arquivos css e javascript cada vez maiores em projetos de sites, seja para desenvolvimento secundário ou análise de navegador, seus códigos devem ser otimizados, mas otimização não significa simplesmente compactar ou reduzir o tamanho do arquivo. Organização clara e alta eficiência operacional são os resultados que almejamos. Então, quais métodos existem para melhorar nosso código CSS? Vamos dar uma olhada em algumas sugestões abaixo.
1. Usar
abreviações pode diminuir seu tempo de trabalho e reduzir o tamanho de seus arquivos. Por que não?
Defina valores diferentes para diferenças semelhantes:
visualizar cópia simples para impressão da área de transferência?
p {
margem superior: 10px;
margem direita: 20px;
margem inferior: 30px;
margem esquerda: 40px;
}
p {
margem superior: 10px;
margem direita: 20px;
margem inferior: 30px;
margem esquerda: 40px;
}
Use abreviações:
visualizar cópia simples para impressão da área de transferência?
p {margem: 10px 20px 30px 40px }
p {margem: 10px 20px 30px 40px };
Vamos dar uma olhada nas abreviações das fontes comumente usadas
Confira o Guia de abreviação de CSS (inglês) e CSS eficiente com propriedades abreviadas (inglês) para saber mais sobre propriedades abreviadas.
2. Evite usar Hacks
Blog de Jon Hick hicksdesign.co.uk/journal Usando comentários condicionais do navegador
Hack é uma coisa ruim, pois definirá o mesmo código para navegadores diferentes, tornando o CSS complicado. Agora sabemos que devemos usar comentários condicionais em vez de hacks, eles são aceitos no IE6 e IE7, e até a equipe do IE recomenda seu uso. Use comentários condicionais para servir código CSS específico para recursos do navegador. Portanto, código CSS menor e principal é usado para servir navegadores que atendem aos padrões. Ele só será baixado quando as condições exigidas ocorrerem (como arquivos CSS adicionais). !
Vamos dar uma olhada em um exemplo de código usando comentários condicionais no IE6:
visualizar cópia simples para impressão da área de transferência?
Este código faz com que o IE6 baixe ie6.css adicional para analisar seu código CSS dedicado. Da mesma forma, se você estiver visando o IE7, basta substituir 6 e 7 acima.
3. Use espaços em branco.
Seja para sua própria leitura ou desenvolvimento secundário, você deve manter uma boa legibilidade do CSS.
Não recomendamos que você remova toda a formatação de espaços em branco, como tabulações, quebras de linha, espaços, etc., para obter um arquivo CSS menor. Recomenda-se que o código aninhado seja recuado com uma tabulação e todos os atributos estejam em uma linha separada.
Comparando as imagens acima e abaixo, qual formato pode ajudar você a economizar mais tempo em modificações? O espaço em branco facilitará o gerenciamento do seu código.
4. Remova estruturas e redefinições redundantes
Redefinir as regras usadas pela estrutura CSS do 960 Grid System de Nathan Smith
Se você escolher usar uma estrutura CSS, incluindo uma que você mesmo escreveu, se verificar o código, você definitivamente descobrirá que algumas das regras contidas na estrutura não se aplicam ao seu atual arquivo pode ser excluído.
O que pode ser pensado é a redefinição. A redefinição usada pelo YUI Grid CSS e a redefinição de Eric Meyer são atualmente muito populares e podem remover os estilos padrão de diferentes navegadores para que a página se comporte de forma consistente em todos os navegadores. Mas eles geralmente contêm todos os atributos necessários para um site grande. Alguns atributos como pré, código, sub, dfn, var, etc. não são usados para sites comuns. Eric Meyer encorajaria você a fazer o mesmo!
Framework e reset ajudarão muito no seu trabalho, mas se você não remover os usos desnecessários, isso prejudicará a eficiência e a legibilidade de suas páginas.
5. CSS estendido
Stopdesign.com CSS por Doug Bowman Use seletores especiais para camadas
Outra forma de otimizar seu código é declarar propriedades específicas para cada camada.
6. Documente seu trabalho
Na colaboração em equipe, é extremamente importante comunicar padrões de escrita, padrões de codificação, métodos de anotação e estilo. As regras baseiam-se numa abordagem consistente das normas. Isso impedirá que outras pessoas dupliquem o trabalho que você já realizou e impedirá a expansão do código.
7. Use compactação
Para economizar mais tempo de download e carregamento do navegador, a compactação é uma boa solução, mas apenas na hora de publicar. YUI Compressor e CSSTidy são especialistas nesta área. Eles podem remover código redundante e verificar erros quando as propriedades se sobrepõem.
Muitos editores populares, como BBEdit, TextMate e TopStyle, podem ajudá-lo a formatar seu código CSS da maneira que desejar. Você também pode usar PHP para processar seu CSS por meio da tecnologia de compactação de servidor. Você pode encontrar mais ferramentas de otimização e compactação de CSS.
A certa altura, esses procedimentos minimizaram a ocorrência de erros, mas não eram perfeitos. Da mesma forma, é melhor não usá-los em arquivos que contenham hacks CSS. Este é outro motivo para armazenar hacks em arquivos separados.
Terminar
------------------------------------------------- ----------------------------------
Código limpo e otimizado não se trata apenas do tamanho do arquivo, mas também facilidade de manutenção e usabilidade. Os princípios acima não são apenas para CSS, mas também podem ser aplicados a HTML, Javascript e outras linguagens de programação. Os arquivos CSS não servem apenas para apresentação ao usuário final do seu site. Os princípios acima podem ajudar na experiência do usuário e também na experiência do desenvolvedor. Aplique esses princípios aos seus projetos futuros e você certamente alcançará resultados significativos.