Repetir el mismo color en 50 selectores de CSS, cambiar un valor y tener que actualizarlo en todos lados. Eso es lo que hacíamos antes de las variables CSS.
Hoy, CSS Custom Properties permiten definir valores una vez y reutilizarlos en toda la hoja de estilo. El resultado: menos código, mejor mantenibilidad y la capacidad de crear temas dinámicos con JavaScript.
CSS Variables no son solo azúcar sintáctico. A diferencia de las variables de preprocesadores como Sass o Less, las variables CSS forman parte del DOM. Esto significa que puedes modificarlas con JavaScript en tiempo real, crear temas responsivos y heredar valores entre elementos. Es una característica moderna de CSS que todo desarrollador frontend debería dominar.
Scrimba ofrece un curso interactivo que enseña CSS Variables en solo 29 minutos. Lo especial de Scrimba es su formato: puedes pausar el video, editar el código directamente en el navegador y continuar. Es como tener al instructor sentado a tu lado, pero a tu ritmo.
El curso es gratuito y está impartido por Per Borgen, CEO de Scrimba y desarrollador frontend con años de experiencia.
¿Qué aprenderás?
El curso está dividido en 8 screencasts interactivos que cubren todo lo que necesitas saber sobre CSS Variables. Empezarás con por qué aprender CSS Variables y cuáles son sus ventajas sobre las variables de preprocesadores.
Seguirás con tu primera variable, cómo sobreescribirlas y cuándo usar variables locales. También aprenderás a crear temas dinámicos, cambiar variables con JavaScript y hacer tu diseño responsivo usando variables. El curso termina con ejemplos de herencia, un concepto clave para entender cómo se propagan las variables en el DOM.
Cada screencast es corto (entre 2 y 5 minutos) y práctico. No hay horas de teoría, solo conceptos claros con código que puedes ejecutar y modificar al momento.
¿Para quién es?
El curso está dirigido a desarrolladores frontend que ya conozcan los básicos de CSS y quieran mejorar su productividad. Si trabajas con CSS a diario y sientes que repites demasiado código, este curso te mostrará una mejor forma de trabajar.
También es útil para quienes quieran aprender a crear temas dinámicos o diseño responsivo sin depender de preprocesadores. El requisito es tener conocimientos básicos de CSS.
Para acceder, visita la página del curso en Scrimba y haz clic en “Start Course”. No necesitas crear cuenta para empezar, pero guardar tu progreso requiere registro.
Empieza gratis el curso de CSS Variables en Scrimba
