Alcance de variables para componentes
Limite las variables CSS a los elementos de los componentes para crear sistemas de estilos aislados y reutilizables.
Alcance de variables para componentes es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.
¿Por qué limitar el ámbito de las propiedades personalizadas?
Las propiedades personalizadas globales afectan a toda la página. Limitar el ámbito de las propiedades personalizadas a un componente mantiene los estilos aislados y evita la herencia accidental entre componentes.
Ámbito a nivel de componente
Defina las propiedades personalizadas en el selector raíz del componente. Los elementos secundarios las heredan, pero los elementos que están fuera del componente no.
<div class="card">Scoped card variables</div>
Sobrescritura de variables con ámbito
Un componente puede definir variantes de tema sobrescribiendo sus propias propiedades personalizadas en clases modificadoras:
<div class="card">Default</div>
<div class="card card--dark">Dark</div>
<div class="card card--blue">Blue</div>
Respaldo global con sobrescritura local
Patrón de diseño: valores globales en :root y sobrescrituras locales en el componente. El componente usa tokens globales, pero puede personalizarlos localmente.
<button>Royalblue (global)</button>
<div class="sidebar">
<button>Coral (sidebar override)</button>
</div>
Capas de propiedades personalizadas de CSS
Un sistema de diseño bien estructurado tiene varias capas de propiedades personalizadas:
- Tokens globales: valores sin procesar (colores, tamaños)
- Tokens semánticos: basados en el significado (--color-action)
- Tokens del componente: específicos del componente (--button-bg)
API de estilos en línea
Exponga las variables del componente como una API pública mediante estilos en línea desde JavaScript o atributos HTML. Esto permite a los usuarios personalizar los componentes sin editar CSS.
<div class="card" style="--card-bg: pink;">
Content
</div>
Ámbitos con @scope (moderno)
La nueva regla @scope proporciona un ámbito CSS explícito sin depender de convenciones de nombres de clases:
<div class="card">
<p class="title">Scoped Title</p>
<p>Card body</p>
</div>
Aislamiento con data-theme
Use un atributo data-theme para aplicar un tema diferente a todo un subárbol:
<div class="panel">Light theme (default)</div>
<div data-theme="dark" class="panel">Dark theme</div>
Cómo evitar la filtración
Las propiedades personalizadas se limitan al elemento y sus descendientes. Sin embargo, las propiedades definidas en un descendiente solo pueden ser utilizadas por ese descendiente y sus propios elementos secundarios; no se filtran a los elementos principales ni a los elementos hermanos.
Variables con ámbito adaptables
Las propiedades personalizadas con ámbito funcionan especialmente bien con las consultas de contenedor:
<div class="card">
<div class="card__inner">
<div>Item 1</div>
<div>Item 2</div>
</div>
</div>
Documentación de los tokens del componente
Documente la API de propiedades personalizadas de un componente para que los desarrolladores sepan qué variables sobrescribir. Un buen patrón consiste en enumerarlas como comentarios al principio de la hoja de estilos del componente.
Comprobación rápida
Una propiedad personalizada --color-accent está definida en un elemento .card. ¿Puede un elemento hermano .nav heredar esta variable?
Resumen
Limite el ámbito de las propiedades personalizadas a los selectores de los componentes para aislarlas del ámbito global. Use clases modificadoras para sobrescribir las variables con ámbito en las variantes. Los sistemas de diseño organizan los tokens en capas: tokens globales → tokens semánticos → tokens del componente. Exponga las variables como una API del componente para permitir la personalización externa.
Preguntas frecuentes
¿La lección «Alcance de variables para componentes» es gratis?
Sí — el texto completo de «Alcance de variables para componentes» 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 «Alcance de variables para componentes»?
Limite las variables CSS a los elementos de los componentes para crear sistemas de estilos aislados y reutilizables. 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 3 de 4.
¿Cuánto tiempo toma la lección «Alcance de variables para componentes»?
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