pixeladas aleatórias

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.