Buscando información acerca de un problema con hojas de estilo he encontrado un artículo que creo muy interesante y paso a traducir.
____________________________________________________________________
una de las virtudes del uso de css es la reducción del tiempo de descarga de las páginas. Este tiempo también se puede optimizar usando abreviaciones en las hojas de estilo. Más que abreviaciones podríamos decir compactando varias declaraciones en una.
Font
Usar:
font: 1em/1.5em bold italic serif
…en lugar de
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
Esta compactación de la propiedad únicamente funciona si se especifica el font-size y el font-family. Si se eliminan la entrada se ignorará. El resto de propiedades si no se especifican se tomarán los valores que tengan por defecto.
Background
Usar:
background: #fff url(image.gif) no-repeat left top
…en lugar de
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Si no se especifica alguno de estos atributos, este tomará el valor por defecto. Si no se especifica el background-position, la imagen de fondo se tomarán los valores left top por defecto y si no se indica la conducta de repetición se repetirá la imagen horizontal y verticalmente.
Lists
Usar:
list-style: disc outside url(image.gif)
…en lugar de
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
Se puede omitir cualquiera de las declaraciones y tomarán el valor por defecto.
Margin & padding
Hay diferentes maneras de compactar estas lineas, en función de los lados con valores en común de la clase.
4 valores diferentes:
Usar:
margin: 2px 1px 3px 4px (top, right, bottom, left)
…en lugar de
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
3 valores diferentes:
Usar:
margin: 5em 1em 3em (top, right y left, bottom)
…en lugar de
margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em
2 valores diferentes:
Usar:
margin: 5% 1% (top and bottom, right y left)
…en lugar de
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;
Un único valor:
Usar:
margin: 0 (top, bottom, right and left)
…en lugar de
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
Border
Usar:
border: 1px black solid
…en lugar de
border-width: 1px;
border-color: black;
border-style: solid;
Usar:
border-right: 1px black solid
…en lugar de
border-right-width: 1px;
border-right-color: black;
border-right-style: solid;
(se puede substituir right por top, bottom o left)
Estas entradas se pueden combiar con las reglas usadas por margin y padding, de manera que podemos tener una entrada del tipo:
border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf;
en lugar de:
border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf;
____________________________________________________________________
Aquí acaba el artículo, y lo único que agregaría al respecto es la posibilidad de abreviar los colores , de lo que se ve algunos ejemplos en el texto anterior.
Cuando tenemos un color del tipo #FE934B, lo que estamos indicando son las cantidades de rojo, verde y azul del color con valores en hexadecimal de manera que Rojo: #FE, verde: #93, azul: #4B.
Podemos encontrar muy frecuentemente el caso de colores del tipo #FFAA88 en los que rojo: #FF verde: #AA y azul: #88. Para estos casos se puede escribir: #FA8.
Ahora no se me ocurre ningún ejemplo más.