Propiedades personalizadas de CSS: declarar y actualizar
Declare variables con -- en :root, haga referencia a ellas con var() y actualícelas dinámicamente con JavaScript para crear temas en tiempo real.
Propiedades personalizadas de CSS: declarar y actualizar es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Resumen: declaración y ámbito
Las propiedades personalizadas de CSS se declaran con el prefijo -- en cualquier elemento. Las propiedades declaradas en :root están disponibles globalmente. Los elementos secundarios heredan los valores y pueden sobrescribirlos localmente.
:root {
--spacing: 8px;
--color-brand: #6366f1;
}
.card {
--spacing: 12px; /* local override for .card and its children */
padding: var(--spacing);
}Actualizaciones en vivo mediante JavaScript
Las propiedades personalizadas pueden cambiarse durante la ejecución. Use element.style.setProperty('--name', value) para sobrescribir valores a nivel de elemento, o actualice una variable global en :root para afectar al instante a todos los consumidores.
// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');
// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');Leer valores de propiedades personalizadas en JS
Lea una propiedad personalizada con getComputedStyle(element).getPropertyValue('--name').trim(). Esto lee el valor calculado (en cascada), no solo el valor en línea.
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-brand')
.trim();
console.log(brandColor); // '#6366f1'Animar propiedades personalizadas
El navegador puede interpolar las propiedades personalizadas mediante @property (Houdini) o usarlas en transiciones cuando se combinan con calc(). Sin @property, los navegadores no pueden hacer la transición directa entre valores de variables.
@property — Propiedades personalizadas registradas
La regla CSS @property registra una propiedad personalizada con un tipo, un valor inicial y una regla de herencia. Las propiedades registradas pueden transicionarse y animarse de forma nativa.
@property --brand-opacity {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
.card {
opacity: var(--brand-opacity);
transition: --brand-opacity 0.3s;
}
.card:hover {
--brand-opacity: 0.7;
}Sistemas de tokens con propiedades personalizadas
Modelo de tokens de diseño: almacene todas las decisiones de diseño como propiedades personalizadas. Los componentes consumen tokens, no valores codificados directamente. Cambiar un token propaga el cambio a todas partes.
:root {
/* Colour tokens */
--token-primary: #6366f1;
--token-primary-hover: #4f46e5;
--token-surface: #ffffff;
--token-on-surface: #1f2937;
/* Spacing tokens */
--token-space-sm: 8px;
--token-space-md: 16px;
--token-space-lg: 24px;
}Propiedades personalizadas responsivas
Cambie los valores de las propiedades personalizadas dentro de las consultas de medios. Los componentes que usan las variables se adaptan automáticamente, lo que resulta más limpio que escribir reglas independientes para cada punto de ruptura.
:root {
--container-max: 640px;
--font-size-base: 15px;
}
@media (min-width: 1024px) {
:root {
--container-max: 1280px;
--font-size-base: 16px;
}
}Propiedades personalizadas en calc()
Use variables dentro de calc() para calcular el espaciado y los tamaños derivados. Esto crea un sistema de tamaños coherente y matemáticamente consistente.
:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); } /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); } /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */Temas para varias marcas
Establezca distintos tokens de tema según un atributo de datos. Una misma página puede admitir varios temas para usarla con distintas marcas.
[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }Propiedades personalizadas en SVG
Los atributos de SVG, como fill y stroke, pueden usar propiedades personalizadas. Esto permite aplicar temas a los iconos desde CSS sin modificar el marcado SVG.
/* CSS */
:root { --icon-fill: #6366f1; }
/* SVG inline or referenced */
svg { fill: var(--icon-fill); }Depurar propiedades personalizadas
En Chrome DevTools, seleccione un elemento y busque los valores de las propiedades personalizadas en la pestaña Computed. El panel Styles muestra dónde se declara cada variable. La sección Inherited muestra las variables heredadas de los elementos principales.
Comprobación rápida
¿Qué método de JavaScript actualiza una propiedad personalizada de CSS en un elemento?
Resumen: propiedades personalizadas de CSS en profundidad
Declárelas en :root para obtener valores globales; sobrescríbalas en los descendientes para limitar su ámbito. Actualícelas con style.setProperty desde JS. Léalas con getComputedStyle. @property habilita las transiciones nativas. Úselas como tokens de diseño para disponer de una única fuente de verdad. Sobrescríbalas en consultas de medios para crear tokens responsivos.
Preguntas frecuentes
¿La lección «Propiedades personalizadas de CSS: declarar y actualizar» es gratis?
Sí — el texto completo de «Propiedades personalizadas de CSS: declarar y actualizar» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Propiedades personalizadas de CSS: declarar y actualizar»?
Declare variables con -- en :root, haga referencia a ellas con var() y actualícelas dinámicamente con JavaScript para crear temas en tiempo real. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Propiedades personalizadas de CSS: declarar y actualizar»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Propiedades personalizadas de CSS: declarar y actualizar
- Transiciones: propiedad duración temporización
- Animaciones con @keyframes
- Respetar prefers-reduced-motion