3 de novembro de 2007

Dicas para escrever CSS mais claro e mais eficiente.

Quem nunca quebrou a cabeça tentando resolver algum bug em seu projeto? Selecionei algumas dicas que vão te ajudar a escrever um CSS bem mais organizado, sem você ter que desperdiçar muito tempo procurando erros em seu código.



Valide seu código.


Validar o CSS é muito importante. Não para distribuir selinhos pela página mas sim para encontrar erros que o seus olhos não puderam encontrar. Use os métodos de validação automática a seu favor, mas lembre-se que nenhum deles detecta todos os erros.


Teste primeiro em browsers standards, e depois em browsers "problemáticos".


Faça seu código funcionar em um browser que entenda bem o CSS, como o Firefox ou Opera, para só depois encarar os IEs da vida.


Para links, LoVe/HAte


A sequência para estilizar os pseudos-seletores do elemento <a> é :link, :visited, :hover, :active (LVHA). Existem várias frases para ajudar a decorar essa sequência, uma delas é LoVe/HAte. Se for utilizar o focus a ordem é :link, :visited, :hover, :focus, :active (LVHFA).


Não declare 0px, 0em, 0%...


Quando você estiver declarando que alguma propriedade vai ter 0 de valor, não precisa escrever a unidade. 0 é 0 em todas as unidades.


Maiúsculas Vs. minúsculas.


Alguns browsers são case-sensitives (que interpretam MAIÚSCULAS/minúsculas de forma diferente), então cuidado para não por no HTML id="Contato" e no CSS #contato. Em alguns casos não irá funcionar.


Não use aspas nos caminhos de imagens.


Prefira usar background: url (caminho/da/imagem.jpg) à background: url ('caminho/da/imagem.jpg')


Use folhas de estilos externas.


Salve seus estilos em um arquivo separado e chame-a no HTML através do <link rel="stylesheet" type="text/css" href="style.css">. Usar folhas de estilo externas ajudam o usuário, porque diminui a quantidade de código que deve ser baixado; e ajudam o desenvolvedor, uma modificação nesse arquivo tem efeito em todas as páginas ligadas a ele.


Fuja do CSS inline.


Usando o atributo "style" você vai perder o controle do seu código. Tente evitar isso.


Beneficie-se do efeito cascata.


Verifique se o elemento filho herdará uma declaração de seu elemento pai. Se essa declaração não for o ideal para ele, mude; se for deixe como está.


Troque o Pixel pelo EM


O em tem uma série de vantagens sobre o pixel. Então, porque não usa-lo?


Enxugue o CSS.


Use ferramentas online como o Clean CSS para deixar reduzir uns bytes do seu CSS.


Referencias:
Dicas para desenvolver CSS
How to create clean and efficient CSS


Tags:

0 comentários: