Articulo publicado el
Por Frank Esteban Isdray Junco
Propiedades CSS Personalizadas: Gestiona Variables en tus Estilos
Domina las CSS Custom Properties para crear temas dinámicos y reutilizables
Las propiedades CSS personalizadas, conocidas también como variables CSS o CSS Custom Properties, son uno de los pilares de cualquier sistema de diseño moderno. Permiten definir valores reutilizables directamente en CSS sin necesidad de preprocesadores, ofreciendo dinamismo en tiempo de ejecución que SASS o LESS no proporcionan.
Qué son las propiedades CSS personalizadas
Una propiedad CSS personalizada es una variable que almacena un valor que puede reutilizarse en toda la hoja de estilos. Se definen anteponiendo dos guiones (--) al nombre de la variable y se acceden mediante la función var().
/* Definir una propiedad personalizada */
:root {
--color-primary: #3b82f6;
--spacing-base: 1rem;
--font-size-body: 16px;
}
/* Usar la propiedad personalizada */
body {
font-size: var(--font-size-body);
margin: var(--spacing-base);
}
button {
background-color: var(--color-primary);
padding: var(--spacing-base);
}
¿Por qué son importantes?
En lugar de repetir valores en cientos de líneas de CSS, defines una variable una vez y la reutilizas. Cuando necesites cambiar el color primario de tu aplicación, solo editas la variable una vez y el cambio se propaga por todo el proyecto.
Alcance y herencia en CSS Custom Properties
Las propiedades CSS personalizadas respetan el alcance del CSS normal. Si defines una variable en :root, está disponible en todo el documento. Si la defines en una clase específica, solo es accesible dentro de ese selector.
/* Variable global */
:root {
--color-primary: #3b82f6;
}
/* Variable con alcance local */
.dark-theme {
--color-primary: #1e3a8a;
--background: #1f2937;
--text-color: #f3f4f6;
}
/* Variable heredada de su contenedor más cercano */
.button {
background-color: var(--color-primary);
color: var(--text-color, #000); /* valor por defecto si no existe */
}
Observa que var() acepta un segundo argumento: el valor por defecto. Si la variable no está definida, CSS usa ese valor.
Herencia en el árbol DOM
Las variables CSS se heredan de padres a hijos, igual que propiedades como color o font-family. Esto significa que puedes cambiar una variable en un contenedor y todos sus descendientes heredarán el nuevo valor.
<div class="dark-theme">
<button>Botón heredador</button>
<p>Párrafo en tema oscuro</p>
</div>
:root {
--text-color: #000;
--background: #fff;
}
.dark-theme {
--text-color: #f3f4f6;
--background: #1f2937;
}
body {
color: var(--text-color);
background: var(--background);
}
/* Todos los descendientes de .dark-theme heredan sus variables */
Casos de uso prácticos
Temas dinámicos
El uso más común es implementar temas claros y oscuros sin escribir CSS duplicado.
:root {
--color-primary: #3b82f6;
--color-secondary: #10b981;
--background: #ffffff;
--text: #1f2937;
--border: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #60a5fa;
--color-secondary: #34d399;
--background: #111827;
--text: #f9fafb;
--border: #374151;
}
}
body {
background-color: var(--background);
color: var(--text);
}
.card {
border: 1px solid var(--border);
background-color: var(--background);
}
.button {
background-color: var(--color-primary);
}
Espaciado consistente
Define una escala de espaciado una vez y reutilízala en todo el proyecto.
:root {
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-base: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
}
.container {
padding: var(--space-lg);
margin-bottom: var(--space-xl);
}
.section {
margin-top: var(--space-2xl);
padding: var(--space-base) var(--space-lg);
}
.input {
padding: var(--space-sm) var(--space-base);
}
Tipografía escalable
Gestiona tamaños de fuente, pesos y alturas de línea con variables.
:root {
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-family-mono: "Monaco", "Courier New", monospace;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
}
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
}
h1 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
code {
font-family: var(--font-family-mono);
font-weight: var(--font-weight-medium);
}
Manipular propiedades CSS desde JavaScript
Una de las grandes ventajas respecto a preprocesadores es que las variables CSS pueden modificarse en tiempo de ejecución desde JavaScript.
// Leer el valor de una variable
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim();
console.log(primaryColor); // #3b82f6
// Establecer una variable globalmente
document.documentElement.style.setProperty("--color-primary", "#ef4444");
// Establecer una variable en un elemento específico
const element = document.querySelector(".card");
element.style.setProperty("--background", "#f3f4f6");
// Remover una variable
document.documentElement.style.removeProperty("--color-primary");
Cambiar tema dinámicamente
Combina variables CSS con JavaScript para implementar un selector de tema.
function setTheme(themeName) {
if (themeName === "dark") {
document.documentElement.style.setProperty("--background", "#111827");
document.documentElement.style.setProperty("--text", "#f9fafb");
document.documentElement.style.setProperty("--border", "#374151");
} else {
document.documentElement.style.setProperty("--background", "#ffffff");
document.documentElement.style.setProperty("--text", "#1f2937");
document.documentElement.style.setProperty("--border", "#e5e7eb");
}
localStorage.setItem("theme", themeName);
}
// Aplicar tema guardado al cargar
const savedTheme = localStorage.getItem("theme") || "light";
setTheme(savedTheme);
Valores por defecto y fallback
La función var() soporta valores por defecto. Si la variable no existe, CSS usa el fallback especificado.
.button {
/* Si --color-primary no existe, usa #000 */
color: var(--color-primary, #000);
/* Puedes anidar variables */
border-color: var(--border-color, var(--color-primary, #ccc));
}
¿Cuándo usar propiedades CSS personalizadas?
Úsalas cuando:
- Necesites reutilizar valores en múltiples lugares.
- Quieras cambiar valores dinámicamente desde JavaScript.
- Estés creando un sistema de diseño o tema.
- Necesites aplicar estilos condicionales basados en preferencias del usuario.
No las uses para:
- Valores que nunca se repiten y que no van a cambiar.
- Lógica compleja que requeriría preprocesadores avanzados (bucles, condicionales).
Compatibilidad del navegador
Las propiedades CSS personalizadas tienen soporte excelente en navegadores modernos. Internet Explorer 11 no las soporta, pero prácticamente todos los navegadores actuales sí.
/* Fallback para navegadores antiguos */
.button {
background-color: #3b82f6; /* Fallback */
background-color: var(--color-primary);
}
Buenas prácticas
Nomenclatura clara
Convenciones básicas
Nombra tus variables de forma que describan su propósito, no solo su valor.
/* ❌ Evita */
:root {
--blue: #3b82f6;
--small: 0.5rem;
}
/* ✅ Mejor */
:root {
--color-primary: #3b82f6;
--color-success: #10b981;
--space-sm: 0.5rem;
--border-radius: 0.375rem;
}
Prefijos y patrones
Usa prefijos consistentes para que tu equipo entienda inmediatamente el tipo de variable. Adopta --color- para colores, --space- para espaciado, --font- para tipografía, --border- para bordes y radiuses. Esto mejora la autocompletación en editores, facilita la búsqueda de variables relacionadas y eleva la legibilidad del código. Un patrón consistente también ayuda en la documentación del sistema de diseño.
Organización por categoría
Estructura de variables
Agrupa las variables por tipo: colores, espaciado, tipografía, bordes, etc.
:root {
/* Colores */
--color-primary: #3b82f6;
--color-secondary: #10b981;
--color-danger: #ef4444;
/* Espaciado */
--space-sm: 0.5rem;
--space-base: 1rem;
--space-lg: 1.5rem;
/* Tipografía */
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
}
Variables compuestas
Combinación con calc()
Puedes combinar variables para crear valores más complejos usando la función calc().
:root {
--space-base: 1rem;
--space-double: calc(var(--space-base) * 2);
--color-primary: #3b82f6;
--color-primary-alpha: rgba(59, 130, 246, 0.1);
}
.box {
padding: var(--space-double);
background-color: var(--color-primary-alpha);
}
Conclusión
Las propiedades CSS personalizadas son herramientas poderosas que simplifican el mantenimiento de estilos y permiten crear sistemas de diseño dinámicos. A diferencia de los preprocesadores, funcionan en tiempo de ejecución, lo que abre posibilidades como temas cambiables sin recargar la página o estilos basados en JavaScript.
Incorporar variables CSS en tu flujo de trabajo frontend mejora la legibilidad, reduce la duplicación de código y facilita la colaboración en proyectos con equipos de diseño.
