Tutorial CSS: Variables en CSS

¿Qué es una variable en CSS?

Una variable en CSS, también conocida como “custom property” (propiedad personalizada), es una forma de almacenar y reutilizar valores de propiedad de estilo. Introducidas en la especificación CSS Variables Module Level 1, las variables CSS permiten definir un solo valor y usarlo en múltiples lugares, facilitando el mantenimiento y la gestión de los estilos en un proyecto. Esta habilitación reduce significativamente la redundancia y el riesgo de errores al hacer cambios en el diseño.

Una variable CSS se define utilizando la sintaxis de --nombre-variable: valor;, donde --nombre-variable es un identificador único, y valor es la propiedad CSS que deseas almacenar. Estas variables pueden ser reutilizadas en cualquier parte del documento CSS utilizando la función var(--nombre-variable).

Las variables CSS son específicas del entorno del navegador y se diferencian de las preprocesadas (como las variables en SASS o LESS) porque son dinámicas, es decir, pueden ser actualizadas y manipuladas en tiempo real mediante JavaScript. Esto significa que pueden variar durante la ejecución del código, permitiendo una mayor interactividad y personalización de los estilos directamente desde el navegador.

Además, las variables CSS admiten el concepto de herencia, donde las variables definidas en un elemento padre se pueden utilizar en sus elementos hijos. Esto facilita establecer temas y estilos cohesivos a través de las distintas secciones de un sitio web o aplicación.

Ejemplo básico de una variable CSS:

:root {
  --color-primario: #3498db;
}

body {
  color: var(--color-primario);
}

En este ejemplo, --color-primario se define en el selector :root, que representa el elemento raíz del documento, haciendo la variable accesible globalmente. Luego, esta variable se utiliza para establecer el color del texto del cuerpo del documento. Si necesitas cambiar el color primario, solo tienes que cambiar el valor de --color-primario en un solo lugar, y el cambio se propagará automáticamente a todos los elementos que utilizan esa variable en su definición de estilos.

Sintaxis básica de una variable CSS

Las variables CSS, o propiedades personalizadas, siguen una sintaxis específica para su declaración y uso. A continuación, se desglosa esta sintaxis en sus dos componentes principales: la declaración y la utilización.

Declaración de una variable CSS

Las variables CSS se declaran dentro de un selector de CSS. La convención recomendada para nombrar estas variables es preceder el nombre con dos guiones (--). La declaración sigue el formato:

selector {
  --nombre-variable: valor;
}

Aquí, selector puede ser cualquier selector válido de CSS, como un elemento HTML, una clase, un ID**,** o incluso el pseudo-selector :root para definir variables globales. --nombre-variable debe ser un identificador único elegido por el desarrollador, y valor es el valor de la propiedad CSS que se desea almacenar.

Ejemplo de una declaración:

:root {
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

En este ejemplo, se han declarado dos variables globales, --font-size-base con un valor de 16px y --spacing-unit con un valor de 8px.

Utilización de una variable CSS

Para utilizar una variable en una regla de estilo CSS, se emplea la función var(), pasándole el nombre de la variable precedido por dos guiones. La sintaxis es la siguiente:

selector {
  propiedad: var(--nombre-variable);
}

Esta técnica permite aplicar el valor de la variable a cualquier propiedad CSS.

Ejemplo de utilización:

body {
  font-size: var(--font-size-base);
  margin: var(--spacing-unit);
}

En este ejemplo, el font-size del elemento body se establece utilizando el valor de --font-size-base, y el margin se establece con el valor de --spacing-unit.

Valores por defecto con var()

La función var() también admite un valor por defecto, que se utilizará si la variable CSS especificada no está definida. Esto se realiza pasando un segundo argumento a var(), separado por una coma:

selector {
  propiedad: var(--nombre-variable, valor-por-defecto);
}

Ejemplo con valor por defecto:

p {
  color: var(--color-texto, #333);
}

En este caso, si --color-texto no está definido, el color del texto de los párrafos será #333.

Combinación con otros valores

Las variables CSS pueden combinarse con otros valores directamente en las propiedades de CSS. Esto permite una gran flexibilidad en la construcción de reglas de estilo.

Ejemplo de combinación:

button {
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius, 5px);
}

Aquí, padding se calcula multiplicando --spacing-unit por 2 y border-radius usa --border-radius si está definido, o 5px como valor por defecto.

Estas técnicas básicas de sintaxis permiten manejar y aplicar variables CSS de manera efectiva, mejorando la capacidad de mantenimiento y flexibilidad del código CSS en proyectos contemporáneos.

Definición de variables a distintos niveles

Las variables CSS pueden definirse a distintos niveles de especificidad, lo que permite gestionar con precisión dónde y cómo se aplican estas funcionalidades. A continuación, se explican los niveles más comunes:

Variables globales

Las variables globales se declaran generalmente en el pseudo-selector :root. Este selector representa el nivel más alto del árbol DOM, por lo que las variables definidas aquí están disponibles en todo el documento CSS.

:root {
  --color-principal: #3498db;
  --font-size-base: 16px;
}

Las variables globales son ideales para definir temas y estilos aplicables a toda la aplicación, como colores principales o tamaños de fuentes base.

Variables específicas de componentes

Las variables también pueden declararse a nivel de un componente, clase o ID, lo que permite una configuración más específica y enfocada.

.card {
  --card-bg-color: #fff;
  --card-border-radius: 8px;
}

.card-header {
  background-color: var(--card-bg-color);
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}

En este ejemplo, las variables --card-bg-color y --card-border-radius están definidas dentro del selector .card, haciendo que solo estén disponibles dentro de este contexto y sus descendientes.

Variables locales dentro de un alcance específico

En situaciones donde se necesitan diferentes valores contextuales para las mismas propiedades, se pueden definir variables en un selector más limitado.

.page-header {
  --header-padding: 20px;
}

.page-footer {
  --header-padding: 10px;
}

.header {
  padding: var(--header-padding);
}

Aquí, la variable --header-padding se define con diferentes valores en los selectores .page-header y .page-footer, y se utiliza dentro del selector .header. Dependiendo del nodo en el que se encuentre .header, se aplicará el valor correspondiente.

Variables definidas en pseudo-clases y pseudo-elementos

Las variables CSS también pueden ser definidas dentro de pseudo-clases (:hover, :focus) y pseudo-elementos (::before, ::after).

.button {
  --button-color: #007bff;
  color: var(--button-color);
}

.button:hover {
  --button-color: #0056b3;
  color: var(--button-color);
}

En el ejemplo, la variable --button-color cambia su valor al situarse en el pseudo-elemento :hover, lo que permite una interacción visual sin requerir múltiples declaraciones de propiedades.

Este enfoque multinivel permite una reutilización eficiente de valores y mayor control sobre la estilización a diferentes niveles de especificidad, desde global hasta local, favoreciendo la flexibilidad y mantenibilidad del código CSS.

Uso de variables CSS

Una vez definidas las variables, su uso se integra naturalmente en las reglas de estilo CSS a través de la función var(). La capacidad de reutilización de las variables reduce la redundancia y facilita la modificación de valores centralizados. A continuación, se detallan diversas maneras en las que podemos utilizar estas variables en un proyecto CSS.

Aplicación básica de variables

Las variables se emplean en cualquier propiedad CSS mediante la función var(). Esta técnica permite que las propiedades sean dinámicas y fácilmente actualizables.

:root {
  --color-primario: #3498db;
  --margen-base: 10px;
}

body {
  color: var(--color-primario);
  margin: var(--margen-base);
}

En este ejemplo, --color-primario y --margen-base se utilizan para especificar el color y el margen del cuerpo del documento.

Valores por defecto

En situaciones donde una variable puede no estar definida, var() permite establecer un valor por defecto que se utilizará si la variable no ha sido asignada.

.box {
  padding: var(--padding-custom, 16px);
}

Aquí, si --padding-custom no está definido, la propiedad padding de .box tomará el valor de 16px.

Combinación con otras propiedades y valores

Las variables CSS pueden combinarse con otros valores dentro de una propiedad, permitiendo cálculos y concatenaciones dinámicas.

:root {
  --spacing-unit: 8px;
}

.container {
  padding: calc(var(--spacing-unit) * 2);
}

En este ejemplo, la propiedad padding de .container se calcula multiplicando --spacing-unit por 2.

Uso en pseudo-clases y pseudo-elementos

Las variables también pueden ser utilizadas dentro de pseudo-clases y pseudo-elementos para estilos específicos en ciertos estados.

.button {
  --color-boton: #007bff;
  color: var(--color-boton);
}

.button:hover {
  --color-boton: #0056b3;
  color: var(--color-boton);
}

Al pasar del estado normal al de :hover, la variable --color-boton cambia de valor, modificando el color del texto del botón.

Integración con otras funciones CSS

Las variables pueden utilizarse junto con otras funciones CSS para mayor flexibilidad. Por ejemplo, en transiciones y animaciones:

:root {
  --duracion-transicion: 0.3s;
}

.card {
  transition: transform var(--duracion-transicion);
}

.card:hover {
  transform: scale(1.1);
}

Aquí, --duracion-transicion define la duración de la transición aplicada a .card.

Temas dinámicos

Las variables CSS permiten la implementación de temas dinámicos, donde puedes cambiar la apariencia completa de un sitio web mediante la actualización de unas pocas variables.

:root {
  --color-fondo: #fff;
  --color-texto: #000;
}

[data-tema="oscuro"] {
  --color-fondo: #333;
  --color-texto: #fff;
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

En este ejemplo, cambiando el atributo de data-tema a "oscuro" se actualizan las variables y el esquema de colores del cuerpo del documento.

Herencia de variables

Las variables CSS se heredan en elementos descendientes, lo cual permite que estilos declarados en un nivel global o de componente se propaguen automáticamente.

.parent {
  --bg-color: #f0f0f0;
}

.child {
  background-color: var(--bg-color);
}

La variable --bg-color definida en .parent se puede utilizar en .child, aplicando el color de fondo correctamente.

Estas técnicas demuestran la versatilidad y el poder de las variables CSS, proporcionando una herramienta eficaz para la creación de estilos más mantenibles y flexibles en proyectos modernos.

Alcance, ámbito y herencia de las variables CSS

El alcance, ámbito y herencia de las variables CSS representan fundamentos esenciales para entender cómo y dónde estas variables pueden ser utilizadas, así como su propagación a lo largo del DOM.

Alcance de las variables CSS

El alcance de una variable CSS se define por el selector en el que se declara. Cuando una variable es definida en el pseudo-selector :root, su alcance es global, abarcando todo el documento:

:root {
  --color-primario: #3498db;
}

Aquí, --color-primario está disponible en cualquier lugar del documento, permitiendo su uso efectivo en múltiples componentes.

Si una variable se define dentro de un selector específico, su alcance se limita a ese selector y sus descendientes:

.card {
  --color-fondo: #fff;
}

En este caso, --color-fondo solo está disponible dentro del contexto del .card y sus elementos hijos.

Ámbito de las variables CSS

El ámbito de una variable CSS se refiere a la región específica del documento donde la variable puede ser utilizada. Este ámbito está determinado por la estructura jerárquica del DOM y el lugar de la declaración de la variable.

Variables globales, declaradas en :root, tienen el ámbito más amplio posible:

:root {
  --tamaño-texto-base: 16px;
}

Estas variables pueden ser usadas en cualquier parte del documento CSS.

Por otro lado, las variables declaradas en selectores más específicos tienen un ámbito restringido a esos selectores y sus descendientes directos:

.section-header {
  --margen-interno: 20px;
}

.section-header-title {
  padding: var(--margen-interno);
}

Aquí, --margen-interno tiene un ámbito limitado dentro de los elementos que son descendientes de .section-header, como .section-header-title.

Herencia de las variables CSS

Las variables CSS se heredan en los elementos descendientes, facilitando la propagación de valores a lo largo del árbol DOM. Esto permite mantener la coherencia de los estilos en componentes relacionados y evitar redundancias declarativas.

Por defecto, si una variable es declarada en un elemento padre, sus hijos pueden acceder a esta variable salvo que definan un valor propio:

.container {
  --espaciado: 10px;
}

.container .item {
  margin: var(--espaciado);
}

En este ejemplo, .item hereda --espaciado desde .container y lo utiliza para establecer su margen. Si una variable es redefinida en un descendiente, esa nueva definición prevalece dentro de ese ámbito:

.container {
  --color-fondo: #f0f0f0;
}

.container .item {
  --color-fondo: #e0e0e0;
  background-color: var(--color-fondo);
}

Aquí, .item redefine --color-fondo y utiliza esta nueva definición para su background-color, sobreescribiendo la herencia desde .container.

Ámbito Shadow DOM

En el contexto del Shadow DOM, las variables CSS también respetan los límites establecidos por sus componentes encapsulados, no afectando el ámbito de otros componentes a menos que se los exponga explícitamente:

:host {
  --color-primario: #3498db;
}

.part {
  color: var(--color-primario);
}

Dentro del componente Shadow DOM, --color-primario está disponible para los selectores declarados, preservando la encapsulación e integridad de los estilos.

Este detallado entendimiento del alcance, ámbito y herencia de las variables CSS facilita un control más preciso de los estilos en proyectos complejos, optimizando la reutilización y consistencia del diseño.