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.

El resultado de esto es que los diseñadores web tienen muy poco conocimiento de CSS y sus problemas, llevandolos a diseños mal elaborados y horas improductivas tratando de resolver un problema. Aquí están los 5 problemas más comunes que los diseñadores web cometen.

1. Sopa de DIVs

El más grande pecado de un novato en CSS es la sopa de DIVs. Esto pasa cuando existen demasiados DIVs en el documento para lograr (algunas veces muy simple) algún efecto. La sopa de DIVs crea serios problemas: las paginas cargan mas lento, el parseo del DOM es más lento, mas CSS necesita ser escrito, y el código vuelve menos mantenible.

La principal causa de la sopa de DIVs es un mal entendido básico de como las hojas de estilo funcionan. Por ejemplo, un diseñador desea crear 3 divs anidados y aplicar un estilo particular para cada DIV, digamos background-color en el primero, margin y padding en el segundo, y font-size en el tercero. Lo que el diseñador no entiende es que a menos que esta estructura sea absolutamente necesaria, todas estas propiedades pueden ser combinadas y usar un solo DIV.

<div style="background: #ccc;">
  <div style="margin: 10px; padding:10px;">
    <div style="font-size: 1.2em;"></div>
  </div>
</div>

Vaya que código tan desordenado, no parecera mentira, pero estos ojos lo han visto, así que es verdad. Ahora veamos como lo podemos mejorar.

<div id="post-23">..</div>

#post-23 {
  background: #CCC;
  margin: 10px;
  padding: 10px;
  font-size: 1.2em;
}

Mas intuitivo, sencillo y menos código vuelve más facil el mantenimiento.

Otra razón de la sopa de DIVs aparece por el deseo de usar las etiquetas DIV en lugar de etiquetas mas apropiadas como H1/H2/H3 ó UL/OL y LI. Esta practica debera ser evitada ya que crea problemas con exploradores antiguos ó exploradores movibles, escribamos webs mas semanticas.

2. ID vs Class

Este es un problema común con diseñadores de CSS que no han aprendido el lado lógico de este. Para clarificar: IDs son para un solo elemento y clases son para muchos elementos. Piensa en esto como una distinción entre tu identidad y la ciudad donde vives. un ID es “Victor H. Gomez”, pero una clase (class) es “Nuevo Leon, México”. Hay mucha gente que vive en Nuevo Leon, México, y todos ellos deben seguir algun tipo de ley o regla, como los impuestos, el reglamento de transito, etc. Pero Victor H. Gomez es un individuo único y una poca cantidad de reglas aplican para el, como podría ser su peso y su altura.

De cualquier manera no hay que aplicarle clases a todas las colleciones de elementos. Esto de nuevo, es relacionado en como las hojas de estilo funcionan. Si puedes encapsular una colección de elementos en un ID único, ya no necesitaras el atributo class dentro de estos. Esto ahorra ancho de banda y tiempo de desarrollo, consideremos el siguiente ejemplo:

<div class="color-azul"></div>
<div class="color-azul"></div>
<div class="color-azul"></div>
<div class="color-azul"></div>
<div class="color-azul"></div>

.color-azul { color: blue; }

Como se puede observar son 5 divs con la clase color-azul, esto lo debemos evitar, ya que en dado caso que necesitemos cambiar el nombre de la clase por cualquier razón, va ser necesario invertir más tiempo en cambiarle la clase a todos los elementos, me pueden decir que utilizan la super función buscar y remplazar de su editor favorito, pero esa no es la idea. Ahora veamos el siguiente ejemplo que haria lo mismo que el bloque de código anterior.

<div id="color-azul">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

#color-azul div { color: blue; }

Agregamos un div más pero tiene un valor especifico, ahora tenemos ID unico y de esa manera nos ahorramos 5 clases (class).

3. Ignorar los “atajos”

Sigo viendo paginas que declaran border widths del modo más largo, con border-left-width, border-right-width, border-top-width, y border-bottom-width, Leer esta lista es trabajo duro, pero escribirlo y mantenerlo es un doble inconveniente. Diseñadores CSS inmediatamente deberian aprender como reducir lo escrito necesario para darle estilo a los elementos.

El más importante patrón es que para los widths. Se vera repeteido este patrón en otras propiedades, asi que es importante aprenderlo. Debera ser de la siguiente manera: arriba, derecha, abajo, izquierda. Puedes pensar en esto como si fueran las manesillas del reloj empezando desde arriba. Lo que este patrón significa es que cuando especificas las unidades con este atajo seran aplicadas al lado de arriba primero, siguiendole el lado derecho, el lado de abajo, y finalmente el lado izquierdo.

border-top-width:1px;
border-left-width:1px;
border-right-width:1px;
border-bottom-width:1px;

Lo anterior tambien equivale a lo siguiente:

border-width: 1px 1px 1px 1px;

Notaras en el ejemplo anterior, el ancho de todos los bordes es el mismo. Existe un atajo para esta situacion tambien:

border-width: 1px;

Y si quieres que los anchos sean los mismos pero solo arriba y abajo y en los lados sea otro diferente, no hay problema, tambien existe un atajo para esta situación:

border-width: 1px 2px;

Lo anterior aplica el borde de 1px arriba y abajo y 2px en los lados izquierda y derecha.

Finalmente, existen atajos para la mayoria de las declaraciones, Aqui hay una lista corta:

font: estilo, peso, tamaño, fuente.

Ejemplo:

font: italic bold 1.2em Helvetica

border: ancho, estilo, color.

Ejemplo:

border:1px solid #ccc

Nota: no puedes establecer anchos usando el atajo anterior. Necesitaras declarar necesariamente los anchos separadamente.

background: color, imagen, repetición.

Ejemplo:

background: #000 url(imagen.png) no-repeat

Nota: la imagen aparece por encima del color, entonces si la imagen es transparente o si no se repite, se vera el color debajo de esta. Para evitar esto declarar el color en transparente (transparent).

Colores escritos en hex pueden ser reducidos. En vez de #111111, escribe #111. En vez de #44ff77, escribe #4f7. En vez de #00ffff, escribe #0ff

4. Ignorar el Doctype

Los exploradores web fueron diseñados para interpretar código mal escrito, como etiquetas mal cerradas, etiquetas que no estan cerradas, etiquetas cerradas pero nunca abiertas, y la lista continua. Esto no evita que debas aprender las buenas practicas en HTML y CSS, ya que diferentes exploradores mostraran el código mal escrito de diferente manera, llevandonos a dolores de cabeza innecesarios. Una de las mejores practicas que deberias adoptar es la declaración del DOCTYPE.

En los malos y antiguos dias del HTML4, era necesario escoger entre un doctype estricto, un doctype transicional ó algo completamente diferente. Afortunadamente, exploradores desde el IE6 hasta el de hoy entienden el nuevo doctype HMTL5. Lo que hace esta declaración de DOCTYPE es poner el explorador en un modo estandar, el opuesto al modo quirks. El DOCTYPE es muy facil declararlo, solo recuerda de poner lo siguiento en la primera linea de tu HTML.

<!doctype html>

Haz un hábito de declarar el doctype primero.

5. Uso incorrecto de las unidades de medida

El tamaño de las fuentes no deben ser declarados en pixeles. Aunque 1024×768 es la resolución mas común, anchos mas largos y altos mas altos se estan volviendo normales alrededor del mundo. Esto quiere decir que la gente esta leyendo textos más pequeños en pantallas mas grandes. Creo la mayoria de los diseñadores estaran de acuerdo que gran parte del diseño web es la tipografia. El texto deberia y debe ser flexible, ya que leer 10px Verdana en una pantalla de 1920x no solo es doloroso, es perdidad de tiempo.

¿La solución a este problema?. Declara el tamaño de las fuentes usando la unidad em, como esto: font-size:1.2em, Esto quiere decir que el tamaño de la fuente de un particular elemento es 1.2 veces el tamaño de fuente predeterminada, que es 16px en Firefox e Internet Explorer en este caso 1.2em equivale a 19.2px. Un beneficio muy importante de esta pratica es que el tamaño de la fuente de todo el sitio puede ser incrementado simplemente cambiando la etiqueta BODY (o cualquier otra etiqueta contenedora) usando la propiedad font-size. Hacer esto con las medidas en pixeles es imposible, a menos que alguien use la funcionde zoom del explorador, El tamaño de las fuentes tampoco deberia ser declarado en puntos (pt), centimetros (cm), o cualquier otro unidad de medidad. Evita los porcientos, ya que 1em es funcionalmente equivalente al 100%.