4 de novembro de 2009

CSS Tutorial - Agrupando seletores, otimizando o CSS

Muitas vezes o código css fica longo e até difícil de achar aquela propriedade em determinado seletor, podemos deixar o CSS menor e consequentemente aumentar a velocidade do carregamento da página usando uma simples técnica de agrupamento de seletores.

Vamos usar como exemplo esse código CSS:

#numero1{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

#numero2{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

#numero3{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

Já que as propriedades são as mesmas para todos os seletores, vamos dar uma comprimida nesse código, usando a "," para agrupar os seletores:

#numero1, #numero2, #numero3{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

Viu só, três vezes menor.

Não só seletores do tipo id podem ser agrupados, podemos agrupar outros tipos:

b, #numero2, .numero3{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}


Enjoy !

2 comentários: