Declaración y uso de propiedades personalizadas
Defina propiedades personalizadas de CSS con el prefijo -- y utilícelas mediante la función var().
Declaración y uso de propiedades personalizadas es una lección gratuita de CSS 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 CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué son las propiedades personalizadas de CSS?
Las propiedades personalizadas de CSS (también llamadas variables CSS) permiten definir un valor reutilizable una vez y utilizarlo en toda la hoja de estilos. Siguen la sintaxis --name: value.
Declaración de propiedades personalizadas
Declare propiedades personalizadas en cualquier elemento. Declararlas en :root hace que estén disponibles globalmente:
<div class="demo">Custom properties declared on :root</div>
Uso de la función var()
Haga referencia a una propiedad personalizada con la función var():
<button>Styled Button</button>
Las propiedades personalizadas se heredan
Las propiedades personalizadas siguen la herencia normal de CSS. Una propiedad definida en un elemento principal está disponible para todos sus descendientes, a menos que se sobrescriba.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Valores no válidos de propiedades personalizadas
A diferencia de las propiedades CSS normales, un valor no válido de una propiedad personalizada no hace que se ignore la declaración; la variable simplemente se resuelve tal cual. A continuación, la propiedad que la utiliza determina si el valor es válido.
Propiedades personalizadas frente a variables de Sass
Diferencias principales:
- Las propiedades personalizadas de CSS están activas en el navegador y se actualizan dinámicamente
- Las variables de Sass desaparecen durante la compilación, en el momento de la compilación
- Las propiedades personalizadas pueden cambiarse con JavaScript
- Las propiedades personalizadas respetan la cascada y la herencia
Convenciones de nomenclatura
Asigne nombres semánticos a las propiedades personalizadas, no nombres basados en su valor visual. Esto facilita actualizarlas posteriormente:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Ámbito global frente a ámbito de componente
Defina los tokens globales en :root y los valores específicos del componente en la clase raíz del componente:
<div class="card">Global font-size-base + component-scoped card vars</div>
Propiedades personalizadas en calc()
Las propiedades personalizadas funcionan dentro de calc(); deben incluir unidades si se utilizan en cálculos de dimensiones:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Propiedades personalizadas adaptables
Cambie los valores de las propiedades personalizadas dentro de las consultas de medios para crear sistemas de tokens adaptables:
<div class="section">Padding grows to 6rem on wide screens</div>
Propiedades personalizadas para animaciones
Anime elementos cambiando una propiedad personalizada (a menudo mediante JavaScript) en lugar de varias propiedades individuales:
<div class="progress-track">
<div class="progress"></div>
</div>
Comprobación rápida
¿Cómo se declara una propiedad personalizada global de CSS llamada --accent?
Resumen
Las propiedades personalizadas de CSS se declaran con --name: value y se utilizan con var(--name). Declare los tokens globales en :root y limite los valores de los componentes a sus selectores. Son dinámicas, tienen en cuenta la cascada y pueden cambiarse con JavaScript, lo que las hace mucho más potentes que las variables de Sass.
Preguntas frecuentes
¿La lección «Declaración y uso de propiedades personalizadas» es gratis?
Sí — el texto completo de «Declaración y uso de propiedades personalizadas» 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 CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Declaración y uso de propiedades personalizadas»?
Defina propiedades personalizadas de CSS con el prefijo -- y utilícelas mediante la función var(). Practicas CSS 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 CSS Academy?
No se requiere experiencia previa. CSS 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 «Declaración y uso de propiedades personalizadas»?
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 CSS Academy?
Sí. Cada lección de CSS 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
- Declaración y uso de propiedades personalizadas
- Valores de reserva y var()
- Alcance de variables para componentes
- Actualización de variables con JavaScript