A veces trucos sencillitos nos ayudan mucho en el día a día de la maquetación web. En este minipost voy a intentar convenceros de que es mejor escribir todas definiciones de una clase en una sola línea, en lugar de en varias.

Partamos de un ejemplo cualquiera. Tenemos un estilo CSS para un párrafo que utiliza la clase “foo”:

p.foo {
   border: 1px solid red;
   background-color:#EEE;
   font-size: 12px;
   padding: 20px;
   width: 300px;
   float: right;
}

Si digo que es más cómodo ponerlo todo en una línea muchos pensaréis “no… Es incómodo y queda mal estructurado”:

p.foo { border: 1px solid red; background-color:#EEE; font-size: 12px; padding: 20px; width: 300px; float: right; }

Pues después de mucho tiempo funcionando con este tipo de sintaxis he de decir que es muchísimo más cómodo trabajar con estilos en una sola línea, que tabulados y multilínea. El motivo a continuación :)

Normalmente una página web cualquiera puede tener más de 50 clases de estilos como la que he puesto en el ejemplo de arriba. Sin embargo prácticamente nunca se tienen más de 10 estilos dentro de una clase. De ese modo, cuando tenemos que modificar algo en nuestra hoja tenemos primero que localizar el lugar en el que se encuentra aquéllo que queremos actualizar.

El grueso de nuestra búsqueda está en localizar la clase, ya que tenemos más de 50, y no el estilo, ya que rara vez sobrepasan los 10. Echémos números.

Vamos a suponer 70 clases, con una media de 6 estilos. Si nuestra hoja utiliza el primer método tendrá 9 líneas por clase (Añadimos una línea en blanco entre ellas), por lo que el fichero resultante tendría la friolera de 630 líneas!

Ahora lo codificamos con el segundo método. Una linea por clase, y en total… 70 líneas. Eso es un gran ahorro en búsqueda!

Dicho de otra forma. En lugar de buscar entre 630 “campos”, tendremos que buscar entre 70 y entre 6. Esto en algoritmia se llama optimización :)