Reducir nuestra hoja de estilos CSS

Una hoja de estilos puede empezar a alcanzar un tamaño considerable cuando estamos trabajando en una interfaz muy completa. Hay algunos recursos que podemos utilizar para hacer nuestro css algo más resumido.

Resumir algunos atributos:

LARGO:
#menu {
background-color:#889900;
background-image:url(menu.jpg);
background-position:top;
background-repeat:repeat-x;
border-color:#000000
border-style:dashed;
font-family:Arial;
font-size:12px;
float:left;
}
RESUMIDO:
#menu {
background:#889900 url(menu.jpg) top repeat-x;
border:#000000 1px dashed;
font:12px Arial;
}


Agrupar por comas:

LARGO:
#bg1 {
width:150px;
height:80px;
border:#454545 1px solid;
color:#222222;
}
#bg2 {
width:150px;
height:80px;
border:#454545 1px solid;
color:#333333;
}
#bg3 {
width:150px;
height:80px;
border:#454545 1px solid;
color:#FF9900;
}

RESUMIDO:
#bg1, #bg2, #bg3 {
width:150px;
height:80px;
border:#454545 1px solid;
}
#bg1 {color:#222;}
#bg2 {color:#333;}
#bg3 {color:#F90;}


Coincide la etiqueta sin importar la clase:

LARGO:
li.headmenu {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
}
li.menuizq {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
float:left;
}
li.menuder {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
float:right;
}

RESUMIDO:
li {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
}
li.menuizq {
float:left;
}
li.menuder {
float:rigth;
}