Refactorizando CSS con baja especificidad

Este video dura 14:45. Solo puedes acceder al contenido completo si te suscribes a la zona premium.

Veremos toques mágicos para nuestras hojas de estilo con un ejercicio sencillo pero cargado de maldad.

Partimos de este código en Codepen.

El ejercicio se propuso en el episodio WRP 37, y en el WRP 39 dedicamos el tema principal a dar Buenos consejos para un buen CSS.

Algunas de las técnicas aplicadas son:

  • Selectores de baja especificidad.
  • Identación.
  • Eliminación de selectores globales.

Además, aunque en el ejercicio no dejábamos modificar el HTML si vemos en la resolución en vídeo cuestiones que podemos aplicar.

  • BEM
  • Nombres descriptivos de clases.

Soluciones y episodios futuros

La solución al ejercicio está en este Codepen.

Los usuarios suscriptores también pueden ver las propuestas hechas por sus compañeros. Gracias a Julio, Rafa y Jesús por participar.

Nos quedan para futuros refactors algunas cosas:

  • Custom properties en CSS
  • Unidades de medida escalables (no usar "pixel").

Por último, los recursos utilizados:

Suscríbete y para ver la resolución del problema en vídeo con todos los comentarios que aquí no aparecen.

Para escribir comentarios puedes identificarte o suscribirte.