CSS permite escribir las reglas de forma abreviada lo cual repercute principalmente en dos beneficios:
- Optimización: La escritura abreviada hace que nos ahorremos muchas líneas de código CSS y esto se traduce en menos bytes a descargar por parte del navegador que accede al sitio web.
- Legibilidad: Un código con reglas de CSS abreviadas es inmensamente más legible y fácil de mantener.
Como ejemplo podemos encontrar la siguiente linea de estilo incrustada en el código XHTML de la «famosa» y criticada web del congreso de los diputados.
<td valign="top" style="padding:0px 0px 0px 0px;" width="100%">
Podemos indicar el estilo del padding de varias formas:
padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;
padding: 0px 0px 0px 0px;
padding: 0px 0px 0px;
padding: 0px 0px;
padding: 0px;
- La primera de las formas no se encuentra abreviada sino que especifica cada propiedad y cada valor.
- La segunda forma es abreviada y presenta el valor de la propiedad top, right, button, left (en este mismo orden).
Un truco para acordarse del orden es pensar en la dirección de las agujas del reloj y sus concordancias con los 4 puntos principales: empunto (top), y cuarto (right) y media (bottom) y menos cuarto (left)
- La tercera de las formas incide en el valor de la propiedad top, right y button. Para left tomará el mismo valor que right puesto que concuerdan en orden.
- La cuarta forma expresa en el primer dato el valor para top y bottom y en el segundo para right y left.
- La quinta forma aplica el valor a todas las propiedades: top, right, bottom y left.
Vemos que en la web del congreso se ha optado por la segunda opción (visto todo el código de la página es raro que no escogieran la primera).
padding: 0px 0px 0px 0px;No obstante esto podría estar más abreviado y en consecuencia mejor de la siguiente forma:
padding: 0px;
Esta es la forma más idónea pero todavía se puede hacer algo mejor…
El valor cero no tiene medida implícita. ¿Para que especificar una medida como ‘px’, ‘em’, etc a un valor que no vale nada?.
Por tanto la opción mas optima sería:
padding: 0;Todas las reglas de CSS que disponen de varias propiedades (padres/hijos) tienen sus correspondientes en formas abreviadas.
Otro ejemplo, en este caso para definir el estilo de la etiqueta strong.
Forma no abreviada:
strong {
font-family: Verdana, Arial;
font-style: italic;
font-weight: 700;
font-size: 1em
}
Forma abreviada:
strong { font: italic 700 1em Verdana, Arial; }Por último cabe mencionar como también existen ciertos VALORES que mejoran en la optimización general de nuestras hojas de estilo.
Peor:
strong { font-weight: bold; }Mejor:
strong { font-weight: 700; }¿La razón? Obviamente el navegador que procesa el CSS entiende de forma más rápida el valor 700 que la «variable» textual bold que es su equivalente y por lo tanto le estamos ahorrando esta conversión.
