gomflo

Todo el mundo tiene un enfoque ligeramente diferente respecto a CSS. Es esta una de las razones por las cuales modificar el código de otra persona se puede convertir en una pesadilla.

Por fortuna existen algunas buenas practicas que puedes utilizar para concebir hojas de estilo más fáciles de leer y que sea mas sencillo modifcarlo por cualquier persona en un futuro.

Una sola línea vs Multilíneas

La primera decisión que tendrás que elegir respecto a las hojas de estilo es si deseas escribir en varias lineas, como esto:

.titulo {
  font-size: 14px;
  line-height: 20px;
  color: blue;
}

O en una sola línea, como esto:

.titulo {font-size: 14px; line-height: 20px; color: blue;}

Yo inicié utilizando el primer método. Separando las distintas propiedades en lineas diferentes, ya que es más fácil de leer. Este método es de gran ayuda cuando cuando apenas te estas acostumbrando a las hojas de estilo (CSS).

Mientras fui obteniendo más experiencia en CSS, opté por utilizar el segundo método.

Entre más comodo te sientas con las hojas de estilo, menos tiempo vas a perder buscando elementos (en este caso la parte del .titulo). Cuando colocas cada propiedad en su propia línea, el archivo tiende a volverse muy extenso y complicado de mantener. Me resulta más sencillo buscar hacia abajo con el segundo método aparte el tamaño del archivo se ve reducido en gran medida.

Por supuesto que mucha gente no esta de acuerdo conmigo. Esta decisión es principalmente por preferencias personales. Si prefieres usar uno ú otro, es tu decisión.

Divide tu archivo

Como dije anteriormente, uno de los mayores inconvenientes de trabajar con CSS es la simple busqueda de la línea que necesitas modifcar. Para ayudar con esto vale la pena dividir el archivo en secciones.

Por ejemplo, podrias tener una sección “cabezera” para todas las reglas relacionadas a la cabezera de tu página. Si despues necesitas modifcar el eslogan, ya sabes donde buscar. Un simple comentario por encima de cada sección es lo minimo necesario:

/*** Cabecera ***/
...

Inicia con una restauración (reset)

Cada navegador aplica los estilos a los elementos de manera diferente. La idea de un reset ó una restauración es quitar todos los estilos predeterminados que un navegador podría añadir. Esto ayuda mucho para solucionar las inconsistencias de los navegadores (especialmente IE).

Una restauración puede ser tan simple como agregar la siguiente línea a tu hoja de estilos:

* {margin:0; padding:0;}

O si deseas un archivo de restauración más completo, echale un vistaso a Eric Meyer’s reset.

Múltiples clases en un elemento

Este es habitualmente un aspecto desconocido de las hojas de estilo, es posible agregar tantas clases de CSS a un elemento. La razón para hacer esto es que puedes definir estilos genéricos que pueden aplicarse a una serie de elementos.

Digamos que haz creado estilos para la información y el posicionamiento en un elemento de la página, entonces podrías hacer algo como esto en tu codigo HTML:

<p class="info izq">Texto de ejemplo</p>

De esta manera el párrafo obtendra la apariencia de la clase info, y no sera necesario redefinir el estilo para alinearlo a la izquierda ya que agregamos otra clase izq.

Algunos ejemplos de clases genéricas:

.alinearizq {float:left;margin-right:20px;}
.alinearder {float:right;text-align:right;margin-left:20px}
.clear {clear:both;}
.ancho45 {width:45%;}

Utiliza comentarios

Los comentarios son una manera de añadir explicaciones a tu código. Por suerte, la mayoria del código CSS se explica por si mismo y no es necesario preocuparse por comentar demasiado.

No obstante, debes utilizar comentarios en las partes dificiles, cuyo proposito no sea evidente. Por ejemplo, si añades una regla extra para asegurarte que las cosas funcionen en cierto navegador, es recomendable añadir un comentario aclarando el porque de esa regla.

/*** Cabecera ***/
 
/* Ancho y alto especificado para resolver un problema de Opera. */
#cabecera h1 {width:365px;height:152px;}
...

Ser consistente

Una vez que selecciones algún estilo debes hacer un esfuerzo para mantenerte coherente.

Si tu estilo cambia constantemente de un proyecto a otro, y seis meses despues es necesario modificar algún archivo, te puedes ocasionar dolores de cabeza, ¡incluso con tu propio código!.

Si te apegas a un estilo determinado por algún periodo, te da tiempo para realmente probarlo y ver si te funciona (por ejemplo si cambias de estilo de multilíneas a una sola línea, te puedo garantizar que en tu proximo proyecto sera más dificil de lo normal. Pero despues de 3 ó 4 proyectos, ¡notaras que seras más rapido que nunca!).

Comprime tu CSS

Cuando termines de escribir tu CSS del modo más humano posible. Es tiempo de pensar en las maquinas.

Si el archivo es más pequeño, se va descargar más rapido (lógico). Entonces ¿como lo reduzco?. Al eliminar todos los comentarios y espacios en blanco. Te quedas con una copia y es la que vas a utilizar para hacer modificaciones para luego comprimirlo de nuevo, recuerda que la versión comprimida debe ser el archivo que se debe descargar en el sitio de producción.

Una sencilla herramienta que se encarga de comprimir nuestro css es Minify CSS, ó si buscas una herramienta mas compleja echale un vistaso al YUI Compressor de Yahoo.

Depende de ti si deseas hacer esto ó no. La ventaja es: una carga más rapida, pero la desventaja es que es una molestia estar comprimiendo el archivo cada vez que modifiques tu CSS.

¿Como escribes tu CSS?

Los consejos que te di anteriormente se relacionan a como yo escribo mi CSS. ¿Tienes algún otro consejo que te gustaria compartir? ó ¿Estas en desacuerdo con lo que mencione? Me gustaira escuchar tus comentarios.