10 erros comuns nos CSS

1. Uso desnecessário do valor 0

O código seguinte não necessita a unidade especificada se o valor for zero.

padding:0px 0px 5px 0px;

Em seu lugar pode ser escrito desta maneira:

padding:0 0 5px 0;

Da mesma maneira é igual para outros estilos. Ex.:

margin:0;

Não desperdice espaços agregando unidades tais como px, pt, em, etc, quando o valor for zero. A única razão de fazer isto é se necessitar mudar estes valores mais tarde. Se não declarar estas unidades não tem sentido. Os pixels zero são iguais que os pontos zero.

Entretanto, line-height pode não ter unidade. Por isso, é válido o seguinte:

line-height:1;

De qualquer maneira você pode utilizar uma unidade em concreto como em se desejar.

2. As cores em formato hexadecimal necessitam uma almofadinha

Isto está mal:

color: ea6bc2;

Deve ser:

color: #ea6bc2;

Ou este outro:

color: rgb (234.107.194);

3. Valores duplicados nos códigos de cores

Não escrever o código desta maneira:

color: #ffffff;
background-color:#000000;
border:1px solid #ee66aa;

Os valores duplicados podem ser omitidos escrevendo os códigos desta maneira:

color:#fff;
background-color:#000;
border:1px solid #e6a;

Obviamente isto não deve ser feito com códigos como este!

color: #fe69b2;

4. Evitar repetições de código desnecessária

Evite usar várias linhas quando se pode conseguir com uma só. Por exemplo, ao fixar as bordas, algumas vezes se deve fazer separadamente, porém em casos como o seguinte não é necessário:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;

Poderíamos resumi-lo em uma única linha como esta:

border:1px solid #00f;

5. A duplicação é necessária com os estilos em cascata

Nos estilos em cascata é aceitável repetir o mesmo código para um elemento duas vezes, se significa evitar a repetição mencionada no ponto acima. Por exemplo, digamos que temos um elemento onde somente é diferente a "border" esquerda. Ao invés de colocar cada "border" escrita usando quatro linhas, uso só duas:

border:1px solid #00f;
border-left:1px solid #f00;

Neste caso, primeiro definimos todas as "borders" com a mesma cor, porém mais tarde para economizarmos duas linhas de código redefinimos a "border" esquerda a outra cor, desta maneira economizamos duas linhas de código.
O exemplo desperdiçando espaço ficaria assim:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #f00;

É claro que esta economia de carregamento supõe um atraso no carregamento da página, pois estamos definindo a "border" esquerda duas vezes, porém o carregamento deste processo é insignificante.

6. Os estilos inválidos não fazem nada

Um exemplo é suficiente para explicar este erro:

padding:auto

Este estilo só pode ser aplicado a width e height, porém não a padding.

7. Código Específico para cada navegador

Logicamente este tipo de código só funcionará no navegador ao que vai destinado, porém há que pensar se é rentável visto que só alguns usuários poderão apreciar essas mudanças.

8. Espaço perdido

Não estou seguro do porquê, mas muitos designers estão empenhados em desperdiçar o espaço em seu código, usando um montão de quebras de linha desnecessárias. Lembre que isso só será visto por você e estará fazendo um uso excessivo de largura de banda. Também seu código será mais fácil de ler visto que terá menos "brechas".

Por suposto que é sábio deixar um certo espaço para mantê-lo legível, embora haja pessoas que gostem de condensar todo, não deixando nenhum espaço.

9. Especificar as cores sem usar palavras

Definir as cores usando as palavras que as definem não é uma boa idéia visto que estaríamos confiando no navegador para que interprete que cor e código devem aplicar. As tonalidades para um mesmo nome de cor mudam muito de um navegador a outro.

É uma boa prática especificar sempre a cor por seu código hexadecimal.
Ex.: utilizar "#fff" ao invés de branco.

10. Agrupar estilos idênticos

É comum ver os estilos escritos às vezes com o mesmo código, mesmo quando o estilo é igual.

Seria conveniente agrupá-los e assim otimizaríamos espaço:

h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}

Também nos fará muito mais fácil a tarefa de atualizar o código.

Informe de Manu Gutierrez
URL: http://www.tufuncion.com