Las variables CSS (custom properties) revolucionan la creación de estilos dinámicos, temas personalizables y sistemas de diseño coherentes. Descubre cómo implementarlas profesionalmente en tus proyectos.
Ejemplo de tema oscuro/claro usando variables CSS
Contenido del Artículo
Fundamentos de las Variables CSS
Sintaxis y características esenciales:
Declaración
--nombre-variable: valor;
Herencia
Variables siguen cascada CSS
Cálculos
calc() con variables: calc(var(--spacing) * 2)
Valores dinámicos
Actualizables con JavaScript
:root {
/* Variables globales */
--color-primario: #3498db;
--spacing-base: 1rem;
--border-radius: 4px;
--transition-time: 0.3s;
}
.componente {
/* Variables locales */
--componente-bg: #f8f8f8;
/* Usando variables */
background: var(--componente-bg);
padding: var(--spacing-base);
border-radius: var(--border-radius);
transition: all var(--transition-time) ease;
}
/* Fallback para navegadores antiguos */
.titulo {
color: var(--color-secundario, #e74c3c); /* Usa #e74c3c si --color-secundario no existe */
}Temas Dinámicos
Implementación de temas intercambiables:
/* Sistema de temas */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #3498db;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f5f5f5;
--accent-color: #1abc9c;
}
[data-theme="high-contrast"] {
--bg-color: #000000;
--text-color: #ffffff;
--accent-color: #ffff00;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
/* Cambiar tema con JavaScript */
const toggleTheme = () => {
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}
Técnicas Avanzadas
Patrones profesionales con custom properties:
/* Variables para animaciones dinámicas */
:root {
--animation-speed: 0.4s;
--animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.animated {
transition: all var(--animation-speed) var(--animation-easing);
}
/* Modificar con JavaScript */
document.documentElement.style.setProperty('--animation-speed', '0.2s');| Técnica | Implementación | Caso de uso |
|---|---|---|
| Responsive | @media (max-width: 768px) { :root { --spacing: 0.8rem; } } | Espaciado adaptable |
| Modo oscuro automático | @media (prefers-color-scheme: dark) { :root { ... } } | Respetar preferencias sistema |
| CSS-in-JS | element.style.setProperty('--x', value) | Integración con frameworks |
| Animaciones dinámicas | transition: transform var(--speed, 0.3s); | Velocidad configurable |
