Formas abreviadas para optimizar CSS

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.

Compartir: