comparte el articulo 

Optimización de los archivos CSS – Segunda parte

Actualizado el 09/11/2012 < > 0 Comentarios

Resumen: Segunda parte de cómo optimizar los archivos CSS para que pesen menos y no retarden la carga de la página.

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. Es posible abreviar sensiblemente el código CSS de una página web agrupando selectores con propiedades iguales. 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 quiere decir que es posible que en muchos casos pueda dejarse de lado la determinación de algunas propiedades de elementos, siempre y cuando ya haya sido determinado en un elemento ascendente (padre). En el ejemplo anterior, no es necesario determinar el color de los párrafos, ya que se encuentra determinado por el elemento padre “body”.

Utilizar la menor cantidad posible de selectores y clases

Un error frecuente entre quienes se inician en el estudio de las hojas de estilo en cascada, es la exageración en la cantidad de clases e identificadores utilizados. Veamos un ejemplo:

<div id="capa">
  <p id="parrafo">Un párrafo.</p>
  <ul id="lista">
    <li class="item">Ítem</li>
    <li class="item">Ítem</li>
    <li class="item">Ítem</li>
  </ul>
</div>
#capa {
  width: 100%;
  border: 1px solid #ccc;
  background: #ddd;
  }
  
#parrafo  {
  text-indent: 20px;
  font: normal 12px arial, helvetica, sans-serif;
  color: #f90;
  }
  
#lista  {
  list-style: none;
  }
  
#item {
  display: block;
  padding: 10px 15px;
  line-height: 20px;
  }

Esta proliferación de identificadores puede simplificarse empleando solo el nombre del elemento padre, y determinando posteriormente la etiqueta, quedando el código de la siguiente forma:

<div id="capa">
  <p>Un párrafo.</p>
  <ul>
    <li>Ítem</li>
    <li>Ítem</li>
    <li>Ítem</li>
  </ul>
</div>
#capa {
  width: 100%;
  border: 1px solid #ccc;
  background: #ddd;
  }
  
#capa p  {
  text-indent: 20px;
  font: normal 12px arial, helvetica, sans-serif;
  color: #f90;
  }
  
#capa ul  {
  list-style: none;
  }
  
#capa ul li {
  display: block;
  padding: 10px 15px;
  line-height: 20px;
  }

Solo es necesario utilizar un identificador o clase nuevo cuando hay varios elementos del mismo tipo con propiedades diferentes.

Publicado el 12/01/2011, última actualización 09/11/2012.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras