Quando trabalhamos com webdesign, principalmente quando somos iniciantes nesta área, existem vários erros graves que ignoramos mas que na verdade podem estar destruindo o nosso trabalho aos poucos. São estes pequenos erros que no fim compromentem a qualidade dos nossos trabalhos de design. Neste artigo colocarei uma lista com alguns erros de CSS que eu e você já cometemos no passado mas que devemos prestar mais atenção no sentido de evitar que eles aconteçam novamente.
1. Unidades redundantes para valores nulos
Quando o valor de alguma unidade é zero, não precisamos especificar a unidade!Por exemplo, em vez de
padding:0px 0px 5px 0px;
Poderiamos escrever apenas:
padding:0 0 5px 0;
O mesmo princípio se aplica a todos os outros estilos.Não precisamos gastar bytes escrevendo unidades como px,pt,em,etc para valores nulos. Zero pixels é o mesmo que zero points, logo só escrever zero será suficiente para dizer que você não quer nada!O atributo line-height pode não ter unidade mesmo quando não é zero. Logo, é válido escrever:
line-height:1;
2. Cores no formato hexadecimal devem ter um #
É errado escrever:
color:ea6bc2;
Em vez disso, escreva:
color:#ea6bc2;
Ou então:
color:rgb(234,107,194);
3. Não condensar códigos de cores duplicadas
Em vez de escrever cores com códigos duplicados assim:
color:#ffffff; background-color:#000000; border:1px solid #ee66aa;
Você pode condensar estes valores e escrever apenas:
color:#fff; background-color:#000; border:1px solid #e6a;
Infelizmente não é possivel condensar cores não “simétricas”, como esta:
color:#fe69b2;
4. Não evitar repetições de códigos
A não ser que você tenha motivos claros para fazer isso, não deverá repetir códigos desnecessariamente. Por exemplo, em vez de escrever as bordas deste jeito:
border-top:1px solid #00f; border-right:1px solid #00f; border-bottom:1px solid #00f; border-left:1px solid #00f;
Se as bordas são todas iguais, você poderá condensar o código escrevendo apenas:
border:1px solid #00f;
5. Não usar cascatas para evitar duplicação
Não se esqueça que CSS vem de “Folhas de estilo em cascata”. Sendo assim, você pode tirar vantagem das cascatas para evitar duplicação de código. Por exemplo, suponha que apenas uma das bordas deve ser diferente, no exemplo dado no número 4. Sendo assim, podemos escrever o nosso estilo CSS assim:
border:1px solid #00f; border-left:1px solid #f00;
Aqui, todas as bordas são estilizadas do mesmo jeito, menos a esquerda que é depois estilizada com outra cor.
6. Não usar estilos inválidos
Usar estilos como auto para o atributo padding representam um erro de design, uma vez que este estilo não é aplicável para este atributo. Além de aumentar o número de bytes da folha de estilo, estas medidas tornam difícil a manutenção da folha de estilos, por causa do excesso de código desnecessário.
7. Não levar em conta o browser a qual se aplica o estilo
Quando usamos estilos que só se aplicam a um browser estamos necessariamente a assumir que internautas que usam outros browsers terão sérios problemas com a nossa página. Sendo assim, é extremamente importante pensar em como resolver este problema, de modo a que todos tenham uma boa visualização da página que estamos a estilizar. Isso passa por evitar usar estilos que não são universais ou então garantir alternativas para os outros visitantes.
8. Excesso de espaços em branco
Exceder nos espaços em branco das folhas de estilo é outro erro que se deve evitar, se o objectivo é ter um trabalho de qualidade. Espaços em branco apenas aumentam o tamanho da folha de estilos, consumindo assim mais largura de banda. Sendo assim, coloque o mínimo de espaços em branco que puder.
9. Usar palavras para especificar cores
Todos sabemos que é mais fácil decorar palavras em vez de códigos. Mas isso é problema dos humanos e não das máquinas, que serão responsáveis por transformar a sua folha de estilos numa belíssima página web. Em vez de red ou blue, use códigos como #f00 para indicar as cores a usar nas suas folhas de estilo.
10. Não agrupar estilos idênticos
é comum ver o mesmo estilo sendo aplicado várias vezes diferentes, para elementos diferentes. Porquê?? Se os estilos são iguais, porque não simplesmente agrupar estes estilos numa única declaração, como esta:
h1, p, #footer, .intro { font-family:Arial,Helvetica,sans-serif; }
Assim será mais fácil fazer a manutenção da folha de estilos.Baseado no texto de Design Detector
Comentários Recentes