Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Roundups

¿Estás cometiendo estos 10 errores de CSS?

by
Read Time:7 minsLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

Trabajar con CSS puede parecer una batalla constante. Los navegadores siempre están cambiando la forma en que leen el código (*tose* Internet Explorer * tose*), y parece que hay muchos pequeños "trucos" de CSS. Si bien es un lenguaje increíblemente poderoso, se puede usar fácilmente de manera incorrecta, lo que condenará tu desarrollo a una vida de imperfecciones.

1. Ignorar la compatibilidad del navegador

Este es probablemente el problema número uno con el desarrollo web, ya que debes tener diseños que se vean iguales, sin importar qué navegador esté usando el visitante del sitio para navegar por la página. Este hecho a veces puede parecer la pesadilla de tu existencia: existen diferencias fundamentales en la forma en que Internet Explorer representa una página, en comparación con Firefox. Si bien no es tan malo como solía ser, todavía hay una gran diferencia entre los navegadores.

Es fácil para los desarrolladores web diseñar la página en su navegador favorito y no preocuparse por cómo se ve en otros navegadores importantes, ya que probablemente no verás las diferencias. (Soy uno de los principales infractores de esto. ¡A veces diseño el sitio en Firefox y me olvido de revisar IE hasta que esté listo!) Si bien existen algunos métodos probados y verdaderos para ayudar a proteger tus diseños para diferentes renderizados del navegador, la mejor manera de asegurarte de que todo se vea constante es simplemente usar Browsershots. Browsershots brinda una instantánea precisa de cómo se ve tu sitio en muchas plataformas y navegadores diferentes, lo que te permite asegurarte de que nada se vea extraño en un navegador.

Foto de lazlo-photo.

2. Sin tener en cuenta las resoluciones de navegador más pequeñas

Si bien muchos de nosotros, los desarrolladores web, tenemos grandes monitores de computadora, y estamos bastante orgullosos de ello, es posible que una buena parte de los visitantes de tu sitio no lo tengan. Puedes consultar tus programas de análisis para ver las resoluciones del navegador de tus visitantes y su alcance (Google Analytics lo hace de maravilla). Sin embargo, hay un mundo de diferencia en la apariencia de un diseño en una resolución de 1024x768 en comparación con una resolución de 800x600. Puede hacer que un hermoso diseño sea casi inútil.

Recientemente me di cuenta de esto mientras ajustaba el diseño de Trendfo. Una gran parte de los visitantes del sitio utilizaban navegadores más pequeños, lo que provocaba que una imagen bloqueara parcialmente algunos anuncios, lo que me proporcionaba menos clics y, en última instancia, menos ingresos del sitio.

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

Foto de Petteri Sulonen.

3. No tener en cuenta los Frameworks

Si estás desarrollando un diseño CSS desde cero, es posible que desees preguntarte por qué. Así como nada es nuevo bajo el sol, lo mismo ocurre con CSS. Hay muchos frameworks CSS como el framework Blueprint y el framework CSS 960. Estos se crean para ayudarte a hacer diseños a prueba de balas, sin tener que comenzar algo desde cero. Estos diseños son compatibles con varios navegadores y se han probado rigurosamente. Realmente, a menos que estés haciendo algo totalmente radical que necesite una gran cantidad de código personalizado, simplemente usa un framework CSS.

¿Por qué reinventar la rueda?

Foto de nestor_galina.

4. No utilizar clases genéricas

Puede ser bastante fácil no pensar en el futuro cuando desarrollamos sitios web. A menudo, nombramos a nuestras clases de CSS con algo diferente cada vez que desarrollamos un sitio, en lugar de hacer una clase de CSS simple que podemos reutilizar repetidamente a lo largo de nuestro diseño, sin tener que desenterrar lo que usamos antes. Esto asegurará que el diseño de nuestro sitio permanezca constante durante los cambios de diseño.

Puedes usar una clase genérica como:

(Nota del editor: los 'derechos' dobles son el resultado de un error en nuestro visor de código, el código correcto es, por supuesto, .right{float:right}.)

Para mantener las cosas flotando en la dirección correcta cuando lo desees. Entonces podrías aplicar estilos a un DIV con ID tal y como:

Por lo general, uso al menos tres clases genéricas cuando estoy construyendo un diseño de sitio:

Foto de cnynfreelancer.

5. No validar el HTML

Apuesto a que no sabías que validar tu HTML también podría afectar tu CSS, ¿verdad? Bueno, podría. En primer lugar, no puedes validar tu CSS hasta que tengas un HTML válido. En segundo lugar, hay muchos casos en los que tu HTML podría estar causando tus problemas, en lugar de tu CSS. Muchas veces pensamos que nuestro CSS está alterando el diseño cuando en realidad es un poco de HTML mal formado lo que hace que el diseño sea miedoso. Un DIV no cerrado aquí, una clase CSS mal etiquetada... podría ser cualquier cosa. Asegúrate de que tu HTML se verifique antes de intentar diagnosticar un problema de CSS.

Foto de Focal Intent.

6. No validar el CSS

Solía molestar constantemente a un amigo para que me ayudara con los problemas de CSS mientras trataba de discutir mis diseños. Siempre me preguntaba con paciencia: "¿Se valida el CSS? Si no es así, ¿cuáles son los errores? "No pasó mucho tiempo antes de que aprendiera a validar el CSS antes de pedirle ayuda a Thomas más adelante y, por lo general, la validación solucionó el problema por mí.

Si tienes un código CSS válido, es mucho más probable que tengas un CSS mucho más compatible con todos los navegadores y es menos probable que se rompa.

7. Uso de imágenes de fondo de mamut

A menudo, los nuevos diseñadores utilizarán imágenes de fondo de gran tamaño en sus diseños. Por ejemplo, usar una imagen de fondo de 3000px X 5000px para tener en cuenta cualquier tamaño de navegador posible. En lugar de usar una imagen realmente grande, podrían usar una imagen repetida muy pequeña con un toque de magia CSS. La diferencia es enorme: en lugar de cargar una imagen de 200kb, puedes cargar una imagen de solo unos pocos bytes de tamaño y hacer que el CSS la repita en el fondo.

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

  1. Significa usar ancho de banda innecesario.
  2. Estás haciendo que el visitante espere más para que se cargue la imagen.

A veces, las imágenes de fondo grandes son inevitables, especialmente con la tendencia reciente de crear diseños web ilustrativos. Sin embargo, usar imágenes repetidas o colores sólidos en el fondo es una práctica mucho mejor.

Foto por Petteri Sulonen.

8. Usar CSS para todo

Cuando las personas aprenden por primera vez sobre una tecnología, se entusiasman con ella y quieren usarla en todas partes, incluso cuando en realidad puede ir en contra de lo que funcionará mejor para el proyecto.

Como desarrolladores web, a veces podemos quedar atrapados en el deseo de que la tecnología haga algo avanzado y específico, cuando en realidad podemos usar una tecnología diferente mucho más fácilmente. Por ejemplo, a veces es mucho más fácil usar una tabla para organizar datos que hacer un diseño complicado basado en CSS con DIV flotantes y similares. Debemos recordar que la razón por la que usamos tecnologías como CSS es porque debería acelerar el tiempo de desarrollo. Cuando empiece a ralentizarnos, tal vez nos vayamos un poco por la borda.

Foto de Timm Williams.

9. Usar CSS en línea

Este es un pecado capital para los desarrolladores web y sucede más de lo que te gustaría saber. Si estás creando un diseño, casi siempre vas a querer mantener tu CSS y HTML separados. Esto asegura que cuando (observes que no dije "si") decides cambiar el diseño del sitio, no tendrás que buscar en el HTML de cada diseño y encontrar el CSS falso adjunto a un elemento en línea.

En lugar de usar esto:

Debes mover el estilo del negocio a una hoja de estilos externa como esta:

Casi siempre se debe evitar el CSS en línea. Es fácil de usar y excelente para realizar pruebas, pero aparte de eso, probablemente no lo querrás en tu código de producción.

Foto de nestor_galina.

10. Usar demasiados archivos

¿Alguna vez has visto un diseño con 12 archivos CSS diferentes adjuntos? Es una pesadilla para cualquiera que intente realizar cambios en tu diseño. No solo eso, ralentiza el tiempo de procesamiento de cada archivo, ya que el navegador tiene que hacer una solicitud para cada uno de ellos. Es mejor usar un esquema CSS simple que use 1 o 2 archivos. El tiempo dedicado a analizar 12 archivos frente a un solo archivo es bastante significativo. No solo eso, le ahorrarás muchos problemas al próximo que tenga que hacer cambios en tu diseño.

¡Nadie quiere abrir 12 archivos para hacer un cambio simple en todo el sitio!

Foto por lightmatter.
  • Suscríbete a la fuente RSS de Tuts+ para obtener más artículos y tutoriales de desarrollo web diariamente.

Glen Stansberry es un desarrollador web y bloguero que ha tenido más dificultades de las que le gustaría admitir con CSS. Puedes leer más consejos sobre desarrollo web en su blog Web Jackalope.

¿Te gustó esta publicación? Vota por él en Digg a continuación. ¡Gracias!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.