Optimización de los archivos CSS

Los archivos CSS pueden aumentar la carga de una página, sobre todo si tenemos en cuenta que algunos archivos pueden contar con varios miles de líneas.

En un template de Joomla o Wordpress, los archivos CSS pueden ser varios, y algunos de ellos pueden llegar a tener un tamaño importante, a lo que posteriormente debemos sumar el peso del resto de los archivos y las imágenes.

Por esta razón, es imprescindible que se tomen medidas para optimizar el tamaño de los archivos CSS, tema en el que nos adentraremos a continuación.

Utilización del código CSS abreviado

Lo primero que debemos saber es que existen dentro del estándar de la W3C, la posibilidad de utilizar formas abreviadas del código CSS, que son aceptadas por todos los navegadores. Esto significa que podemos utilizarlas sin temor a que tengamos problemas con los navegadores o con la validación del CSS.

Veamos algunos ejemplos.

Código abreviado para fondos

Para establecer las características del fondo de un elemento, se emplean varias propiedades que determinan cada una de estas características.

Por ejemplo, la propiedad “background-image” se emplea para determinar cual será la imagen que el elemento tendrá como fondo. En algunas ocasiones, se puede llegar a tener que completar un código similar al siguiente para determinar todas las características del fondo:

#capa {
  background-color: #666666;
  background-image: url(imagenes/fondo.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 25px 50px;
  }

Sin embargo, todas estas propiedades pueden resumirse en una única propiedad, llamada “background”, y en la que se puede determinar varias propiedades a la vez.

Ten en cuenta a la hora de hacer el código, que el orden que se establece en el código anterior es el mismo que se debe seguir para incluirse en la propiedad resumida.

De esta forma, para resumir el código anterior, podremos hacerlo en una única línea, así:

#capa {
  background:#666 url(imagenes/fondo.jpg) no-repeat fixed 25px 50px;
  }

En caso de que no se incluya alguno de los valores, el navegador aplicará el valor por defecto de la propiedad faltante.

Código abreviado para fuentes

Para los textos en una web, las propiedades que determinan sus características (con valores de ejemplo) son las siguientes:

#capa {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.5;
  font-family: Verdana, Arial, Helvetica;
  }

Lo que puede resumirse también en una única línea de código como puede verse a continuación:

#capa {
  font:italic small-caps bold 12px/1.5 Verdana, Arial, Helvetica;
  }

Código abreviado para listas

La propiedad “list-style” determina la forma en que se verá el estilo de las listas. Solo contiene tres propiedades subordinadas, como veremos en el siguiente código que no ha sido abreviado:

#lista {
  list-style-type: circle;
  list-style-position: inside;
  list-style-image: url(imagenes/boton.gif);
  }

Y el código abreviado resultante es:

#lista {
  list-style:circle inside url(imagenes/boton.gif);
  }

Código abreviado para márgenes y rellenos

El caso de la abreviación de los códigos CSS para márgenes y rellenos es un poco más complejo que los anteriores, por lo que junto con los bordes los hemos dejado para el final.

En este apartado trataremos márgenes (margin) y rellenos (padding), ya que el tratamiento es el mismo. Daremos los ejemplos utilizando la propiedad “margin”, pero podrán utilizar el mismo principio para el relleno de los elementos.

Para comenzar, debemos tener en cuenta que se pueden determinar por separado los cuatro márgenes y rellenos de cualquier elemento, mediante la aplicación de propiedades separadas: margin-top, margin-right, margin-bottom y margin-left (en ese orden; para facilitar su identificación, puede decirse que siempre se empieza por arriba y se va en el sentido de las agujas del reloj: top, right, bottom, left).

Existe la posibilidad de utilizar cuatro formas de abreviar márgenes y rellenos, dependiendo la forma a utilizarse de las medidas repetidas que se encuentren en el código.

Para que pueda comprenderse mejor, a continuación mostraremos los dos ejemplos, el primero del método extendido y el segundo empleando el método abreviado. El ejemplo está hecho con margin, pero funciona exactamente igual con padding:

#capa-uno {
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 15px;
  }
  
#capa-uno-abreviada {
  margin: 0 5px 10px 15px;
  }

#capa-dos {
  margin-top: 0;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
  }
  
#capa-dos-abreviada {
  margin: 0 15px 10px;
  }

#capa-tres {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
  }
  
#capa-tres-abreviada {
  margin: 10px 15px;
  }

#capa-cuatro {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  }
 
#capa-cuatro-abreviada {
  margin: 10px;
  }

En el caso de que se tengan todas las dimensiones de margen y relleno diferentes, podemos ver la forma en que se produce la abreviación siguiendo en ambos códigos lo descrito para la capa llamada “capa-uno”.

Puede darse el caso en que las dimensiones de márgenes o rellenos superior e inferior sean diferentes, mientras que las dimensiones de derecha e izquierda son iguales. En este caso, como puede verse, se emplea solo tres dimensiones en la forma abreviada, siendo la primera para el margen o relleno superior, la segunda para derecha e izquierda a la vez, y la tercera para margen o relleno inferior.

En el tercer caso, las dimensiones superior e inferior son iguales y lo mismo sucede con las dimensiones de la derecha e izquierda. En la forma abreviada se utilizan dos dimensiones, siendo la primera para margen o relleno superior e inferior a la vez, mientras que la segunda corresponde a la izquierda y derecha a la vez.

El cuarto caso es el más simple de todos, ya que todas las dimensiones son iguales, por lo que solo se coloca un valor, el cual el navegador interpretará que corresponderá a los cuatro márgenes o rellenos.

Abreviación del código en los bordes

La propiedad que determina los bordes de un elemento (border), es un poco más compleja, porque resulta de la síntesis de los cuatro bordes posibles del elemento, es decir, superior, derecho, inferior e izquierdo; pero además, sirve para determinar el color, estilo y grosor de los mismos, tanto en forma independiente como de todos los bordes a la vez.

Así que en realidad se trata de varias propiedades resumidas, que son las siguientes:

#elemento {
  border-top-color: black;
  border-top-style: dashed;
  border-right-width: 2px;
  border-right-color: white;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: blue;
  border-bottom-style: dotted;
  border-left-width: 3px;
  border-left-color: red;
  border-left-style: solid;
  border-left-width: 5px;
  }

En el ejemplo que presentamos, vemos que se trata de un elemento que tiene todos los bordes diferentes. En este caso, al igual que en ejemplos que hemos dado anteriormente, todas las propiedades de borde de un mismo elemento pueden resumirse en una sola.

El orden en que se colocan los valores dentro de la propiedad no afecta la visualización, sin embargo, existe una forma correcta de colocar estos valores: grosor, estilo y color. Veamos como se debe hacer, siguiendo el ejemplo siguiente:

#elemento {
  border-top: 2px dashed black;
  border-right: 1px solid white;
  border-bottom: 3px dotted blue;
  border-left: 5px solid red;
  }

Al igual que en los casos anteriores, en caso de que uno de los valores no sea incluido, el valor que asume la propiedad simple faltante es el que dicha propiedad tiene por defecto. Si en el ejemplo anterior no se hubiera determinado el color de los bordes, éstos aparecerían de color negro, que es el valor por defecto. Los valores por defecto de la propiedad border son “medium” para el grosor, “none” para el estilo, y negro para el color. En caso de que se determine el grosor y el color de un borde, pero no su estilo, no aparecerá borde alguno.

Tal como dijimos, en caso de que todos los bordes de un elemento sean iguales, puede acortarse aún más el código, ya que además de poder resumir todas las propiedades de cada borde, se puede establecer los valores de todos los bordes en una única propiedad, “border”. A continuación mostramos un ejemplo de código abreviado:

#elemento {
  border: 1px solid #f60;
  }

En este ejemplo vemos que se han resumido todos los bordes en una sola propiedad, y que además, contiene todos los valores correspondientes al ancho, color y estilo de todos. Si utilizáramos la forma extendida de desarrollar el código, lo que está ocupado en una sola línea deberíamos hacerlo en doce.

Agrupar selectores con propiedades iguales

Es frecuente que algunos elementos tengan propiedades iguales, por lo que parece una pérdida de tiempo y un peso innecesario para el archivo, repetir las mismas propiedades y sus valores en varios selectores.

Veamos el ejemplo siguiente:

h1  {
  font-family: Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  font-size: 30px;
  color: #06f;
  }
  
h2  {
  font-family: Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  font-size: 26px;
  color: #06f;
  }
  
h3  {
  font-family: Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  font-size: 22px;
  color: #06f;
  }
  
h4  {
  font-family: Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  font-size: 18px;
  color: #06f;
  }

Como puede verse, los cuatro títulos del ejemplo tienen propiedades que son iguales y otras que son diferentes. La forma de simplificar este código es la siguiente:

h1, h2, h3, h4 {
  font: bold 30px Arial, Helvetica, Sans-Serif;
  color: #06f;
  }

h2  {
  font-size: 26px;
  }
  
h3  {
  font-size: 22px;
  }
  
h4  {
  font-size: 18px;
  }

Como cuando se colocan dos propiedades de un mismo elemento dentro de un código, el que resultará “ganador” en el conflicto será el que se encuentra más abajo en el código.

Esto quiere decir que, aunque se haya establecido un tamaño de fuente al inicio del código de ejemplo para las cuatro etiquetas, los valores indicados más abajo serán los que serán válidos. Como puede apreciarse, la etiqueta h1 tiene todas sus propiedades determinadas en las primeras líneas, mientras que las demás etiquetas tienen su tamaño modificado en líneas posteriores.

Utilizar correctamente la herencia

Otra forma de disminuir la cantidad de líneas utilizadas para el desarrollo de las hojas de estilo, es la utilización correcta de la herencia, una de las características más notables del CSS, y una de las peor utilizadas.

Utilizar la herencia puede hacer que no sea necesario que se determinen muchas propiedades de elementos que son hijos de otros que ya tienen sus propiedades con los valores correspondientes determinados. Veamos un ejemplo:

body  {
  color: #333;
  }
  
p  {
  color: #333;
  }

En primer lugar hemos determinado que todos los elementos contenidos dentro de “body” tendrán color “#333”. Luego determinamos que los elementos “p” (párrafos) también tendrán color “#333”. Esto, simplemente se trata de una redundancia, ya que cualquier párrafo estará contenido dentro de “body”, por lo que si no se determina su color, simplemente tomará el valor del elemento padre, que en este caso es la etiqueta “body”.

En el ejemplo anterior, no es necesario determinar el color de los párrafos, ya que se encuentra determinado por el elemento padre “body”.