Seções iMasters
CSS + Web Standards

Reciclando seu CSS

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.

Comente também

11 Comentários

Renan Gomes Fogaça

Ficou bem legal, cara
Eu tb acostumei a fazer desse jeito, o unico q eu tinha dificuldade era em agrupar os atributos de fonte, mas pelo q vc falou tem q respeitar a ordem, vou fazer um teste…
valeuuu!

Tiago Fernandes

Foi ótimo este artigo, só acrescentaria + uma simplificação do css que eh p/ definição d cor:
seo código da cor for algo do tipo #XXYYZZ pode ser simplificado para: #XYZ

[]’ss

Alessandra Carla

Bruno legal está matéria parabens

Filipe Torres

No atributo border você escreveu um exemplo em que só a borda inferior tinha atributos:
border: 0;
border-bottom: 1px solid #000000;

Por padrão, o box não tem borda. Assim, só é necessário colocar o atributo border-bottom: 1px solid #000000; para obter o mesmo efeito.

Bruno

Valew ae galera, obrigado pelos elogios e observações.

Bem lembrado André, acabou passando desapercebido essa parte de cores, valew ;)

Fala Filipe, é verdade, o padrão é sem bordas sim, levei somente como um exemplo para o atributo border, brigadão.

Igor Balero

Achei muito bom esse esquema de hacks, não conhecia, estou sofrendo com o último site que fiz (antes de conhecer o FireFox) porque fiz ele só na <div> e acabou que está quebrando muito o layout – no FireFox -, concertei aqui e ali, mas ainda estou apanhando para acertar tudo. Será que você não poderia mandar no próximo artigo mais dicas de compatibilidade? O que pode e todos, o que só no IE, o que só nos Outros, etc. Tipo diferenças Básicas!

Valeu, curti mesmo o Artigo,
Abraço

Julio Marques

Óima Matéria,
mas eu notei que você economizou em algumas tags que a W3C não recomenda fazer.
Ex: background: #CCCCCC; ou font: 1.0em “Verdana”;

Esse tipo de economia não é recomendado pela W3C, o certo seria escrever “background-color: #CCCCCC;” e ” font: normal 1.0em “Verdana”;” e isso é valido para muitas outras tags.

Qualquer dúvida pode ser tirada no validador de CSS da W3C.

http://jigsaw.w3.org/css-validator/

Abraço.

Thiago Lima

Foi muito esclarecedor para mim. Eu sempre me perco em meus proprios codigos. Mas fazendo desse jeito fica melhor. Vlw Bruno.

Rodrigo Luiz Genz

Opa, sinceramente um dos melhores artigos que li na imasters até agora sendo que já falaram da citação que iria falar .. sobre a reciclagem dos valores das cores
ex: #CCCCCC por #CCC
e outro ponto citado pelo julio .. sobre a regra de validação da w3c é um ótimo uso a reciclagem mas porém é válido também fazer o uso de validação correto
abraços agradeço novamente ao seu ótimo artigo

Web Designer Demétrios Martins

Eu já costumo criar css otimizado, enxuto como você citou na matéria, mas nunca é demais ler e também ter a certeza de que o que você faz esta correto e sendo feito pelos grande desenvolvedores.

Meu site: http://www.mdesigner.com.br

Diego Dutra

Poxa adorei o site.
Vou iniciar em breve minhas aulas no Curso Adv.
Mas já sei onde poderei achar dicas para me aprimorar.
Parabéns

Qual a sua opinião?