CSS o Cascading Style Sheets (Hojas de estilo en cascada) es un lenguaje de marcas que se usa para representar el aspecto de una página web HTML. Es una herramienta bastante potente ya que con ella podemos cambiar por completo el diseño de un sitio web.

El lenguaje en sí no es un lenguaje difícil aunque hay que tener presentes varias cuestiones que no nos hagan caer en los errores más comunes cuando realizamos la escritura de cualquier estilo en CSS, además de tener siempre presente la reutilización de cualquier parte de nuestro código.

El no cometer estos errores, como casi todo en esta vida, se consigue a base de experiencia y de encontrarnos una y otra vez con ellos, por lo que vamos a intentar guiaros para que, de entrada, no os enfrentéis solos a ellos.

Consejos y trucos para evitar caer en errores comunes al escribir CSS

1. Olvidar la compatibilidad con otros navegadores

De todos es conocido que los navegadores web presentan diferencias entre ellos a la hora de mostrar cualquier página web. Aunque existen estándares creados para que esto no suceda, cada fabricante hace que su navegador funcione como quiere. Suelen ajustarse a los estándares, pero también suelen salirse de ellos, por lo que es conveniente que los estilos que diseñemos se ajusten en aspecto a los diferentes navegadores, o por lo menos, los principales.

Suele ser habitual ver como se realiza el diseño de una web en Firefox o Chrome y se olvida el comprobar dicho diseño en Internet Explorer o Safari.

Existen multitud de trucos probados que ayudan a que un mismo diseño o estilo sea idéntico en los distintos renderizados de los distintos navegadores. Para cualquiera de ellos en particular, una simple búsqueda en Internet te puede ayudar.

2. No usar Frameworks

Existen multitud de frameworks que nos ayudan en el diseño de nuestro sitio web. Son conjuntos de librerías de código ya probadas por miles de personas en todo el mundo y cuyos fallos se han ido solventando versión tras versión, por lo que hacer uso de alguno de ellos nos va a evitar quebraderos de cabeza al realizar cualquier tarea.

Estos frameworks nos ayudan a realizar el diseño de nuestro sitio sin tener que empezar desde cero, con la ayuda de elementos ya creados y a los que solo tenemos que aludir a través de sus clases. Estos diseños ya están muy probados y no suelen tener imcompatibilidades entre los distintos navegadores.

3. No tener en cuenta otras resoluciones de pantalla

Muchos desarrolladores web creen que la mayor parte de las visitas hacia una web provienen de sistemas de escritorio u ordenadores, cuyas resoluciones de pantalla son mayores. Esto no es así, ya que actualmente, la mayor parte de las visitas que recibe una página web son de dispositivos móviles, cuyas resoluciones de pantallas son menores, además de tener tamaños muy diferenciados.

Cuando se realiza el diseño de una página web, debe tenerse en cuenta esto y hacerla lo más responsiva posible, es decir, que el sitio web se adapte a la resolución de la pantalla del usuario que visite nuestra página web, recolocando, mostrando u ocultando elementos, en la misma, con el fin de hacer una experiencia de usuario lo más buena posible.

Para ello, existen multitud de frameworks que te ayudan a que cualquier diseño que realices lo hagas pensando en otros tamaños de pantalla y no solamente en la de los sistemas de escritorio.

4. Uso de imágenes de fondo de gran tamaño

Hay veces en las que se usan imágenes de fondo de gran tamaño en los diseños. Esto hará que la imagen tarde mucho en cargarse y, por tanto, la experiencia de usuario se verá un poco mermada por esto.

Si la imagen es una textura que está formada por la repetición de un patrón, lo mejor es crear una imagen de dicho patrón y realizar la repetición del mismo a lo largo de todo el fondo.

Si, por el contrario, la imagen no puede ser descompuesta, la mejor opción es comprimirla lo máximo que podamos, es decir, al punto en el cual a partir del mismo comienza a perder calidad aparente. Para esto, existen numerosas utilidades online que te realizan la compresión de cualquier imagen al máximo sin perder detalle.

5. Utilización de demasiados archivos

De la misma forma, el uso de demasiados archivos CSS puede hacer que la carga de la página web se vea ralentizada, por lo que, al igual que en el punto anterior, la experiencia de usuario se verá afectada. Ten en cuenta que por cada archivo, el navegador tendrá que realizar una petición al servidor en cuestión y después procesarla.

En lugar de utilizar diferentes archivos CSS, puedes crear un único archivo, o a lo sumo dos, en los cuales aúnes todos los estilos del sitio web, haciendo así más rápida la carga de tu página.

Estos son algunos de los trucos y consejos que pueden ayudarte a evitar que cometas esa serie de errores que los desarrolladores novatos e inexpertos en este lenguaje pueden tener, todo ello debido a la inexperiencia. Situaciones a las que en algún momento, nos hemos enfrentado o nos enfrentaremos.