Antes que vocês venham me perguntar o porquê deste título, já vou explicar. Todos aqui sabem o que é reciclagem (pelo menos eu espero =D). De forma simples, reciclagem seria reutilizar o lixo e transformá-lo em coisa útil novamente.

É exatamente isso que tentarei mostrar para vocês através deste artigo. Ver o quanto vocês podem economizar no código. "Mas quais as vantagens de se fazer isso?" Simples, você escreve menos, o tamanho do seu código fica menor, com isso menos tráfego, código mais simples e compreensível, entre outras vantagens.

Vamos ver o código abaixo (Veja On-line):
#box {
width: 300px;
height: 200px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
background-color: #CCCCCC;
background-image: url(imgs/fundo.gif);
background-position: top left;
background-repeat: repeat-x;
background-attachment: fixed;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
font-family: Verdana;
font-size: 1.0em;
font-weight: bold;
}

Bom, este box mostra um div com 300px de largura e 200px de altura, com 5px de padding tanto na base, quanto no topo, esquerda e direita, cor de fundo cinza e com uma imagem fundo.gif de background que se repete somente na horizontal e fica fixa e possui bordas de 1px na cor preta, e uma fonte verdana com o tamanho 1.0em. Ufa...

Aí você me pergunta "Mas cadê a sujeira Bruno?" Eu não diria "sujeira", mas sim códigos desnecessários, que poderiam muito bem ser compactados. Quase todos os atributos utilizados possuem valores compostos, ou seja, podendo ser atribuídos mais valores e não somente um.

Padding e Margin

Vou falar primeiramente do padding e margin, que podem ser utilizados das seguintes formas:
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;

margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;

Ou simplesmente:
padding: 5px;
margin: 5px;

O resultado é exatamente o mesmo e é por isso que digo que é sujo, pois se podemos economizar, reciclar o código, por que então não fazer isso?

Quando implementamos o padding ou o margin com apenas um valor, ele atribui este valor à todos os lados, tanto esquerda, direita, topo e base, mas sempre com o mesmo valor. Mas também é possível com apenas uma linha, definirmos valores diferentes para todos os lados:
margin: 10px 7px 5px 6px;
padding: 10px 7px 5px 6px;

Com isso, temos 10px de margin e padding no topo, 7px na direita, 5px na base e 6px na esquerda. É sempre nesta seqüência (Topo, direita, base e esquerda). É só pensarmos no ponteiro do relógio, ele começa em cima, no 12(topo), e levando em conta o css, ele pula de "3 em 3 horas", indo para o 3(direita), depois para o 6(base) depois o 9(esquerda).

Temos outras implementações como veremos abaixo:
Dois valores:
margin: 10px 5px;

Com apenas dois valores, ele considera o primeiro o topo e a base, depois as laterais.

Três valores:
margin: 10px 5px 8px;

Com três valores, ele considera o primeiro valor o topo, o segundo as laterais e o terceiro a base. Isso vale também para o padding.

Background

Vamos agora para as linhas de background.

background-color: #CCCCCC;
background-image: url(imgs/fundo.gif);
background-position: top left;
background-repeat: repeat-x;
background-attachment: fixed;

Este código pode ser implementado com apenas uma linha:

background: #CCCCCC url(imgs/fundo.gif) repeat-x top left fixed;

Simples não? Não esquecendo, obviamente, de mudar o nome do atributo para apenas background, que engloba todas as suas variáveis. Lembrando que se você deixar somente um valor para o posicionamento do background, ele irá implementá-lo tanto para a horizontal, quanto para a vertical. Veja abaixo:
background: #CCCCCC url(imgs/fundo.gif) repeat-x center fixed;

Vimos que temos o center somente uma vez. Isso fará com que o background fique centralizado verticalmente e horizontalmente.

Bordas

Falaremos das bordas agora.

border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;

Funciona basicamente como o padding e o margin. O atributo border engloba tudo, portanto se temos todas as bordas iguais, por que não implementamos como a linha abaixo:

border: 1px solid #000000;

Podemos variar com essas implementações, como criar um input com somente uma linha na base. Vou mostrar dois exemplos de como se fazer isto:

border-bottom: 1px solid #000000;
border-left: 0;
border-right: 0;
border-top: 0;

Ou simplesmente:

border: 0;
border-bottom: 1px solid #000000;

A única diferença entre os dois, além da economia de código, é que agora o validador CSS acusa um warning quando você declara mais de uma vez o mesmo atributo. Na primeira linha temos border: 0, ou seja borda 0 para todos os lados, e na segunda temos uma linha chamando uma borda de 1px sólida e preta, duplicando a propriedade da borda da base. Bom, eu faço desta maneira, o warning não quer dizer que se código não é validado, somente um aviso lhe alertando da duplicidade de valores, mas cabe a cada um usar da maneira que achar melhor.

Fontes

Vamos agora para a font:

font-family: Verdana;
font-size: 1.0em;
font-weight: bold;

Respectivamente representa a fonte a ser utilizada, tamanho e o "peso" da fonte, que podemos representar estes atributos em uma linha somente:

font: bold 1.0em "Verdana";

Tem que ser sempre nesta ordem (peso + tamanho + fonte). O atributo font sempre tem mais prioridade em relação as suas variações. Exemplo:

font-weight: bold;
font: 1.0em "Verdana";

Na primeira linha declaramos peso bold para a fonte e embaixo, com o atributo font, declaramos somente o tamanho e a fonte, com isso ele descarta o bold, pois não foi implementado no atributo font, que é prioritário.

Resolução

No final, nosso primeiro código que possuía 18 linhas, fica com somente 6 linhas: (Clique para ver On-line)

#box {
width: 300px;
height: 200px;
border: 1px solid #000000;
padding: 5px;
background: #CCCCCC url(imgs/fundo.gif) repeat-x top left fixed;
font: bold 1.0em "Verdana";
}

Bem econômico, não acham?

Múltiplas declarações

Um jeito de economizer códigos seria referenciar mais de uma tag ou div em uma mesma lista de atributos. Vejamos abaixo: (Clique para ver On-line)

#primeiroBox {
width: 150px;
height: 200px;
background: #CCCCCC;
float: left;
text-align: left;
padding: 5px;
}

#segundoBox {
width: 150px;
height: 200px;
background: #CCCCCC;
float: right;
text-align: left;
padding: 5px;
}

#conteudo { margin-left: 150px; }

No código acima, temos um div na esquerda, que é o primeiroBox, que recebe o float: left, ficando por isso, colado na esquerda e temos o segundoBox recebendo o float: right, fazendo com que fique grudado na direita.

Vocês podem perceber que está é a única diferença entre eles, o float. Então por que repetir o código todo de novo, se podemos deixá-lo padrão para os dois? (Clique para ver On-line)

#primeiroBox, #segundoBox {
width: 150px;
height: 200px;
background: #CCCCCC;
float: left;
text-align: left;
padding: 5px;
}

#segundoBox { float: right; }

#conteudo { margin-left: 150px; }

Neste exemplo, temos a linha ( #primeiroBox, #segundoBox { ), fazendo com que os dois identificadores recebam os atributos declarados. Para quem não sabia desta, vale anotar. Você pode referenciar quantas tags, classes e identificadores quiser, só precisando separar com vírgulas os elementos.

E neste exemplo, os dois identificadores recebem todos os atributos, incluindo o float: left, mas como depois o segundoBox recebe o float: right, ele descarta a primeira, sobrescrevendo a propriedade. Se fosse ao contrário não daria certo, pois o float: left viria depois e sobrescreveria o right postado.

Inputs

Falarei agora sobre classes em inputs tipo texto. Vamos ver o exemplo do código xtml abaixo, depois comentarei sobre ele: (Clique para ver On-line)

<form action="" method="post">
Nome: <input type="text" name="nome" class="txt_nome" title="Escreva aqui seu nome | Tecla de atalho ALT + N" accesskey="n" /><br />
Email: <input type="text" name="email" class="txt_email" title="Escreva aqui seu email | Tecla de atalho ALT + E" accesskey="e" /><br />
Idade: <input type="text" name=" idade" class="txt_idade" title="Escreva aqui sua idade | Tecla de atalho ALT + I" accesskey="i" /><br />
</form>

Pelo que podemos ver, são três campos dentro de um formulário, nome, email e idade. Temos alguns atributos que talvez muitos não conheçam, o title e o accesskey. Servem para ao passar o mouse aparecer uma descrição do elemento e uma tecla de acesso, respectivamente. São atributos para melhorar a acessibilidade, usabilidade, mas não vou me aprofundar nesse assunto, pois sairei um pouco do foco. Mais pra frente, de repente, faço um artigo sobre.

Mas o atributo que estarei comentando agora é o class. Cada campo tem um valor, uma classe diferente: nome = txt_nome, email = txt_email e idade = txt_idade. Agora vamos ver o css das classes:

.txt_nome {
width: 150px;
background: #FFFF99;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

.txt_email {
width: 150px;
background: #FFFF99;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

.txt_idade {
width: 150px;
background: #FFFF99;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

Pronto. Temos os três campos estilizados, iguais. Mas agora o cliente pede para você mudar o fundo para vermelho claro. E o que você faz? Muda cada um dos códigos. Que beleza não? Imagina um formulário com 30 campos, você mudando as 30 classes de cada campo? Haja saco. Pronto.

Bom, além do trabalho imenso que você terá para fazer, eu pergunto "Não têm código demais nisso não?". Claro que sim. O css aplica os efeitos em múltiplas tags, id’s e class’s ao mesmo tempo, é só separá-los por vírgula, como falei mais acima. Vejamos abaixo:

.txt_nome, .txt_email, .txt_idade {
width: 150px;
background: #FFFF99;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

Muito melhor não acham? Mas ainda não acabou, ainda temos um problema. Nosso formulário tem apenas três campos, mas se ele conter 30, como havia falado antes? Vamos ter que ficar escrevendo todos os campos, separando-os por vírgula. Chato demais também.

Temos um método em melhor e econômico, tanto de código, quanto de trabalho. Veja abaixo: (Clique para ver On-line)

.textbox {
width: 150px;
background: #FFFF99;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

<form action="" method="post">
Nome: <input type="text" name="nome" class="textbox" title="Escreva aqui seu nome | Tecla de atalho ALT + N" accesskey="n" /><br />
Email: <input type="text" name="email" class="textbox" title="Escreva aqui seu email | Tecla de atalho ALT + E" accesskey="e" /><br />
Idade: <input type="text" name="idade" class="textbox" title="Escreva aqui sua idade | Tecla de atalho ALT + I" accesskey="i" /><br />
</form>

Perceberam a diferença? Os inputs agora só recebem no atributo class o valor textbox e no css temos apenas uma classe, com o mesmo nome. Agora quando modificarmos qualquer valor de estilo no css, todos os css’s serão modificados. Bem mais fácil certo?

Mas agora você me pergunta "Mas se eu quiser um campo somente diferente de todos?". Simples, é só você adicionar uma classe a mais e setar no class do input respectivo. Mas cuidado, não vá fazer como muitos fazem, veja abaixo: (Clique para ver On-line)

.textbox {
width: 150px;
background: #FFFF99;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

.textbox_cidade {
width: 150px;
background: #FFCC33;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

<form action="" method="post">
Nome: <input type="text" name="nome" class="textbox" title="Escreva aqui seu nome | Tecla de atalho ALT + N" accesskey="n" /><br />
Email: <input type="text" name="email" class="textbox" title="Escreva aqui seu email | Tecla de atalho ALT + E" accesskey="e" /><br />
Idade: <input type="text" name="idade" class="textbox" title="Escreva aqui sua idade | Tecla de atalho ALT + I" accesskey="i" /><br />
Cidade: <input type="text" name="cidade" class="textbox_cidade" title="Escreva aqui sua cidade | Tecla de atalho ALT + C" accesskey="c" /><br />
</form>

Assim temos o campo cidade, mas com a classe textbox_cidade, com um amarelo mais escuro como background. Mas como vimos nos exemplos lá em cima, acabamos de duplicar a classe desnecessariamente. É só nós utilizarmos a técnica de setar múltiplas classes numa declaração só, como vimos logo acima. Depois disso, nós criamos a classe para o campo cidade, mas SOMENTE com o conteúdo necessário, que será diferente dos outros textoboxes, que neste caso é só o background. Vejamos abaixo: (Clique para ver On-line)

.textbox, .textbox_cidade {
width: 150px;
background: #FFFF99;
color: #666666;
padding: 2px 4px;
font: bold 1.0em "Verdana";
border: 1px solid #777777;
}

.textbox_cidade { background: #FFCC33; }

<form action="" method="post">
Nome: <input type="text" name="nome" class="textbox" title="Escreva aqui seu nome | Tecla de atalho ALT + N" accesskey="n" /><br />
Email: <input type="text" name="email" class="textbox" title="Escreva aqui seu email | Tecla de atalho ALT + E" accesskey="e" /><br />
Idade: <input type="text" name="idade" class="textbox" title="Escreva aqui sua idade | Tecla de atalho ALT + I" accesskey="i" /><br />
Cidade: <input type="text" name="cidade" class="textbox_cidade" title="Escreva aqui sua cidade | Tecla de atalho ALT + C" accesskey="c" /><br />
</form>

Agora sim. Na primeira declaração setamos o textbox e o textbox_cidade com os valores e a segunda declaração é somente para a classe textbox_cidade, que re-escreve o atributo background. E como no css o que vale é o último valor, então ele acaba preenchendo o input com o amarelo escuro.

Hacks

Podemos utilizar as técnicas citadas acima com hacks também. Já vi muito pela internet, sites com hacks, às vezes é impossível conseguir resultado sem eles. E se esse for seu caso, você terá de escolher o hack que quer utilizar e escrever no css. Vejamos um exemplo abaixo: (Clique para ver On-line)

#menu {
width: 200px;
padding: 5px;
border: 1px solid #000000;
background: #CCCCCC;
text-align: left;
}

html>body #menu {
width: 188px;
padding: 5px;
border: 1px solid #000000;
background: #CCCCCC;
text-align: left;
}

Com esse código, temos um id menu que recebe os atributos e valores especificados acima e depois vemos um hack para todos os browsers, exceto o i.e. Ele tem todos os atributos anteriores, mas com mudança no width.

Aparentemente tudo normal, nenhum problema aparente, somente na poluição e excesso de código no css. Aí você me pergunta "Mas por quê?" Simples, me deixa dar uma breve explicação do funcionamento dos hacks:

No primeiro bloco não temos nada de anormal, todo mundo já sabe, temos um id com 200px de largura, padding de 5px em todos os lados, com uma borda preta sólida de 1px, cor de fundo cinza e texto alinhado à esquerda. E no segundo, temos na primeira linha uma chamada pro hack e a repetição quase total dos atributos, a não ser do width. Até aí tudo bem. Mas o hack não precisa conter todo o conteúdo novamente, porque no bloco anterior você já setou todos os valores, portanto você só precisaria somente setar o valor que for mudado, nesse caso o width. Isso porque no anterior temos a setagem padrão, normal, que todos os browsers funcionam, por isso não é necessário repetir o mesmo código, pois ele foi implementado anteriormente.

Seria como, mais ou menos assim, os browsers renderizam o primeiro bloco + o segundo bloco. E caso o segundo bloco tenha algum componente que o primeiro possua, ele descarta do primeiro bloco. Portanto se no segundo se repete quase tudo igual, é completamente desnecessário, pois já foi setado no primeiro bloco.

Então, "reciclando" nosso código, temos a seguir: (Clique para ver On-line)

#menu {
width: 200px;
padding: 5px;
border: 1px solid #000000;
background: #CCCCCC;
text-align: left;
}

html>body #menu { width: 188px; }

É a mesma coisa, e usando nossa fórmula, teríamos: Primeiro bloco + Segundo bloco

Como no segundo bloco só temos o width e, como havia dito, que se tiver algum atributo repetido do primeiro, ele descarta o width do primeiro.

Lembrando que isso vale para qualquer atributo no CSS.

Bom, vou chegando ao fim de mais um artigo. Espero ter ajudado vocês e a ter esclarecido alguns detalhes do css, de alguns códigos que alguns desenvolvedores não conheciam, detalhes que são simples e extremamente úteis.

Até a próxima e, quem quiser, pode mandar sugestões para os próximos artigos, críticas, correções em algumas partes, modificações, entre outros.

Aquele abraço.