9 errores comunes en CSS que debes evitar escribir

CSS también conocido como hojas de estilo en cascada, es una de las herramientas principales de la web, ya que con CSS puedes cambiar por completo cómo lucen las páginas y las aplicaciones.

Escribir CSS no es difícil, pero hay que tener en cuenta varias cuestiones que te explicaré en este blog para no caer en los errores más comunes al escribir tus hojas de estilo.

Así que empecemos con los desaciertos frecuentes que debes de evitar.

1. No utilizar un reset

Cada navegador tiene su propio estilo, por defecto, para los elementos HTML. Así que antes de escribir tus propias clases y generar tus propios estilos es una buena idea restablecer los estilos que trae por defecto el navegador.

Existen diversas librerías CSS para hacer esto. Por ejemplo, normalize, que según la descripción de su página hace que los navegadores rendericen de forma más consistente todos los elementos HTML.

2. Iniciar con la versión de escritorio

Evita iniciar con la definición de los estilos CSS para las pantallas más grandes, es mucho más fácil desarrollar para una pantalla pequeña antes de escalar el diseño a una pantalla más grande.

Siempre se pueden agrandar los elementos existentes para llenar un espacio en blanco en una pantalla más grande, pero es mucho más difícil hacerlo a la inversa.

3. Utilizar selectores muy anidados

El hecho de que HTML se represente como un árbol, no significa que CSS deba emular esto.

Es por ello que se debe evitar anidar muchos selectores. Veamos los ejemplos en código.

• Evita hacer esto:

  body.container.content.user-card.avatarimg.avatar {
      width: 100%
  }
  

• Este código es muchísimo mejor al evitar la anidación:

  .avatar {
      width: 100%;
  }
  

• Hacer uso de clases utilitarias vuelve tu código más eficiente al poder reutilizarlas cuantas veces se necesite:

  .full-width {
      width: 100%;
  }
  

4. Utilizar solo unidades absolutas

Prefiere utilizar unidades relativas como rem a la hora de escribir código CSS, ya que de esta forma respetas las preferencias de tus usuarios. Aunque el valor por defecto de un navegador es de 16px, esto no significa que el usuario no pueda cambiarlo por 24px o 32px.

Si utilizas rem en tus estilos, cualquier usuario con un tamaño de fuente más grande verá un sitio más grande, puesto que todo escalará con fluidez.

Para facilitar el uso de estas unidades es aconsejable establecer el tamaño de la fuente:root al 62.5%, ya que así se mantiene una relación de 10/16.

:root {
	font-size: 62.5%
}

body {
	font-size: 1.6rem
}

Si quieres profundizar más, te invito a leer el blog de por qué no utilizar unidades absolutas al escribir CSS donde te explico al detalle las razones.

5. Duplicar fuentes por todos lados

Así como a veces se cae en la duplicidad del código, también es posible estar duplicando la misma fuente una y otra vez en diferentes partes del código.

Esto se debe a que menudo los desarrolladores copian y pegan estilos de Sketch o Figma, lo cual resulta en tener la misma font-family, entre otras propiedades de fuentes repetidas.

• Evita repetir así la definición de las fuentes:

  .hint {
  	font-family: "Roboto", sans-serif;
  	...
  }
  
  .heading {
  	font-family: "Roboto", sans-serif;
  	...
  }
  
  .profile-name {
  	font-family: "Roboto", sans-serif;
  	...
  }
  

• Declara estilos generales:

  body {
  	font-family: "Roboto", sans-serif;
  }
  

6. No utilizar apropiadamente los z-index

Si has trabajado en un proyecto grande, posiblemente te ha tocado probar desesperadamente algo como: z-index: 99999 y con esto seguramente descubrirás que gestionar los z-index no es tan fácil.

Lo ideal es evitar números mágicos y utilizar constantes con nombre en lugar de los números mágicos. Si utilizas algún preprocesador como Sass se facilita la tarea.

exportconst backdrop = 0;
exportconst openButton = 1;
exportconst dropdown = 2;

7. No aprovechar las sintaxis abreviadas

En algunas ocasiones utilizar la sintaxis abreviada no es lo ideal, por ejemplo, al trabajar con las fuentes. Sin embargo, cuando se trata de propiedades como margin, padding, border y otras más, es preferible utilizar esta sintaxis.

• Utilizar la sintaxis abreviada en fuentes resulta en código muy difícil de leer:

  font: italic small-caps bold 1.2rem/1.8rem Georgia, serif;
  

• En otros casos, resulta óptimo utilizarla:

  margin: 2rem0;
  padding: 1rem;
  border.1rem solid #000;
  

8. Poner elementos bloque dentro de elementos en línea

En la documentación de Mozilla se establece que los elementos inline solo deben contener datos y otros elementos inline. Por lo tanto, no deberías incluir elementos block dentro de elementos inline.

• No pongas elementos block dentro de elementos inline:

  <ahref="#"><h1>Elemento bloque dentro de elemento en línea</h1></a>

• Los elementos inline si pueden ir dentro de los elementos block:

  <h1><ahref="#">Elemento en línea dentro de elemento bloque </a></h1>

9. No incluir fuentes de respaldo

Puede ocurrir que el usuario no tenga instalada la fuente que tú elijas utilizar. Para evitar cualquier problema de compatibilidad, lo mejor es especificar otras fuentes e incluso familias de fuentes que se puedan utilizar en caso de no tener la fuente principal.

body {
	font-family: 'Lato', 'Roboto', sans-serif;
}

Ahora te toca a ti

Sí, ahora es tu turno de empezar a aplicar lo que acabas de aprender en esta publicación y escribir un código CSS de mejor calidad en cada oportunidad que tengas.

En el Curso Definitivo de HTML y CSS dictado por el profesor Diego De Granda puedes profundizar más sobre este tema y también aprenderás todo lo que necesitas para empezar a desarrollar sitios web.

Cuéntame en los comentarios, qué otros errores conoces, qué puedes estar haciendo mal cuando escribes CSS y cómo puedes mejorar.

Nunca pares de aprender 💚