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/ : arquivos .less e .css
/css/fontes/ : web fontes.
/imagens/ : todas as imagens do site.
/js/ : arquivos em JS
/swf/ : animações em flash
/docs/ : pdf, doc, etc.

LESS

Para desenvolvimento CSS, utilizamos a linguagem dinâmica de estilos LESS, a qual nos permite estender o CSS com comportamento dinâmico através de variáveis, mixins, operações e funções.

Para usar LESS é necessário usar um JavaScript que permite ao browser interpretar diretamente a linguagem, ou algum compilador que converta seu código do formato LESS para CSS.

Existem vários compiladores para diferentes sistemas operacionais; no nosso caso utilizamos um compilador que, ao detectar a atualização do arquivo LESS, gera automaticamente o CSS minificado (sem espaços, comentários e quebras de linha), o qual puxamos diretamente em nossos HTMLs.

Organização dos arquivos CSS

Nosso padrão de organização para estilização é separado entre os seguintes arquivos:

Estilos gerais

  1. geral-min.less – Estilos para todos os dispositivos;
  2. desktop-min.less – Dispositivos com largura a partir de 769px;
  3. tablet-min.less – Dispositivos com largura de 480px até 768px;
  4. mobile-min.less – Dispositivos com largura de 320px até 479px;
  5. impressao-min.less – Estilos para versão de impressão.

Estilos específicos

Para grandes projetos deve-se manter os arquivos:

  1. desktop-templates-min.less – Estilos específicados por página (id) para versão desktop;
  2. tablet-templates-min.less – Estilos específicados por página (id) para versão tablet;
  3. mobile-templates-min.less – Estilos específicados por página (id) para versão mobile.

Conforme à dimensão do projeto é recomendavél adicionar o arquivo:

Além de todos arquivos utilizamos um arquivo como biblioteca de classes com estilos gerais. Nesse arquivo ficam as váriaveis e mixins globais do LESS, que podem ser utilizadas em qualquer definição de estilo.

  • elementos.less – Classes com estilos gerais, utilizados em todo os arquivos LESS.

Os arquivos com estilos gerais incluem os arquivos de estilos específicos via @import, portanto nos arquivos HTML são adicionados apenas os arquivos gerais.

Media Query

Incluímos no HTML nesse formato:

  <link href="css/geral-min.css?v=1" rel="stylesheet" />
  <link href="css/mobile-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao-min.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop-min.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->

*Selectivizr é um script que interpreta pseudo-classes e seletor por atributo no Internet Explorer 6-8.

Caso o projeto seja pequeno, não usamos nenhum arquivo específico para páginas, incluímos todos estilos nos arquivos: “geral.less”, “mobile.less”, “tablet.less” e “desktop.less”.

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 do checklist para desenvolvimento em HTML, também disponibilizamos o documento base para desenvolvimento CSS, utilizado para iniciar qualquer projeto.