O artigo sobre organização do CSS era para ser dividido em duas partes. Desisti logo depois. Achei que estava indo longe demais na minha mania de código limpo. Mas a Smashing Magazine me provocou e tive que voltar atrás. Vamos listar alguns parâmetros para pôr uma ordem definitiva nos seletores CSS.
De qualquer forma, não deveria estar me justificando! Já vi muito código como este:
h3{
display:block; width:190px; height:40px;
margin-left:20px;padding:2px 4px 2px 4px;
background-image:url(/img/titulo.gif);
background-repeat:no-repeat;
background-position:left top;
width:188px;
height:40px;
border-top:2px solid #006666;
border-bottom:2px solid #006666;
display:block;
overflow:hidden;
text-indent:-999px;
margin:10px 10px 10px;
}
Em qualquer um dos casos, não é só desperdício de bytes, é também um problema durante a manutenção do código e na solução de problemas. Também em CSS, menos é mais. Códigos mais simples são mais fáceis de ler e compreender.
Como já vimos anteriormente a otimização de CSS, vamos limpar o exemplo antes de ordená-lo:
h3 a{
display:block;
width:190px;
height:40px;
margin-left:20px;
padding:2px 4px;
background:url(/img/titulo.gif) no-repeat 0 0;
width:188px;
height:40px;
border:0 solid #066;
border-width:2px 0;
display:block;
overflow:hidden;
text-indent:-999px;
margin:10px
}
Agora podemos ordenar os seletores com alguns parâmetros pré-estabelecidos. O exemplo pode ficar assim, onde reparamos alguns seletores repetidos com valores conflitantes:
h3 a{
display:block;
display:block;
overflow:hidden;
width:190px;
width:188px;
height:40px;
height:40px;
margin-left:20px;
margin:10px;
padding:2px 4px;
background:url(/img/titulo.gif) no-repeat 0 0;
border:0 solid #066;
border-width:2px 0;
text-indent:-999px
}
O debug é automático assim mesmo. É só definir uma ordem que o desenvolvedor bate o olho e vê o que está errado ou sobrando no código. Tenha cuidado ao reordenar os seletores semelhantes para não alterar o resultado final.
Para ordernar os seletores basta definir uma ordem arbitrária: ordem alfabética, por tipo de seletor, pela melhor forma de memorização, não importa. Se não quiser pensar sobre isso, ofereço a minha cola.
A base desta lista foi a referência de CSS do W3Schools e está dividida e ordenada em grupos. Primeiro, lido com os fatores de dimensão e posicionamento dos boxes para depois tratar do formato e cores.
Posição e classificação do elemento na tela
Posicionamento
- position
- top
- right
- bottom
- left
- z-index
- overflow
- clip
- vertical-align
Classificação
- clear
- float
- display
- visibility
- cursor
Tamanho do elemento e sua relação com outros
Dimensão
- width
- height
- max-width
- max-height
- min-width
- min-height
- line-height
Margens
- margin
- padding
Formato do elemento
Fundo
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Bordas
- border
- border-width
- border-style
- border-color
Listas e marcadores
- list-style
- list-style-type
- list-style-position
- list-style-image
Tabela
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
Tipologia e conteúdo
Fontes
- font
- font-style
- font-variant
- font-weight
- font-size
- font-family
Texto
- color
- text-align
- text-decoration
- text-indent
- text-transform
- direction
- letter-spacing
- white-space
- word-spacing
Conteúdo
- content
- quotes
Estou usando esta lista já há alguns meses com sucesso. Nenhuma lista é perfeita e adoraria idéias para aperfeiçoá-la. Até a segunda semana de uso não tirei-a do meu lado. Depois, tudo ficou automático e só a consulto para propriedades que uso raramente. Quando pego um código antigo, é instantânea a vontade de reordernar tudo antes de revisá-lo.
Referências:
- CSS2 Reference, W3Schools;
- Improving Code Readability With CSS Styleguides, na Smashing Magazine;
- Dicas básicas para projetar Folhas de Estilos, por Maurício Samy Silva.
Artigos relacionados:
- 15/01/2008: CSS livre, leve e solto
- 25/06/2008: Maturando o HTML
14/05/2008 às 21:58
14/05/2008 às 23:00
08/06/2008 às 17:09
07/08/2008 às 03:38
19/08/2008 às 15:50
28/08/2008 às 15:54
02/09/2008 às 08:20