Invierte en tu educación con el precio especial

Antes:$249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12d

15h

29m

43s

51

9 errores comunes en CSS que debes evitar escribir

52151Puntos

hace 2 años

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.

Imgur

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.

Imgur

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 💚

Alex
Alex
alexcamachogz

52151Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
3009Puntos
2 años

Apenas estoy empezando con el CSS
No entendí el concepto de, por ejemplo los elementos block
Pero sin duda saber estos errores comunes, me servirá a la hora de estudiar mi curso para prevenirlos

Gracias por el aporte, Saludos!

2
20542Puntos
2 años

Lo curioso del punto 3, es que en algunos cursos de maquetado HTML/CSS los profesores hacen uso de la anidación de selectores, y me parecía extraño porque pensaba que con sólo poner un nombre de clase o id ya era suficiente para darle estilo a los elementos.

Muy buenas recomendaciones y que guardo para utilizarlos en próximas clases o proyectos.

2
21808Puntos
2 años

No utilizar alguna metodología CSS como BEM para la organización y legibilidad del código es un error común tambien.

1
2 años

Hice un curso completo de css y creo que sigo cometiendo errores, esto me sera muy util 😁

1
2 años

am creo que No entendí el concepto de los elementos block
Pero sin duda saber estos errores me servirán a la hora de estudiar mi curso para prevenirlos… gracias

1
27069Puntos
2 años

que excelente post, a lo largo de poco menos de 6 meses que he estado aprendiendo y practicando con HTML y CSS me he dado cuenta que he mejorado muchisimo frente a estos 9 errores que mencionas, y me haces caer en cuenta la importancia del punto 2 y 8 que en muchas ocasiones no lo tengo presente. ahora si con este gran recordatorio seguiré mejorando estos dos aspectos que me faltan por pulir.

1
20542Puntos
2 años

Me ha pasado lo mismo que mencionas de notar la diferencia cuando ya hay conocimiento y práctica.

Hace unos meses, veía diseños y pensaba “eso está imposible de maquetar”. Ahora más bien pienso “¿con qué código podría replicarlo?”.

1
15600Puntos
2 años

CSS Sin duda es un mar de posibilidades😁😁

1
855Puntos
2 años

gracias por el aporte, exitos.

1
6961Puntos
2 años

Excelentes recomendaciones para escribir CSS.
Debo corregir un poco lo de los selectores anidados porque acostumbro a hacerlo, pero de resto me parecen tips muy apropiados para generar un css mas legible y standar, además de que seguir estas reglas facilita el mantenimiento de css

1
42889Puntos
2 años

Es increible que después de 4 meses desde su publicación, vuelva por acá para tomar nota de los tips que diste, Alex ❤️

1
22165Puntos
2 años

Muy buenas recomendaciones Alex, muchas gracias por compartirlas con nosotros. Vamos a ponerlas en práctica.

Saludos

1
2 años

Genial !! Ya llevo un tiempo como desarrollador frontend, pero me parecieron muy instructivas estas practicas.

A veces lo mas simple se nos olvida, complicando el código cuando se escala de tamaño.

1
6525Puntos
2 años

Excelente!! 😃 Un gran aporte para los que estamos iniciando en el mundo del Desarrollo web

Gracias por el post 🙋

0
19517Puntos
2 años

Estoy haciendo mi primera platilla HTML/CSS y no he hecho ninguna de esas cosas, gracias al profe Diego.