Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Checklist para CSS

Índice do conteúdo

Instruções para desenvolvimento

Ao desenvolver um código CSS, devemos nos preocupar em escrever o código mais enxuto possível, isto é, tentar reduzir as redundâncias no código para que certas regras não sejam repetidas a vários elementos. Também, deve-se utilizar classes ou a especificidade do CSS sempre que necessário.

Preferimos escrever uma regra por linha:

html, body { background: #cacaca; font: 100% Arial, Helvetica,sans-serif; }

Esta maneira é a mais indicada pois o código fica menor, além de ser mais fácil encontrar a regra desejada. Caso já esteja habituado em escrever cada propriedade em uma linha não há problemas, já que se trata de uma preferência pessoal.

Checklist

Escrever as propriedades de maneira simplificada. Ao invés de escrever:

ul#menu {
 background-color: #fff;
 background-position: bottom;
 background-repeat: no-repeat;
 background-image: url(imagem.jpg);
 font-size: 1em;
 font-family: Arial, Helvetica, sans-serif;
 list-style-position: inside;
 list-style-type: decimal;
}

Devemos manter o nosso código o mais simples possível, abreviando cada propriedade (se possível): 

ul#menu { background: url(imagem.jpg) #fff bottom no-repeat; font: 1em Arial, Helvetica, sans-serif; list-style: inside decimal; }

Usar comentários para dividir nosso código em áreas, por exemplo: definições gerais (html, body…), classes gerais, elementos gerais, topo do site, menu, páginas especificas… Assim nosso código fica muito mais legível e fácil para realizar a manutenção.

Manter ajustes para o Internet Explorer no mesmo documento. Caso o IE7 necessite de regras específicas, criar o arquivo estilo_ie7.css para que sejam definidas suas modificações. Por exemplo: 

p { margin-bottom: 10px; }
html > body p { margin-bottom: 15px; }

Na regra acima, definimos que para o Internet Explorer 6 os parágrafos terão margin-bottom em 10px, enquanto nos browsers mais modernos essa regra terá o valor 15px. Porém, caso o IE7 deva possuir a mesma medida do IE6, ou seja, 10px, devemos criar a propriedade no estilo_ie7: 

html > body p { margin-bottom: 10px; }

Dessa maneira, manteremos o máximo de modificações possível em nosso CSS principal, deixando o estilo_ie7 específico para alguns casos. Porém, caso haja necessidade de utilizar hack para IE6 (muito comum para exibição de PNG transparente), utilizamos: 

* html p { margin-bottom: 10px; }

Essa linha será interpretada somente pelo IE6, passando pela validação do código. Ela possui o mesmo efeito do hack que utiliza underline no início da regra.

Utilizar a unidade “em” para fontes, pois garante que o tamanho delas será exatamente igual em navegadores distintos. O tamanho de fonte padrão dos browsers é 16px, portanto ao iniciar nosso CSS devemos especificar o tamanho 100% para as fontes nas tags <html> e <body> enquanto que, para o resto do site, caso haja uma div envolvendo todos os elementos (por exemplo a div com o id “limites”), especificamos o tamanho exato na unidade “em”: 

html, body { font: 100% Arial, Helvetica, sans-serif; )
#limites { font-size: .68em; }

De acordo com as regras acima, as tags <html> e <body> terão o tamanho 100% da fonte padrão do browser, ou seja, 16px. Já a div “limites” que engloba o site completo, terá .68em do tamanho dessa fonte. Isso corresponte à 68% dos 16px, resultando em 11px. O tamanho da fonte na medida “em” sempre está relativo ao elemento-pai, como no exemplo anterior. Agora, se desejarmos que as tags <h1> tenham o dobro do tamanho da fonte padrão (ou seja, 22px) da div #limites, é só definir: 

h1 { font-size: 2em; }

Organização dos arquivos

A organização de pastas e arquivos sempre é mantida da seguinte maneira:

Pasta raíz: arquivos HTML

/css/ : arquivo CSS padrão (estilo.css), alternativo para IE7 (estilo_ie7.css) e, caso necessário, para outras mídias (estilo_print.css);
/imagens/ : todas as imagens do site
/swf/ : animações em flash
/scripts/ : arquivos em JS

Em caso de projetos maiores usamos a seguinte estruturação de documentos CSS:

                                 /css
                                   |
             |---------------------|-----------------------|
             |                     |                       |
         estilo.css          estilo_ie7.css         (estilo_print.css)
             |
             |
        |---------------------|
        |                     |
 (estilo_geral.css)    (estilo_paginas.css)

Padrões de ordem de propriedades

seletor { position:; top:; left:; float:; clear:; display:; width:; height:; margin:; padding:; border:; background:; font:; text:; color:; }
  1. position:;
  2. top:;
  3. left:;
  4. float:;
  5. clear:;
  6. display:;
  7. width:;
  8. height:;
  9. margin:;
  10. padding:;
  11. border:;
  12. background:;
  13. font:;
  14. text:;
  15. color:;

seletor { position:; top:; right:; float:; clear:; display:; width:; height:; margin:; padding:; border:; background:; font:; text:; color:; }

1  > 3  : posicionamento
4  > 5  : float
6       : comportamento
7  > 10 : medidas e espaçamentos
11 > 12 : formatação do bloco
13 > 15 : formatação do conteúdo

As demais propriedades não listadas acima, que de alguma forma estão relacionadas, devem ser inseridas em seguida, por exemplo:

seletor { position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; font-size: 1em; line-height: 1.3em; list-style: none; }

Porém, há propriedades que não se encaixam em nenhum destes e, por isso, devem ser inseridas no final da regra:

seletor { position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; z-index: 1; overflow: hidden; }

A exemplo da checklist para desenvolvimento em HTML, estamos disponibilizando o documento base para desenvolvimento CSS, utilizado para iniciar qualquer projeto.