¿Cuál es el alcance (scope) de las variables CSS?
Descubre el alcance de las variables CSS: cómo definirlas globalmente (en :root) o localmente en selectores específicos, y cómo funciona la herencia.
Las variables CSS (propiedades personalizadas) tienen un alcance (scope) que puedes controlar, permitiendo definirlas tanto globalmente como localmente. Esto se debe a que, al igual que otras propiedades CSS, se rigen por los principios de la cascada y la herencia.
1. Alcance Global:
Para definir una variable de forma que esté disponible en todo tu documento HTML (es decir, globalmente), la práctica común y recomendada es declararla dentro del pseudo-selector :root. El selector :root representa el elemento raíz del documento, que en HTML es la etiqueta <html>. Las variables definidas aquí son accesibles desde cualquier elemento de la página.
:root {
--color-primario: #007bff; /* Variable global */
--fuente-principal: Arial, sans-serif; /* Variable global */
}
body {
font-family: var(--fuente-principal); /* Accede a la variable global */
}
.boton {
background-color: var(--color-primario); /* Accede a la variable global */
}
Lenguaje del código: PHP (php)2. Alcance Local:
También puedes definir (o redefinir) variables dentro de un selector más específico, como una clase, un ID, un tipo de elemento, o incluso en estilos en línea. Cuando una variable se define localmente, su alcance se limita a ese elemento en particular y a sus elementos descendientes (debido a la herencia).
Si una variable con el mismo nombre se define tanto globalmente (en :root) como localmente (en un selector específico), la versión local tendrá precedencia para ese selector y sus hijos, gracias al principio de cascada.
:root {
--color-texto: black;
}
.articulo-destacado {
--color-texto: darkblue; /* Redefinición local de --color-texto */
--padding-articulo: 15px; /* Variable local, solo para .articulo-destacado */
}
p {
color: var(--color-texto); /* Usará 'black' por defecto */
}
.articulo-destacado p {
/* Los párrafos dentro de .articulo-destacado usarán 'darkblue' */
padding: var(--padding-articulo);
}
Lenguaje del código: PHP (php)Esta flexibilidad en el alcance es lo que hace a las variables CSS tan potentes para la temificación (crear temas visuales), la creación de componentes con variaciones y el mantenimiento general del código CSS.
