1. Adicione um bloco de comentários no início da folha de estilos para descrever a data de criação, criador, tags e outras informações de comentários da folha de estilos.
| Exemplo de código-fonte : /* ---------------------------------- Site: Nome do site Autor: 52CSS.com Atualizado: data e hora Atualizado por: Nome ---------------------------------- */ |
2. Incluindo marcações de cores comuns
| Exemplo de código-fonte : /* ---------------------------------- CORES Fundo do corpo: #def455 Plano de fundo do contêiner: #fff Texto Principal: #333 Links: #00600f Links visitados: #098761 Links suspensos: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 ---------------------------------- */ |
3. Dê nomes significativos para ID e Classe
Método de nomenclatura não recomendado:
| Exemplo de código-fonte : .caixa verde {...} #textogrande { ... } |
Método de nomenclatura recomendado:
| Exemplo de código-fonte : .pullquote {... } #introdução {... } |
4. Integre regras de estilo associadas
| Exemplo de código-fonte : #cabeçalho {...} #header h1 {...} #header h1 img {...} #cabeçalho formulário {...} #header a#skip { ... } #navegação { ... } #navegação ul { ... } #navegação ulli { ... } #navegação ul li a {... } #navegação ul li a:hover { ... } #contente { ... } #content h2 {...} #content p {...} #contentul { ... } #contentulli { ... } |
5. Adicione comentários claros aos estilos
| Exemplo de código-fonte : /* ---------------------------------- estilos de cabeçalho ---------------------------------- */ #cabeçalho {...} #header h1 {...} #header h1 img {...} #cabeçalho formulário {...} /* ---------------------------------- estilos de navegação ---------------------------------- */ #navegação { ... } |