Conselhos a seguir, erros a evitar e pequenos conselhos para o desenvolvimento das folhas de estilo CSS
Eis um ótimo guia de Reinhold Weber para desenvolver folhas de estilo (Cascading Style Sheets, ou simplesmente CSS) de uma forma correta e otimal. O encontrei navegando com StumbleUpon, o traduzi e o repropus.
Photo Credit: urbanangel
O que evitar
Eis um ótimo guia de Reinhold Weber para desenvolver folhas de estilo (Cascading Style Sheets, ou simplesmente CSS) de uma forma correta e otimal. O encontrei navegando com StumbleUpon, o traduzi e o repropus.
Photo Credit: urbanangel
O que evitar
- In-line CSS (especificar os estilos diretamente nas tags do texto)
- Dimensões absolutas dos caracteres
- Utilizar ápices únicos nos path das imagens
- Redeclarar valores já herdados
- Aplicar margens de células ou bordas a elementos de dimensões absolutas
- Posicionar elementos com coordenadas absolutas
- Denominar estilos e classes baseado em suas aparências
Recomendações a seguir
Simplifique a sua vida quando desenvolve as folhas de estilo
Sabia que?
O artigo completo é 50+ CSS Best Practices and Coding Guidelines. Aconselho também 25 Sites You Shouldn't Have Missed In 2005 do Vitaly Friedman's Notebook. Boa leitura!
- Declarações do estilo CSS em uma única linha
- Comente o código
- Organize o arquivo CSS
- Indentifique a fonte, se necessário
- Simplifique a leitura do código
- Utilize um sistema comum de nomes para classes e estilos
- Elenque os estilos em ordem alfabética
- O ponto e vírgula ";" não é necessário para a última declaração
- Não é necessário declarar grandezas (px/em/%) iguais a 0
- Para as cores utilize o formato hexadecimal abreviado
- Defina as pseudo-classes para os links na ordem LoVe/HAte (Link, Visited, Hover, Active)
- Defina os elementos das margens (padding ou border) na ordem TRouBLed (Top, Right, Bottom, Left)
- Baseie o nome das classes ou das ID mais sobre suas funções que sobre suas aparências
- Aprenda a gerir as características da hereditariedade nas regras CSS
- Administre maiúsculas e minúsculas com os estilos
- Dê uma olhada nas fontes das folhas de estilo dos sites mais relevantes
- Busque inspiração dentre os gurus do design
Simplifique a sua vida quando desenvolve as folhas de estilo
- Teste os seus estilos no browser mais atual e evoluído e depois nos outros, e não vice-versa
- Quando estiver em dúvida, valide a fonte
- Na fase de desenvolvimento integre as declarações na página, quando estiver on-line importe-as de um arquivo externo
- Instale a web developer toolbar para Firefox
- Tenha a mão uma livraria de classes CSS prontas
Sabia que?
- É possível marcar classes múltiplas para elementos únicos
- Graças a isso é possível descompor um único estilo em classes que têm uma única variável ou constante, e destiná-las em sequência aos elementos da página
- Você pode se proteger dos spams com CSS
- É possível utilizar o php para tornar os estilos CSS dinâmicos
O artigo completo é 50+ CSS Best Practices and Coding Guidelines. Aconselho também 25 Sites You Shouldn't Have Missed In 2005 do Vitaly Friedman's Notebook. Boa leitura!
Uma óptima lista com algumas dicas muito importantes, CSS optimizado é óptimo.
Muitas delas já tinha conhecimento, outras nem tanto, mas certamente que irei ter em conta sempre que mexer em CSS.
Ainda vou entrar nesse mundo da programação
Boa sorte, Dorado! Eu admiro muito quem sabe programar, viu... pra mim parece uma coisa impossìvel! rs