CSS: buenas prácticas

El objetivo primordial de CSS es definir un lenguaje estándar para diseñar interfaces para internet, sin importar el software o dispositivo que interprete los documentos.
Pero esa promesa se puede caer a pedazos apenas nos enfrentamos a las “diferencias” en la implementación del estándar de cada navegador. Diseñas para Firefox y resulta que tu sitio se ve pésimo en algunas versiones de Internet Explorer. Lo que se suponía que era un ahorro de trabajo se transforma en un pozo sin fondo de correcciones y “hacks”.

Es imposible dejar a todos los navegadores contentos -especialmente porque en versiones más antiguas el soporte de CSS es incompleto o inexistente- y como diseñadores para la web no debemos pretender que nuestros documentos se vean exactamente igual en todos los navegadores. Despues de todo, un documento web diseñado para ser accesible debe considerar que el usuario puede elegir distintos tamaños de fuentes, tipografías, dimensiones o contrastes.

Dicho esto, hay una serie de prácticas que ayudan a minimizar las divergencias entre navegadores y evitan, en lo posible, el uso de “hacks” o trucos para satisfacer las mañas de los distintos programas. Sigue leyendo para ver estas prácticas.

Buenas prácticas al usar hojas de estilo (CSS)

Normaliza primero

Los navegadores interpretan visualmente el código HTML de forma arbitraria y diferente si es que no se le indica cómo por medio de CSS. Para evitar imprevistos normaliza los márgenes, paddings y tamaños antes de empezar con tu diseño.

Cuidado con el Width!

En el modelo de cajas de IE5, el ancho final de un elemento es el indicado en el atributo “width”. Los bordes, paddings y márgenes se cuentan hacia dentro de la caja:

#mi-caja {
  width: 200px;
  margin: 10px;
  border: 5px;
}
/*
Para IE5, el ancho final de esta caja es 200px;
*/

*/
Para Firefox, Opera, Safari y otros el ancho final
es width + bordes + paddings + margins = 230px!
*/

No sólo eso. IE6 usa el motor de CSS de IE5 si el documento HTML no tiene DOCTYPE. Esto fue una solución “parche” de Microsoft para soportar mejor CSS en IE6 sin romper el diseño de sitios “antiguos” hechos para IE5 (la mayoría de los sitios antiguos no tienen DOCTYPE).

¿La solución? No especifiques width en combinación con márgenes y bordes en la misma caja. Lo común es tener una caja exterior que controla el ancho total del elemento, y manejar los márgenes y paddings en los elementos interiores:

// HTML
 <div id="contenedor">
   <div id="contenido">
   Este es un contenido.
   </div>
 </div>

   // CSS
   #contenedor {
   width: 200px;
 }
 #contenido {
   margin:10px;
   padding: 5px;
 }

Por lo mismo, trata de manejar los anchos en unos pocos elementos contenedores. Los DIV’s y otros elementos son bloques; esto significa que, si no tienen un width especificado, ocuparán todo el espacio horizontal disponible (restando los bordes, márgenes y paddings). Aprovecha esa cualidad y minimiza el uso de WIDTH.

Ojo con los atributos no soportados

Algunos atributos CSS son muy poderosos pero lamentablemente no soportados por navegadores populares como IE6. Entre ellos está la serie min-width, max-width, min-height y max-height, que especifican las dimesiones mínimas y máximas para una caja.

Solución: usa esos atributos con confianza para Firefox, Safari y Opera. Para IE 5 y 6 permítete usar un pequeño “hack”:

/*
Para Firefox, Safari, Opera y otros
*/
   #mi-caja {
     min-height: 300px;
 }
 /*
 Para IE
 */
 * html #mi-caja {
    height: 300px;
 }

Esto aprovecha dos particularidades de la implementación del DOM y CSS de IE.
Primero, IE cree que hay un elemento sin nombre que contiene a todo el documento HTML. Por lo tanto el selector en cascada

* html #mi-caja

sólo es visible para IE.
Segundo, si el contenido de la caja es más alto que el width, IE agrandará la caja los pixeles necesarios para acomodar la extensión del contenido, por lo que podemos usar el truco del asterisco para definir un height sólo para IE. En los otros navegadores el contenido sobresale de la caja si éste es más extenso que height. Para evitar eso fue diseñado min-height.

No abuses de la cascada

Es fácil dejarse tentar por el poder de los selectores en cascada de CSS:

#mi-div div p strong a.link-especial {color:red;}

#mi-otro-div div p em a.link-especial {color:green;}

Mientras más “profundo” o específico el selector, más peso tiene sobre otros selectores más generales, sin importar cual vaya antes o despues en el código. Los selectores ultra-específicos son muy poderosos pero a veces muy difíciles de mantener. Trata de mantener tus selectores con el mínimo de especifidad necesaria y sólo aumenta la profundidad en casos puntuales.

/*
Estilo general
*/
.link-especial {color:red;}
/*
Estilo para un caso particular, más específico.
*/
#mi-otro-div  .link-especial {color:green;}

Nombra tus atributos de acuerdo a su contenido, no su diseño

A veces se tiende a usar nombres de clases e id’s de acuerdo al diseño que queremos lograr:

 <div id="menu-derecha">
   <a class="link-rojo">Logout</a>
 </div>

Si alguna vez decides modificar la hoja de estilos puedes terminar con un div id=”menu-derecha” que se encuentre a la izquierda o un link class=”link-rojo” de color amarillo. No muy fácil de entender.

Tanto HTML como sus atributos fueron pensados para estructurar los documentos semánticamente, sin importar su diseño. Por esto es más sensato utilizar atributos que hablen del tipo de contenidos que contienen:

 <div id="menu-principal">
   <a class="link-logout">Logout</a>
 </div>

¿Dónde pongo las imágenes?

Las imágenes web que incluímos en las hojas de estilo por medio de background-image o list-style-image son relativas a la hoja de estilos, no al documento HTML. Esto es bueno porque nos permite vincular la hoja de estilos a distintos documentos sin riesgo de perder las referencias a las imágenes. Eso es ideal además porque podemos cambiar de hojas de estilos rápidamente, modificando el diseño de un mismo documento por completo.
Por eso, las imágenes incluídas en el HTML (fotos descriptivas, gráficos, etc) debieran ir en directorios separados de las imágenes incluídas por CSS (que debieran ser ornamentales, no informativas). Si en el futuro queremos cambiar la hoja CSS de nuestro Fotolog queremos eliminar el estilo antiguo -y sus imágenes- pero mantener las fotografías de nuestros diarios o productos. Cuestión de orden.

Por supuesto hay más. Esta es una breve lista de las consideraciones que tengo presentes ante cualquier nuevo proyecto CSS.