Este artigo resume algumas técnicas CSS comuns para estabelecer as bases para a reconstrução de sites. Espero que você possa aprender algo útil.
1. Use abreviações CSS
O uso de abreviações pode ajudar a reduzir o tamanho dos seus arquivos CSS e torná-los mais fáceis de ler. Para as principais regras de abreviação CSS, consulte "Sintaxe básica CSS".
2. Defina a unidade claramente, a menos que o valor seja 0
Esquecer de definir as unidades de uma dimensão é um erro comum entre iniciantes em CSS. Em HTML você pode escrever apenas;100, mas em CSS você tem que fornecer uma unidade exata, como: "largura:100em. Existem apenas duas exceções onde você pode deixar a unidade indefinida: altura da linha e valor 0. Caso contrário, todos os outros os valores devem ser seguidos da unidade. Cuidado para não adicionar espaços entre o valor e a unidade.
3. Diferencia maiúsculas de minúsculas
Ao usar CSS em XHTML, os nomes dos elementos definidos em CSS diferenciam maiúsculas de minúsculas. Para evitar esse erro, recomendo usar letras minúsculas para todos os nomes de definições.
Os valores de classe e id também diferenciam maiúsculas de minúsculas em HTML e XHTML. Se você precisar escrever letras maiúsculas e minúsculas, confirme cuidadosamente se sua definição em CSS é consistente com as tags em XHTML.
4. Cancele as restrições do elemento antes da classe e do id
Ao escrever para definir uma classe ou ID para um elemento, você pode omitir a qualificação anterior do elemento, porque o ID é exclusivo em uma página e pode ser usado várias vezes na página. Não faz sentido qualificar um elemento. Por exemplo:
div#content { /* declarações */ }
fieldset.details { /* declarações */ }
pode ser escrito como
#content { /* declarações */ }
.details { /* declarações */ }
Isso economiza alguns bytes.
5.Valor padrão
Normalmente, o valor padrão do preenchimento é 0 e o valor padrão da cor de fundo é transparente. Mas o valor padrão pode ser diferente em navegadores diferentes. Se você tem medo de conflitos, você pode definir os valores de margem e preenchimento de todos os elementos como 0 no início da folha de estilo, assim:
* {
margem:0;
preenchimento:0;
}