Esta matéria é uma tradução do artigo 70 Expert Ideas For Better CSS Coding

Nem sempre é fácil desenvolver com CSS. Dependendo do seu conhecimento e experiência, desenvolver com CSS pode se tornar uma grande dor de cabeça, particularmente se você não tiver um sólido conhecimento de seletores. A criação de uma marcação semântica e apropriada é o primeiro passo no caminho do desenvolvimento de uma CSS tirando o máximo proveito de atributos e propriedades.

Fizemos uma análise dos mais interessantes e úteis truques, dicas, idéias, métodos, técnicas e soluções para codificação CSS e iremos mostrá-las nesta matéria. Acresentamos também algumas técnicas básicas que provavelmente você já conheça e até use nos seus projetos mas que às vezes, quando mais você precisa, não consegue encontrá-las com facilidade.

O resultado disto foi uma matéria mostrando mais de 70 dicas dos ‘experts’, para aumentar a eficiência do seu código CSS. No final da matéria forneço uma lista de links para artigos relacionados.

• Em breve o autor publicá uma versão pdf em inglês desta matéria, (NT: se você estiver interessado inscreva-se nos RSS-feed do site do autor, para ser informado do lançamento).
• Caso você esteja interessado leia também (em inglês) 53 CSS-Techniques You Couldn’t Live Without, mostrando algumas técnicas básicas CSS para você usar em seus projetos.
• Digg esta matéria se você a considerou interessante.

Gostaria de expressar meus sinceros agradecimentos a todos os designers que compartilham sua idéias, técnicas, métodos, conhecimento e experiência com seus leitores. Obrigado à você, à nós, aos codificadores, designers, desenvolvedores, arquitetos da informação, foi muito bem-vinda as informações por vocês compartilhadas.

1.1. Tarefa: Iniciando

Tendo criado o design gráfico, comece com uma página em branco. “Coloque nela o topo, a navegação, um conteúdo qualquer e um rodapé. Escreva a marcação HTML. A seguir crie sua CSS. Este é o caminho para as coisas funcionarem melhor.” [CSSing]

Limpar os estilos CSS . “Você pode eliminar a necessidade de especificar um valor para determinada propriedade, valendo-se do valor padrão para a propriedade. Alguns desenvolvedores preferem zerar oa valores de margin e padding de todos os elementos logo no início da CSS Global white space reset. Eis alguns links para consagrados autores e suas recomendações a respeito: Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]

Use uma folha de estilos mestre. “Um dos enganos mais comuns que eu tenho observado não só em principiantes como também em alguns desenvolvedores de nível intermediário é a não remoção da estilização padrão dos navegadores. A estilização padrão leva a diferenças na aparência do design em diferentes navegadores e não há motivo para xingar este ou aquele navegador. Ao codificar um web site você deve antes de mais nada, limpar os estilos padrão do navegador.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]

master.css
  @import url("reset.css");
  @import url("global.css");
  @import url("flash.css");
  @import url("structure.css");

<style type="text/css" media="Screen">
  /*\*/@import url("css/master.css");/**/
  </style>

Monte uma biblioteca de classes CSS. Isto é muito útil para ‘debugar’, mas deve ser evitado na versão de lançamento do site (separar apresentação de marcação). Uma vez que é permitido e válido usar várias classes (por exemplo: <p class="floatLeft alignLeft width75">…</p>), tire proveito disto para debugar sua marcação. (updated) [Richard K. Miller]

CSS:

  .width100 { width: 100%; }
  .width75 { width: 75%; }
  .width50 { width: 50%; }
  .floatLeft { float: left; }
  .floatRight { float: right; }
  .alignLeft { text-align: left; }
  .alignRight { text-align: right; }

1.2. Organize seu código CSS

Organize seu CSS usando folhas de estilo mestre. “Organizar auxilia na manutenção do site. Comece com uma folha de estilos mestre. Dentro desta folha importe as folhas para limpar estilos padrão reset.css, a folha global.css, flash.css (se necessária), a folha para estrutura do site structure.css e ocasionalmente uma folha para tipografia. A seguir um exemplo de folha de estilo "mestre" e de como incorporá-la a um documento:”

h2 { }
  #snapshot_box h2 {
  padding: 0 0 6px 0;
  font: bold 14px/14px "Verdana", sans-serif; }
  #main_side h2 {
  color: #444;
  font: bold 14px/14px "Verdana", sans-serif; }
  .sidetagselection h2 {
  color: #fff;
  font: bold 14px/14px "Verdana", sans-serif; }

Organize sua CSS usando flags. “Divida sua folha de estilos em seções específicas, por exemplo: estilos global – (body, parágrafos, listas, etc), Topor, Estrutura da Página, Cabeçalhos, estilos para Textos, Navigação, Formulários, Comentários, Extras. [5 Tips for Organizing Your CSS]

 /* -----------------------------------*/
 /* ---------->>> GLOBAL <<<-----------*/
 /* -----------------------------------*/

Escreva um índice para sua CSS. No início da sua CSS construa um índice dos conteúdos. Você pode por exemplo destacar as diferentes áreas de estilização do seu documento (topo, conteúdo principal, navegação, rodapé, etc). Separe de maneira facilmente identificável as áreas de estilização.

[5 Steps to CSS Heaven]

Ordene as propriedades alfabeticamente. “Eu não sei exatamente de onde eu tirei esta dica, mas eu a adotei em meus projetos e acredite ou não, ordenar as propriedades alfabeticamente facilita sua localização.” [Christian Montoya]

body {
  background:#fdfdfd;
  color:#333;
  font-size:1em;
  line-height:1.4;
  margin:0;
  padding:0;
  }

Organize o código por seções. “Há um consenso sobre esta dica e pode parecer óbvia para muitos de vocês, mas eu frequentemente vejo folhas de estilo sem qualquer organização por seções.” Isto é uma prática fácil de implementar e facilitará a leitura e manutenção do código até mesmo depois de passados anos que tenha sido escrito. Será mais fácil encontrar classes e elementos que precisam ser alterados.
Exemplos: /* Estrutura */, /* Tipografia */ etc. ” [CSS Tips and Tricks]

Organize de acordo com o alvo do seletor . Tendo organizado sua CSS em seções distribua os seletores nas seções tendo em conta o posicionamento do alvo do seletor na marcação. Isto irá facilitar a manutenção futura e dará consistência às CSS.” [Ryan Parr]

Separe o código em blocos . “Eu uso três blocos de código. O primeiro bloco destina-se à declarações de estilo para elementos comuns em um documento Web, tais como body, links, alguns estilos para o topo, declarações para zerar paddings e margins em formulários e assim por diante. […] A seguir vêm as declarações para as classes, tais como classes para estilizar mensagens de erro, enfatizar textos e colorir. [..] Seguem-se as declarações para os containers da página e as margens para os elementos dentro dos container. Com uma simples passada de olhos eu consigo visualizar o esqueleto do layout e saber onde encontar os elementos que compõem o documento. Mesmo os containers que não necessitam de declações de estilo eu faço constar da folha de estilos.” [Jonathan Snook]

1.3. Tarefa: Manipular IDs, Classes, Seletores, Propriedades

Use o mínimo possível de containers. “Evite sobrecarregar desnecessariamente a estrutura do seu documento. Iniciantes costumam usar uma quantidade enorme de DIVs para substituir células de tabelas. Considere o uso dos elementos estruturais da página para construir o layout. Não acresente mais DIVs. Estude todas as opções antes de adicionar um container a mais (DIVs) para obter um determinado efeito que poderia ser obtido com uso inteligente das CSS na estrutura atual do documento.” [Ryan Parr]

Minimize o uso das propriedades. “Trabalhe com inteligência, não se estresse com CSS. E aqui há outros desdobramentos para esta dica: se não existe razão para declarar uma determinada propriedade, não a declare; se você nõa certeza do porque está declarando determinada propriedade, não a declare e finalmente, se uma mesma propriedade foi declarada em lugares diferentes na sua folha de estilos, verifique a possibilidade de colocar a declaração em um lugar apenas.” [CSSing]

Não abuse do uso de seletores. “Evite seletores que não sejam estritamente necessários. Usar poucos seletores implica em o emprego de menos seletores para osbrescrever regras para um determinado estilo — em consequência facilidade de correção de erros.” [Jonathan Snook]

Use o mínimo de hacks possível. “Não use hacks a menos que se trate de correção para um bug bem conhecido e documentado. Esta é uma dica valiosa, pois é comum ver-se uso de hacks para corrigir coisas que não causadas por bugs. Ao se deparar com uma situação que você considere ser necessário usar hack para solucionar, faça primeiro uma busca (o Google é sua salvação nestas horas) para ver se encontra alguma documentação relatando o problema que você está tendo. [10 Quick Tips for an easier CSS life]

Use constantes CSS para agilizar o desenvolvimento. “O conceito de constante – valores fixos a serem usados no código [á muito útil em CSS]. [..] Uma maneira do uso de constantes é definí-las no início das CSS usando a sintaxe para comentários. Um uso bastante comum é a criação de um ‘glossário de cores’. Você terá uma referência rápida das cores usadas no site que evitará erros na definição das cores e auxiliará na eventual necessidade de alterar uma cor em toda a CSS por um processo de busca e troca.” [Rachel Andrew]

# /*
  # Cinza escuro (texto): #333333
  # Azul escuro (cabeçalhos, links) #000066
  # Azul (topo) #333399
  # Azul claro (navegação superior) #CCCCFF
  # Cinza: #666666
  # */

Adote um sistema intuitivo de nomear as coisas. Se você nomear id’s e classes segundo um padrão, terá facilitado seu trabalho de busca por erros e de atualização do documento. Em particular, quando trata-se de folhas de estilo muito extensas tudo pode tornar-se extremamente confuso com um padrão de nomeação aleatório. Eu recomendo um padrão baseado em nomes compostos pela combinação elementopai_elementofilho. [10 CSS Tips]

Nomeie IDs baseado no valor semântico. “Evite usar nomes baseados na apresentação. Nomear algo como coluna-direita não é uma escolha acertada, pois no futuro uma mudança de layout poderá impor que sua coluna-direita esteja posicionada à esquerda. E isto trará confusões no futuro, então é bom evitar nomes baseados na apresentação. [Garrett Dimon]

Agrupe seletores que tenham as mesmas declarações CSS. “Agrupe seletores. Quando vários elementos, classes ou id compartilham declarações CSS idênticas, você agrupá-las em uma mesma regra evitando repetir a declaração em lugares diferentes na folha de estilo.Isto economiza espaço – e talvez muito espaço.” [Roger Johansson]

Separe as propriedades que você acha que serão usadas em vários lugares na folha de estilo. “Se você acha que uma determinada propriedade será reutilizada várias vezes, separe-a na folha de estilos pois com isto será possível controlar de um lugar aquela propriedade.”
[5 Steps to CSS Heaven]

Posicione classes e ID’s para elementos o mais alto possível na árvore do documento. Tire máximo proveito dos seletores contextuais (contextual selectors). Não tenha medo de escrever seletores compostos de vários elementos. Seletores longos podem facilitar a leitura das CSS e evitar o uso exagerado de classes ou DIVs na marcação – divitis. [Chric Casciano]

Saiba explorar o efeito cascata das CSS. “Suponha que você tenha dois boxes bem parecidos no seu web site – você pode escrever regras CSS separadas para cada um deles ou escrever regras para ambos e a seguir regras para contemplar as pequenas diferenças entre eles.
” [5 Steps to CSS heaven]

Use as tags: <small>, <em> e <strong>. “Muitas vezes você tem seções no site que apresentam variações tipográficas em uma mesma linha ou mesmo próximas umas as outras. Nestes casos, em lugar de criar divs e classes para estilizar, somente porque elas não carregam semântica e tambám não poluem o seu belo código XHTML não é a melhor solução” Use tags semânticas. [Mike Rundle’s 5 CSS Tips]

1.4. Tarefa: Use notação abreviada

Abrevie a notação para cores hexadecimais. “Uma cor hexadecimal composta de três pares de dígitos admite sintaxe abreviada em CSS que consiste em representar cada par por um dígito por exemplo: #000000 pode ser abreviado para #000 e #336699 para #369 [Roger Johansson]

Defina as pseudo classes para links na ordem certa: Link, Link visitado, Link hover, Link ativo. “Para ter certeza de todos os estilos para links funcionem apropriadamente você deve declarar as regras CSS na ordem correta “link-visitado-hover-ativo”. Se você pretende usar um estilo para focus ele deverá ser colocado no final – contudo leia esta explicação até o final antes de decidir.” [Eric Meyer]

a:link { color: blue; }
  a:visited { color: purple; }
  a:hover { color: purple; }
  a:active { color: red; }

Defina margin, padding e border na ordem certa: Top, Right, Bottom, Left. “A ordem para declarar margin, padding e border é a ordem horária a partir de top: Top, Right, Bottom, Left.” [Roger Johansson]

Use abreviar propriedades.
“Abreviar as declarações para margin, padding, border, background, fonts, lists and outline economiza espaço.”

CSS:
  margin: top right bottom left;
  margin:1em 0 2em 0.5em;
  (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

CSS:
  border:width style color;
  border:1px solid #000;

CSS:
  background: color image repeat attachment position;
  background:#f00 url(background.gif) no-repeat fixed 0 0;

CSS:
  font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
  font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Tarefa: Configurar a tipografia

Para usar EMs como se fossem pixels defina font-size 62.5% para body. O valor default para font-size é 16px; adotando para body um tamanho de font igual a 62,5% você faz com o valor default passe a ser 10px pois 16pixel x 62.5% = 10pixel. “Eu defino um valor de font-size para body igual a 62.5%. Com isto consigo usar EMs para tamanhos raciocinando em termos de pixel, por exemplo: 1.3em é aproximadamente igual a 1.3px. ” [Jonathan Snook]

Use codificação universal para caracteres. “[..] A resposta é usar um conjunto de caracteres universal para cobrir todas as eventuais posibilidades. Felizmente existe UTF-8 baseado em Unicode. Unicodeé uma norma industrial projetada para permitir que textos e símbolos de todos os idiomas sejam representados consistemente por computadores. UTF- 8 deve ser incluido na sua página Web lincado na seção head do documento. [20 pro tips]

<meta http-equiv="content-type" content="text/ html;charset=utf-8" />

Use CSS para capitalizar. Se você precisa apresentar um texto em maiúsculas, um cabeçalho por exemplo, no lugar de digitar o texto em maiúsculas no código use CSS para isto. A regra CSS mostrada a seguir transforma o texto contido dentro de um elemento h1 xxxxxxxxxxxxxxxxxx(ERRO NO ORINAL) em letras maiúsculas independentemente de como ele tenha sido escrito no código da página.”. [20 pro tips]

h1 {
  text-transform: uppercase;
  }

É possível transformar um texto em letras maiúsculas diferenciadas (small-caps) automaticamente. A propriedade font-variant é usada para transformar texto originariamente em minúsculas em letras maiúsculas diferenciadas ou seja small-caps que se caracterizam por apresentar um tamanho de fonte menor do que o do restante do texto.

h1 {
  font-variant: small-caps;
  }

Válido para toda a tipografia – defina famílias de fontes genéricas. “Ao declarar um determinado tipo de fonte a ser usado no site nós estamos supondo que o usuário tenha aquela fonte instalada em seu equipamento. Se ele não tiver a fonte instalada simplesmente não a verá. Por esta razão devemos especificar alternativas para a fonte principal e que a lista das alternativas termine com uma fonte genérica, como mostrado a seguir.
[Getting into good coding habits]

p {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  }

Use 1.4em – 1.6em para line-height. “line-height:1.4” para linhas legíveis, linhas com comprimento razoável não mais longas do que 10 palavras e cores com contraste suficiente mas sem exagero. Por exemplo, preto total em branco total normalmente é um contraste muito forte para monitores CRT, então adote um branco como #fafafa e um cinza escuro como #333333 para um bom contraste.” [Christian Montoya]

Defina tamanho de fonte igual a 100.01% no elemento html. Este estranho valor de100.01% para o tamanho de fonte, corrige uma série the bugs em diversos navegadores. Primeiro, definir um tamanho de fonte no elemento body em percentagem (no lugar de EM) previne um problema no IE/Win que tende a aumentar ou diminuir desproporcionalmente o tamanho de fontes para textos contidos dentro de elementos onde for definido tamanho de fonte em EM. E mais, algumas versões do Ópera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores. Safari, por sua vez não se comporta bem com font-size igual a 101%. Atualmente a “melhor” sugestão é usar um valor igual a 100.01% para esta propriedade.” [CSS: Getting into good habits]

1.6. Tarefa: Debugando

Adicione bordas para identificar containers. “Use CSS tal como bordas auxiliares ou cores de fundo como auxiliares no desenvolvimento dos seus documentos ou com propósitos de identificação de bugs.
div { border:1px red dashed; } é um auxiliar efeciente. Existe ainda a ferramenta bookmarklets that apply borders que auxilia no processo de desenvolvimento e correção.” Você pode usar a regra * { border: 1px solid #ff0000; }. [Chric Casciano]. Definir bordas para um elemento ajuda na identificação de sobreposições ou de espaços extras em branco onde sua identificação não seria tão óbvia sem auxílio da borda.
[CSS Crib Sheet]

* { border: 1px solid #f00; }

Confira o fechamento de todas as tags quando estiver debugando. “Muitas vezes uma simples modificação quebra um layout de forma totalmente inesperada e isto pode ter sido causado por falta de uma tag de fechamento de um elemento na página. [10 CSS Tips]

2.1. Dicas técnicas: IDs, Classes

Uma ID e muitas classes em cada página. “Confira as IDs: Somente um elemento no documento pode conter uma ID com determinado nome, ao contrário do nome escolhido para uma classe que póde ser atribuida a vários elementos no mesmo documento. [..] Nomes para classes e id devem conter caracteres de[A-Za-z0-9] e hífens (-), e não podem começar com hífen ou dígito (see CSS2 syntax and basic data types).” [Roger Johansson]

Nomes de elementos em seletores são case sensitivos. “Lembre-se de case sensitivos. Quando CSS é usada com XHTML, o nome dos elementos em seletores é case sensitivo. Para evitar surpresas eu recomendo usar sempre letras minúsculas parta nome de elementos em seletores. Valores de classe e de ID são case sensitivos tanto em HTML como em XHTML então evite misturar maiúsculas e minúsculas em nome de de classes e IDs.” [Roger Johansson]

Use classes e IDs válidas. “ou seja beginning with a letter, comece o nome com uma letra ou com underscor. IDs devem ser únicas em mesmo documento. escolha nomes genericos, que descrevam funcionalidade e não apresentação.” [CSS Best Practices]

Podem ser usados vários nomes de classes em um mesmo elemento. “è válido usar vários nomes para a classe de um mesmo elemento. Com isto é possível escrever várias regras e estilo definindo diferentes propriedades e aplicá-las convenientemente onde necessário.” [Roger Johansson]

2.2. Dicas técnicas: Use o poder dos seletores

Roger Johansson escreveu uma série de artigos muitíssimo útil sobre CSS 2.1 Selectors. (NT: A série foi por min traduzida e encontra-se em: Seletores CSS 2.1). Recomendo vivamente a leitura da série de artigos – a seguir listamos algumas dicas interessantes a respeito. Esteja ciente que os setores ‘>’ e ‘+’ não são suportados pelo IE6 e anteriores. (updated).

Use seletores filho. “Um seletor filho casa com um elemento filho imediato de um elemento. Um seletor filho consiste em sua sintaxe de de dois ou mais seletores separados por um sinal de maior que, “>”. O elemento pai é o da esquerda do sinal “>” e é permitido espaço em branco antes e após o elemento de combinação (sinal de maior que). A regra a seguir é aplicada aos elementos strong que são filhos do elemento div. [Roger Johansson]

div > strong { color:#f00; }

Use seletores irmãos adjacentes. Um seletor irmão adjacente é constituido por dois seletores separados por um sinal de mais, “+”. É permitido espaço em branco antes e após o elemento de combinação (sinal de mais). O seletor casa com o elemento que é adjacente ao primeiro elemento. Os elementos devem ter o mesmo elemento pai e o primeiro elemento deve ser imediatamente precedente ao segundo. [Roger Johansson]

p + p { color:#f00; }

Use seletoresc de atributo. Um seletor de atributo casa com elementos baseado na presença de atributos. Existem quatro tipos destes seletores:

[att]

Casa com elementos que tenham um atributo qualquer e independente do valor do atributo.

[att=val]

Casa com elementos que tenham um atributo cujo valor seja exatamente “val”.

[att~=val]

Casa com elementos que tenham um atributo cujo valor do atributo é uma lista de valores separados por um espaço em branco e contenha o valor “val”. O valor “val” não pode conter espaços.

[att|=val]

Casa com elementos que tenham um atributo cujo valor do atributo é uma lista de valores separados por um hífen começando com “val”. A finalidade primeira deste seletor é a de casar subcódigosde linguagem especificados no atributo lang (xml:lang no XHTML), por exemplo: “en”, “en-us”, “en-gb”, etc.

O seletor a seguir casa com qualquer elemento p que tenha o atributo title independente do valor do atributo:

p[title] { color:#f00; }

O seletor a seguir casa com qualquer elemento div que tenha o atributo class com valor igual a error:

div[class=error] { color:#f00; }

Pode-se usar múltiplos seletores em um mesmo seletor. Com isto é possível casar um elemento baseado em diferentes atributos nele contido. A regra a seguir será aplicada aos elementos blockquote que tenham o atributo class com valor exatamente igual a “quote” e também tenham especificado o atributo cite (independente do seu valor):

blockquote[class=quote][cite] { color:#f00; }

Use seletores descendentes. “Seletores descendentes são usados para eliminar a necessidade de definir classes na marcação e ganhar eficiência nos seus seletores CSS. ” [Roger Johansson]

2.3. Dicas técnicas: Estilos para Links

Cuidado ao estilizar links quando estiver usando âncoras no seu documento. “Se você usa as clássicas âncoras no seu documento (<a name="ancorar">) elas também serão estilizadas com as regras estabelecidades para as pseudo classes :hover e :active. Para evitar isto existem duas maneiras; usar id para as âncoras ou adotar uma sintaxe mais sofisticada, usando :link:hover, :link:active” [Dave Shea]

Defina o relacionamento entre links. “O atributo rel indica o relacionamento semântico entre links de um documento para outro.

a[rel~="nofollow"]::after {
  content: "\2620";
  color: #933;
  font-size: x-small;
  }
  a[rel~="tag"]::after {
  content: url(http://www.technorati.com/favicon.ico);
  }

“A regra acima faz uso do seletor de atributo para valores contidos em listas separadas por espaços. Qualquer elemento contendo um valor de atributo relacional "nofollow" e "tag" será casado com o seletor. Links com atributo de relacionamento com valor "nofollow" serão renderizados com um caveira e dois ossos cruzados na cor vermelha escura logo a seguir o texto e links com atributo de relacionamento com valor "tag" serão seguidos pelo ícone da Technocrati.” [Handy CSS]

Você pode detinguir links externos automaticamente. Muitos usam o não standard atributo de relacionamento rel="external" para distinguir links externos ao site. Contudo esta solução implica em marcar o atributo rel em cada link externo e isto consome muito tempo e é desnecessário.A regra de estilo a seguir marca os links externos colocando logo após o link uma seta inclinada no sentido nordeste. [Handy CSS]

a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
  content: "\2197";
  }

Para remover o pontilhado nos links use outline: none;. Artigo remove dotted links;

a:focus {
  outline: none;
  }

2.4. Dicas técnicas: Técnicas CSS

Especificar Id para a tag body. “Na maioria dos casos adicionar uma ID para a tag body permite que você escreva regras de estilo aplicáveis a elementos contidos em uma página específica. Assim, você pode organizar melhor as seções de estilos como também manipular regras CSS sem alterar o template das páginas.” [Ryan Parr, Invasion of Body Switchers]

Criar colunas de mesma altura com CSS. O artigo Equal Height Technique explica um método para simular colunas de mesma altura sem o uso de imagens de fundo. E. o artigo Faux Columns: explica com uso de imagens de fundo.

Alinhamento vertical com CSS. “Suponha um menu de navegação com altura igual a 2em. Solução: defina nas CSS a propriedade line height com o mesmo valor da altura do box. Neste exemplo o box tem uma altura de 2em então defina nas CSS line-height: 2em e o texto ficará verticalmente no meio do box!” [Evolt.org]

Use pseudo-elementos e classes para gerar conteúdo dinamicamente. Pseudoclasses and pseudo-elements. Pseudo classes e pseudo-elementos podem ser usados para formatar elementos que não constam da árvore do documento. Por exemplo: não existe um elemento para marcar a primeira linha de um parágrafo ou a primeira letra de um texto. Você pode usar :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after e outros.

Use <hr> estilizada para separar seus posts. “Estilizar com imagens o elemento de marcação régua horizontal (<hr>) pode se tornar um belo elemento separador no seu site. [CSS: Best Practices]

Use em todas as páginas o mesmo código (X)HTML para a navegação. “Muitos sites adotam a prática de destacar o link corrente para facilitar a orientação do usuário no site. Mas isto pode se tornar uma grande dor de cabeça pela necessidade de alterar o HTML da navegação em cada página do site.” [Ten More CSS Tricks you may not know]

XHTML:
  <ul>
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="sobre">Sobre</a></li>
  <li><a href="#" class="contato">Contato</a></li>
  </ul>

Declare uma ID para a tag <body>. O nome para a ID deve ser representativo da página e diferente para cada página.

CSS:
  #home .home, #sobre .sobre, #contato .contato
  {
  regras para destacar 
  }

Use margin: 0 auto; para centrar seu layout na horizontal. “para centrar em elemento na horizontal é necessário declarar uma largura e margens horizontais.” [Roger Johansson]

XHTML:
  <div id="wrap">
  <!-- Layout aqui -->
  </div>

CSS:
  #wrap {
  width:760px; /* Altere a largura do layout aqui */
  margin:0 auto;
  }

Você pode estilizar seu RSS-feeds. “Com uma folha de estilos XSL você pode fazer muita coisa (transformar links em links clicáveis, etc), mas com CSS você pode dar uma aspecto bem mais apresentável e não técnico ao seu RSS-feeds. [Pete Freitag]

<?xml version="1.0" ?>
  <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  ...

Você pode esconder CSS de navegadores antigos. “A maneira comum de esconder CSS de navegadores antigos é com uso da diretiva @import. [Roger Johansson]

@import "main.css";

Declare margin e padding sempre em elementos nível de bloco. [10 CSS Tips]

Declare largura OU margin e padding. “Minha regra de bolso é que se for declarada uma largura para um elemento eu não declaro margin ou padding. Ao contrário se eu declaro margin ou padding, não declaro largura. Manipular o box model pode se tornar uma dor de cabeça especialmente quando trabalhamos com percentagens. Assim, eu declaro larguras no container e margin e padding nos elementos que estão dentro dele. Assim, tudo funciona normalmente.” [Jonathan Snook]

Evite aplicar padding/borders e largura fixa a um elemento. “IE5 quebra o box-model estabelecendo uma confusão total. Existem metódos para corrigir isto, contudo é melhor evitar isto aplicando padding ao elemento pai do elemento que tenha que ter uma largura fixa.” [CSS Crib Sheet]

Forneça folha de estilo para impressão . “Você pode criar uma folha de estilo para impressão de modo semelhante a uma folha de estilo comum de apresentação da página:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

ou

<style type="text/css" media="print"> @import url(print.css); </style>


Isto assegura que as CSS serão aplicadas somente para imprimir o documento, sem afetar a apresentação da página na tela. Uma folha de estilo para impressão garante um fundo branco e um conteúdo textual em preto, além de excluir da impressão seções da página que não interessam em mídia impressa.. More about CSS-based print-Layouts. [20 pro tips]

2.5. Dicas técnicas: comportamentos do IE

Você pode forçar o IE a aplicar transparência PNGs. “Em tese, arquivos PNG suportam vários graus de transparência; contudo um bug do Internet Explorer 6 impede eles sejam empregados cross-browser.” [CSS Tips, Outer-Court.com]

#regular_logo
  {
  background:url('test.png'); width:150px; height:55px;
  }
  /* \ */
  * html #regular_logo
  {
  background:none;
  float:left;
  width:150px;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
  }
  /* */

Você pode declarar min-width e max-width para o IE. Use as expressões dinâmicas proprietárias da Microsoft’s para isto. [Ten More CSS Trick you may not know]

#container
  {
  min-width: 600px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
  }
 

Você pode usar Comentários Condicionais para servir o IE. “A maneira segura de servir o IE/Win é através do uso de comentários condicionais. É mais seguro para o futuro usar a tecnologia proprietária da Microsoft’s denominada comentários condicionais do que usar hacks CSS. Você pode usá-los para servir uma folha de estilos separada, somente para corrigir comportamentos do IE/Win. ” [Roger Johansson]

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

Esta matéria foi publicada em: 2007-05-29 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2007/05/29/70-dicas-para-escrever-css/trackback no seu site.