50 Conselhos Para Otimizar as Folhas de Estilo CSS

Dicas 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

  • 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

  • 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!