Podem-se agrupar os selectores no caso de terem a mesma declaração (que é o conjunto de propriedade mais o valor):

1. p, body { background-color: #000000; color: #ffffff; font-family: arial, verdana, tahoma, sans-serif; }

Mas não convém cair no erro, de ao utilizar IDs ou classes de te esqueceres de voltar a colocar o ID ou a class, por exemplo:

1. #sidebar h1, #sidebar h2 { background-color: #000000; color: #ffffff; font-family: arial, verdana, tahoma, sans-serif; }

Não pode ficar apenas #sidebar h1, h2 tem de se definir o ID novamente. A não ser que seja mesmo o h2 geral, sem estar num ID que queiramos definir.

Agrupar propriedades e valores

Para uma melhor organização do ficheiro .css e para mininização do tamanho do mesmo (tanto em extensão como peso), podemos agrupar várias propriedades e valores num só. Exemplos:

1. p {
2. margin-left: 5px;
3. margin-right: 10px;
4. margin-top: 15px;
5. margin-bottom: 2px;
6. }

Podemos agrupar em:

1. p {
2. margin: 15px 10px 2px 5px;
3. }

A ordem é: [top] [right] [bottom] [left]

Se tiveres valores iguais como:

1. p {
2. margin: 2px 5px 2px 5px;
3. }

Pode ficar apenas:

1. p {
2. margin: 2px 5px;
3. }

E ele vai aplicar o [top] e [bottom] como 2px e o [right] e [left] com 5px.

E se forem todos iguais basta uma vez:

1. p {
2. margin: 10px;
3. }

Aplicará 10px a todas as margens.

Outras formas:

1. body {
2. background-color: #000000;
3. background-image: url(imagem.jpg);
4. background-repeat: repeat-y;
5. background-attachment: scroll;
6. }

Agrupar em:

1. body {
2. background: #000000 url(imagem.jpg) repeat-y scroll;
3. }

Ou com tipos de letras:

Outras formas:

1. body {
2. font-family: arial, verdana, tahoma, sans-serif;
3. font-weight: bold;
4. font-variant: upper-caps;
5. font-size: 12px;
6. font-style: italic;
7. }

Agrupar em:

1. body {
2. font: italic upper-caps bold 12px arial, verdana, tahoms, sans-serif;
3. }

Este post foi escrito em Sunday, February 18th, 2007 às 5:05 pm e encontra-se na categoria CSS. Podes seguir qualquer comentário a esta entrada a partir dos RSS 2.0 feed. Podes deixar um comentário, ou trackback do teu próprio site.