0 Comentarios
Cuando estás empezando con el diseño web, CSS puede parecer un poco… caótico. Muchas líneas de código, repeticiones por todas partes y ese miedo constante a romper algo si cambias un color o un tamaño. Pero, ¿y si te dijéramos que hay una forma de escribir estilos más limpia, ordenada y sobre todo, más fácil de mantener? Te presentamos a las variables en CSS, también conocidas como propiedades personalizadas. Y créenos, una vez las pruebas, ya no hay vuelta atrás.
Las variables en CSS son como pequeñas cajitas donde puedes guardar valores que luego reutilizas en tu hoja de estilos. Por ejemplo, puedes definir un color principal una sola vez, y después usar esa variable en todos los botones, títulos o fondos que quieras. Así, si algún día decides cambiarlo… ¡solo tendrás que modificarlo en un sitio!
Estas variables hacen que tu código sea más flexible, más entendible y mucho más escalable. Y lo mejor es que forman parte del propio estándar de CSS, así que no necesitas instalar nada raro ni complicarte la vida con herramientas externas.
Si vienes del mundo de SASS o LESS, puede que ya estés familiarizado con las variables. Las de CSS funcionan de forma similar, pero tienen un matiz importante: viven en el navegador, lo que permite cosas muy chulas como cambiar temas en tiempo real (tema claro / tema oscuro, por ejemplo). Además, puedes usarlas dentro de propiedades, combinarlas con funciones como calc() y redefinirlas según el contexto. Bastante potente, ¿no?
Declarar una variable en CSS es más fácil de lo que parece. Solo necesitas escribir dos guiones (--) delante del nombre y asignarle un valor:
:root {
--color-principal: #3498db;
--espaciado-base: 1rem;
}
Para usarla, simplemente haces referencia con la función var():
h1 {
color: var(--color-principal);
margin-bottom: var(--espaciado-base);
}
¿Y por qué usamos :root? Pues porque es el selector que representa el elemento raíz del documento (es decir, el <html>). Definir las variables ahí significa que estarán disponibles en todo el CSS. Vamos, como si dejaras una nota en la entrada de tu casa para que todos los miembros de la familia la vean.
También puedes declarar variables dentro de otros selectores para usarlas de forma más local, pero si estás empezando, lo más práctico es tenerlas todas agrupadas en :root.
Imagina que estás creando un pequeño sitio con un color principal y un tamaño de texto base. Así sería con variables:
:root {
--color-fondo: #f0f0f0;
--color-texto: #333;
--tamano-texto: 16px;
}body {
background-color: var(--color-fondo);
color: var(--color-texto);
font-size: var(--tamano-texto);
}
Ahora cambias --color-fondo por otro color… ¡y todo cambia de golpe sin tener que buscar y reemplazar líneas!
Esto es clave. Cuando empiezas a tener hojas de estilo grandes, mantenerlas sin variables se vuelve un infierno. Con variables, solo necesitas cambiar un valor una vez para que se refleje en toda la web. Menos tiempo perdido, menos errores.
¿Te apetece implementar un modo oscuro? Solo tienes que redefinir tus variables bajo una clase .oscuro o una media query. Nada de duplicar estilos, solo cambias los valores.
.oscuro {
--color-fondo: #121212;
--color-texto: #f0f0f0;
}
¿Alguna vez has puesto #ff0000 en cinco sitios diferentes y luego te arrepientes? Pues eso se acabó. Centraliza los valores importantes y reutilízalos con confianza.
Olvídate de poner cosas como --rojoBonito o --color1. Usa nombres que expliquen su función, no su forma: --color-error, --padding-seccion, etc. Así no tienes que recordar para qué servía cada una, lo sabrás al leerlo.
Agrupa las variables por tipo: colores, tipografías, espaciados, etc. Y si puedes, comenta cada bloque. Esto te ahorra horas de scroll en el futuro.
:root {
/* Colores */
--color-principal: #1abc9c;
--color-secundario: #2ecc71;/* Tipografías */
--fuente-base: 'Roboto', sans-serif;
--tamano-base: 16px;
}
Aquí es donde empieza la magia. Puedes combinar variables con funciones dinámicas. Por ejemplo:
margin-top: calc(var(--espaciado-base) * 2);
Esto te da un control súper preciso sobre el diseño, sin perder flexibilidad.
Prácticamente sí. Todos los navegadores modernos (Chrome, Firefox, Edge, Safari) las soportan desde hace años. Solo versiones antiguas de Internet Explorer se quedan fuera.
¿Tienes que soportar navegadores antiguos? Puedes usar una técnica llamada “fallback”:
color: #000; /* Fallback */
color: var(--color-texto);
El navegador antiguo usará la primera línea, el moderno usará la segunda. Así tienes lo mejor de ambos mundos.
Como ya dijimos, cambiar de tema es cuestión de redefinir valores. Nada de duplicar hojas de estilo. Simple, elegante y potente.
Cuando trabajas con sistemas de diseño (por ejemplo, con tokens de diseño o frameworks tipo Tailwind), las variables te permiten definir una base sólida y coherente.
¿Trabajas con más gente? Las variables hacen que todos estéis en la misma página. Un sistema común de estilos evita confusiones y errores.
¿Estás creando o rediseñando tu web y quieres hacerlo de forma profesional, limpia y escalable? Echa un vistazo a nuestro servicio de diseño web en Alicante. Podemos ayudarte a implementar buenas prácticas desde el principio.
Recuerda: si defines una variable dentro de un selector específico, solo estará disponible dentro de ese ámbito. Si no la ves funcionando, asegúrate de que está bien definida.
Puede pasar que sobrescribas sin querer una variable al redefinirla en otro sitio. Usa nombres claros y revisa el orden de los estilos.
Esto ya lo comentamos, pero vale repetirlo: si tienes que pensar en navegadores desactualizados, usa valores por defecto antes de var(). Es un salvavidas.
¿Ves todo lo que puedes hacer solo con un par de guiones y un buen plan? Las variables en CSS son una herramienta poderosa, especialmente si estás empezando y quieres hacer las cosas bien desde el principio. Si estás construyendo algo, ya sea un proyecto personal o una web profesional, dale una oportunidad a este enfoque. Lo agradecerás más adelante.
Y si necesitas ayuda para montar una web moderna, adaptable y lista para crecer contigo, recuerda que en Overant estamos para eso.
¿Qué te ha parecido este artículo?