Trabajar con CSS puede parecer una batalla constante. Los navegadores siempre están cambiando la manera en que leen el código (*cof* Internet Explorer *cof*), y parece que hay un montón de pequeñas “pillerías” en CSS. Aunque es un lenguaje increíblemente poderoso, puede ser utilizado de forma incorrecta con facilidad, lo cual condenará tu desarrollo a una vida de imperfecciones.

1) Ignorar la Compatibilidad con el Navegador

Este es, probablemente, el problema número uno en desarrollo web, ya que debes tener layouts que se vean siempre igual, sin importar qué navegador esté utilizando el visitante al navegar el sitio. Este hecho a veces puede parecer la maldición de tu existencia: hay diferencias fundamentales en la manera en que Internet Explorer renderea una página, comparado con Firefox. Aunque ya no es tan grave como solía ser, todavía existe una gran diferencia entre navegadores.

Es fácil para los desarrolladores web diseñar la página en su navegador favorito y no preocuparse acerca de cómo se ve en otros navegadores de uso frecuente, ya que probablemente no se verán las diferencias. (Y soy un gran culpable de esto. ¡A veces diseño el sitio en Firefox y me olvido de revisarlo en IE hasta después de haberlo terminado!). Aunque hay algunos métodos ya probados para ayudar a salvaguardar tus diseños para el rendereo de diferentes navegadores, la mejor manera de asegurarse de que todo se ve constante es simplemente utilizar Browsershots. Browsershots entrega una instantánea acertada de cómo se ve tu sitio en diferentes plataformas y navegadores, permitiéndote estar seguro de que nada se ve distorsionado en un navegador.

2) No tomar en cuenta las resoluciones de navegador más pequeñas

Mientras que varios de nosotros, los diseñadores web, tenemos monitores de computador grandes (y estamos bastante orgullosos de ello), una gran parte de los visitantes de tu sitio puede que no. Puedes utilizar tus programas de análisis para ver las resoluciones de navegación de tus visitantes y qué tan amplio es su rango (Google Analytics hace esto de maravilla). Sin embargo, hay un mundo de diferencia en la manera en que un diseño se ve en una resolución de 1024×768 en oposición a una resolución de 800×600. Puede convertir un hermoso diseño en algo casi inútil.

Recientemente me di cuenta de esto mientras modificaba el diseño de Trendfo. Una gran parte de los visitantes del sitio estaban utilizando navegadores más pequeños, causando que una imagen bloqueara parcialmente algunos de los anuncios, dándome menos clicks y, en definitiva, menos ganancias desde el sitio.

Tomar en cuenta los navegadores más pequeños significa que todos tus visitantes están felices y encuentran la información que necesitan.

3. No considerar los Frameworks

Si estás desarrollando un layout en CSS desde cero, puedes querer preguntarte por qué. Tal como no hay nada nuevo bajo el sol, lo mismo ocurre en CSS. Existen bastantes frameworks de CSS como Blueprint framework y los 960 CSS Framework. Estos son creados para ayudarte a hacer layouts “a prueba de balas”, sin tener que comenzar algo desde cero. Estos layouts tienen compatibilidad con todos los navegadores y han sido probados rigurosamente. Realmente, a menos que estés haciendo algo completamente radical que necesita montones de código personalizado, tan sólo usa un framework de CSS.

¿Para qué reinventar la rueda?

4. No utilizar clases genéricas

Puede ser muy fácil no pensar en el futuro cuando se está desarrollando un sitio web. A menudo nombramos nuestras clases de CSS de forma diferente cada vez que desarrollamos un sitio, en vez de hacer una clase CSS simple que podamos reutilizar repetidamente a lo largo de nuestro diseño, sin tener que escarbar en lo que usamos antes. Esto asegurará que el diseño de nuestro sitio se mantenga constante a través de los cambios de un diseño.

Puedes utilizar una clase genérica como:

1

.right{float:right}

Para mantener las cosas flotando hacia la derecha cuando quieras que lo hagan. Así puedes dejar el estilo de DIV ID como:

1

Usualmente utilizo por lo menos tres clases genéricas cuando estoy construyendo el diseño de un sitio:

1
2
3

.clear{clear:both} 
.right{float:right} 
.left{float:left}

5. No validar el HTML

Apuesto que no sabías que validar el HTML podía también afectar tu CSS, ¿verdad? Bueno, puede hacerlo. Primero que nada, no puedes validar tu CSS hasta que tengas un HTML válido. Segundo, hay muchas instancias en las que tu HTML puede estar causando tus problemas, en vez de tu CSS. A menudo creemos que es nuestro CSS el que está afectando el layout, cuando de hecho es una porción de HTML mal formado el que hace que el layout se vea desarmado. Un DIV sin cerrar aquí, un clase CSS mal etiquetada… podría ser cualquier cosa. Asegúrate de que tu HTML esté correcto antes de siquiera intentar diagnosticar un problema con el CSS.

6. No validar el CSS

Yo solía molestar constantemente a un amigo para que me ayudara con problemas de CSS mientras intentaba sacar adelante mis diseños. Él cada vez me preguntaba con paciencia “¿Está validado el CSS? Si no, ¿cuáles son los errores?” No pasó mucho tiempo hasta que aprendí a validar el CSS antes de pedirle ayuda a Thomas después, y usualmente validarlo resolvía mi problema.

Si tienes un código CSS válido, tienes muchas más probabilidades de que tu CSS sea mucho más compatible con los navegadores y sea menos propenso a romperse.

7. Utilizar imágenes de fondo gigantescas

A menudo los nuevos diseñadores utilizan imágenes de fondo demasiado grandes en sus layouts. Por ejemplo, utilizan una imagen de fondo de 3,000px x 5,000px para abarcar cualquier tamaño de navegación posible. En vez de utilizar una imagen realmente grande, ellos deberían usar una imagen realmente pequeña que se repita con un toque de magia en CSS. La diferencia es enorme: en lugar de cargar una imagen de 200kb, podrías cargar una imagen de tan sólo unos pocos bytes de tamaño y hacer que el CSS la repita por todo el fondo.

Si tienes una imagen de fondo que es muy grande, estás perdiendo de dos maneras:

• Significa que estás utilizando ancho de banda innecesario.
• Estás haciendo que el visitante espere más tiempo para que cargue la imagen.

A veces una imagen de fondo grande es inevitable, especialmente con la reciente tendencia de diseñar layouts web ilustrativos. Sin embargo, usar imágenes repetidas o colores sólidos en el fondo es una práctica mucho mejor.

8. Utilizar CSS para todo

Cuando la gente recién conoce una tecnología, se emocionan con ella y quieren usarla en todas partes, incluso cuando puede realmente ir contra aquello que funcionará mejor para el proyecto.

Como desarrolladores web a veces podemos vernos atrapados en querer que la tecnología haga algo avanzado y específico, cuando de hecho podemos usar una tecnología diferente y mucho más fácil. Por ejemplo, a veces es mucho más fácil utilizar una tabla para organizar datos que hacer un layout complicado basado en CSS con DIV’s flotantes y cosas así. Tenemos que recordar, la razón por la cual usamos tecnologías como CSS es porque esta debe acelerar el tiempo de desarrollo. Cuando comienza a realentarnos, entonces quizás estamos exagerando un poco.

9. Utilizar CSS Inline

Este es un pecado capital para los desarrolladores web, y ocurre más frecuentemente de lo que uno quisiera saber. Si estás construyendo un diseño, casi siempre querrás mantener el CSS y el HTML separados. Esto asegura que cuando (nótese que no dije “si es que”) decidas cambiar el diseño del sitio, no tengas que revisar el HTML de cada layout y encontrar el CSS defectuoso incrustado en un elemento inline.

En vez de usar esto:

1

<a href="somewhere.html" style="float: right; color: #333333">link</a>

Deberías mover todo lo que tenga que ver con el estilo a una hoja externa de estilo como esta:

1

<a href="somewhere.html" class="link_style">link</a>

El CSS inline debería evitarse casi siempre. Es fácil de usar y es genial para hacer pruebas, pero aparte de eso probablemente no lo querrás en tu código de producción.

Siempre que no se esté diseñando una plantilla para correo. En ese caso el uso de CSS inline es casi obligatorio para que los lectores de correo tanto de escritorio como en web representen correctamente la plantilla

10. Utilizar demasiados archivos

¿Alguna vez has visto un diseño con 12 archivos CSS diferentes adjuntados a él? Es una pesadilla para cualquiera que intente hacerle cambios a tu layout. No sólo eso, también demora el tiempo de proceso de cada archivo, ya que el navegador tiene que hacer una solicitud para cada uno de ellos. Es mejor utilizar un esquema CSS simple que use 1 ó 2 archivos. El tiempo gastado en compilar 12 archivos versus un archivo único es bastante significante. No sólo eso, le ahorrarás a la siguiente persona que haga cambios a tu layout un montón de líos.

¡Nadie quiere abrir 12 archivos para realizar un simple cambio en el ancho del sitio!

(Fuente: artículo de nettuts.com escrito por Glen Stansberry y traducido por Sara Salazar para nerv. )