Ordenando os seletores CSS

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:

Por | Tags: , , , | Alterado em 14/05/08 às 19:05

Comentários

  1. tiagón disse:

    cara, eu nunca vou conseguir chegar lá. que eu consiga fazer os blogs da verbeat funcionarem, é um milagre 😛
    pra ter uma idéia, eu empilho duas stylesheets e fico catando pedacinho em 850 linhas de código.

    e é motivo de orgulho, sim senhora! 😉
     
     

  2. T disse:

    esses dois posts sao bem uteis para pessoas desorganizadas como eu!

  3. Minha organização ainda fica um lixo, mas vou tentar aplicar essa forma que você já utiliza Simone.

    Agora é um saco mesmo ter que ficar mexendo em folhas de estilos dos outros, ainda mais quando estão desorganizadas.
     

  4. Siteja disse:

    Organização sempre ajuda, seja onde for.
    Esse modelo de posicionamento é bem interessante, eu particularmente utilizo uma variação dele, mas apenas porque acho mais fácil de encontrar os seletores.
    Um abraço.

  5. Cescapi disse:

    Exelente! Usarei para reconfigurar todoo o CMS das minhas páginas!

    Valeu!

  6. Miltinho disse:

    Eu acho interessante essa forma organizada porque impede que a gente cometa o erro da repetição.

    Parabéns…. vou mensionar no meu blog

  7. Vitor Melo disse:

    Minha organização atual é bem parecida com a sua, a unica diferença é que utilizo algumas ordens invertidas, não sou a favor de uma ordem alfabética, é muito fácil se confundi.

    Minha ordem que difere da sua:
    border » background
    font » text

    Utilizo o border primeiro porque ele influencia direto no tamanho do elemento, e o text por ser mais genérico que o font.

    Também gostaria de debater sobre isso, outra idéia muito importante também é o uso de comentários, atualmente utilizo o padrão:

    /* =Id
    ————————————————————– */

  8. Vitor Melo disse:

    O que você acha do agrupamento de elementos. Defende quais das duas formas:

    td, th { }

    ou

    td,
    th { }

    • Vitor,
      sobre o agrupamento de elementos acho que vale mais a pena separar em linhas. É mais didático. Acho que um profissional experiente pode trabalhar já sem esta separação e com cada definição escrita numa linha só. Mudei um pouco de opinião deste que este artigo foi escrito. Mas esta solução de tudo numa linha só vale apenas para os desenvolvedores disciplinado e experientes. Para quem está aprendendo ou mesmo no início de um projeto mais complexo proponho separar tudo por linhas.
      Obrigada novamente!

Faça um comentário

*