CSS

Tutorial CSS: Variables en CSS

Aprende a declarar y usar variables CSS para mejorar el mantenimiento y la consistencia de tus estilos con propiedades personalizadas.

Declaración de variables con --nombre-variable

Las variables CSS (también conocidas como propiedades personalizadas) son una de las características más útiles del CSS moderno. Permiten almacenar valores específicos para reutilizarlos a lo largo de una hoja de estilos, facilitando el mantenimiento y la consistencia del diseño.

Para declarar una variable en CSS, utilizamos una sintaxis especial que comienza con dos guiones (--), seguido del nombre que queremos darle a nuestra variable. Esta nomenclatura es importante ya que distingue las variables personalizadas de las propiedades estándar de CSS.

Sintaxis básica

La sintaxis para declarar una variable CSS es:

elemento {
  --nombre-variable: valor;
}

Por ejemplo, podemos definir un color principal para nuestra página web:

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

En este ejemplo, hemos creado una variable llamada --primary-color con el valor hexadecimal #3498db (un tono de azul). La hemos definido en el selector :root, que representa el elemento raíz del documento (normalmente el elemento <html>).

Convenciones de nomenclatura

Al nombrar variables CSS, es importante seguir algunas convenciones:

Usa guiones medios para separar palabras (formato kebab-case)
Los nombres son sensibles a mayúsculas y minúsculas
Utiliza nombres descriptivos que indiquen el propósito de la variable
Evita nombres genéricos como --color o --tamaño

Algunos ejemplos de buenos nombres para variables:

:root {
  --header-background: #f8f9fa;
  --text-color-dark: #333333;
  --font-size-small: 14px;
  --spacing-unit: 8px;
  --border-radius-button: 4px;
}

Dónde declarar variables

Aunque el ejemplo anterior muestra variables declaradas en el selector :root, puedes definir variables en cualquier selector según tus necesidades:

/* Variables globales */
:root {
  --main-color: #e74c3c;
  --secondary-color: #2ecc71;
}

/* Variables específicas para encabezados */
header {
  --header-height: 60px;
  --header-padding: 0 20px;
}

/* Variables específicas para botones */
.button {
  --button-padding: 8px 16px;
  --button-border-radius: 4px;
}

Organización de variables

Para proyectos más grandes, es recomendable organizar las variables por categorías. Esto facilita su mantenimiento y comprensión:

:root {
  /* Colores */
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-accent: #e74c3c;
  --color-text: #333333;
  --color-background: #ffffff;
  
  /* Tipografía */
  --font-family-base: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  
  /* Espaciado */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Bordes */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
}

Variables para sistemas de diseño

Las variables CSS son especialmente útiles para implementar sistemas de diseño (design systems). Permiten definir tokens de diseño que mantienen la consistencia visual:

:root {
  /* Paleta de colores principal */
  --color-brand: #0066cc;
  --color-brand-light: #4d94ff;
  --color-brand-dark: #004c99;
  
  /* Paleta de grises */
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  
  /* Espaciado base (sistema de 8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
}

Ejemplo práctico

Veamos un ejemplo práctico de cómo declarar y organizar variables para un sitio web sencillo:

/* Definición de variables */
:root {
  /* Colores principales */
  --color-primary: #4361ee;
  --color-secondary: #3a0ca3;
  --color-accent: #f72585;
  
  /* Colores de texto */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-light: #ffffff;
  
  /* Tipografía */
  --font-main: 'Open Sans', sans-serif;
  --font-headings: 'Montserrat', sans-serif;
  
  /* Tamaños de fuente */
  --font-size-small: 0.875rem;
  --font-size-normal: 1rem;
  --font-size-large: 1.25rem;
  
  /* Espaciado */
  --spacing-base: 8px;
  --spacing-double: 16px;
  --spacing-triple: 24px;
  
  /* Bordes */
  --border-radius: 4px;
  --border-width: 1px;
}

Ventajas de usar variables CSS

Declarar variables con la sintaxis --nombre-variable ofrece varias ventajas importantes:

Mantenimiento simplificado: Cambiar un valor en un solo lugar afecta a todos los elementos que usan esa variable
Consistencia visual: Asegura que los mismos valores se usen en toda la interfaz
Legibilidad mejorada: Los nombres descriptivos hacen que el código sea más fácil de entender
Desarrollo más rápido: Reduce la repetición de valores en el código CSS

Variables para temas y modos

Las variables CSS son perfectas para implementar temas claros y oscuros en tu sitio web:

/* Tema por defecto (claro) */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --border-color: #dddddd;
}

/* Tema oscuro */
.dark-theme {
  --background-color: #222222;
  --text-color: #f0f0f0;
  --border-color: #444444;
}

Con esta estructura, simplemente añadiendo la clase dark-theme al elemento HTML adecuado (normalmente <html> o <body>), todo el sitio cambiará al tema oscuro.

Consideraciones al declarar variables

Al trabajar con variables CSS, ten en cuenta estas consideraciones importantes:

Las variables no procesadas no tienen ningún efecto en el navegador
Los navegadores antiguos no soportan variables CSS (considera usar un fallback)
Evita redefinir variables innecesariamente en muchos selectores diferentes
Mantén la estructura de tus variables organizada y documentada

Las variables CSS han revolucionado la forma en que escribimos y mantenemos nuestras hojas de estilo, permitiendo un código más limpio, mantenible y flexible.

Ámbito y cascada de variables CSS

Las variables CSS no solo nos permiten almacenar valores para reutilizarlos, sino que también respetan las reglas de ámbito y cascada propias del lenguaje CSS. Entender cómo funcionan estos conceptos es fundamental para aprovechar al máximo el potencial de las variables.

Ámbito de las variables CSS

El ámbito de una variable CSS determina dónde está disponible para ser utilizada. A diferencia de los lenguajes de programación tradicionales, el ámbito en CSS está directamente relacionado con el DOM (Document Object Model) y sigue una estructura jerárquica.

Cuando declaramos una variable en un elemento, esta variable estará disponible para:

El elemento donde se declara
Todos sus elementos descendientes (hijos, nietos, etc.)

body {
  --body-padding: 20px;
  padding: var(--body-padding); /* Funciona aquí */
}

header {
  padding: var(--body-padding); /* Funciona porque header es descendiente de body */
}

Sin embargo, las variables no están disponibles para elementos que no sean descendientes del selector donde se declaró la variable:

.sidebar {
  --sidebar-width: 300px;
  width: var(--sidebar-width); /* Funciona aquí */
}

.main-content {
  width: var(--sidebar-width); /* NO funciona si .main-content no es descendiente de .sidebar */
}

Variables globales vs. locales

Basándonos en el concepto de ámbito, podemos clasificar las variables CSS como globales o locales:

Variables globales: Declaradas en el selector :root, están disponibles en todo el documento
Variables locales: Declaradas en selectores específicos, solo disponibles en su ámbito

:root {
  --global-color: blue; /* Variable global */
}

.card {
  --card-padding: 16px; /* Variable local */
  padding: var(--card-padding);
  color: var(--global-color); /* Puede usar la variable global */
}

.button {
  padding: var(--card-padding); /* NO funciona, está fuera del ámbito */
  color: var(--global-color); /* Funciona, es una variable global */
}

Cascada de variables CSS

Las variables CSS siguen las mismas reglas de cascada que cualquier otra propiedad CSS. Esto significa que:

Si una variable se define múltiples veces, se aplicará la definición con mayor especificidad
A igual especificidad, se aplicará la definición que aparezca más tarde en el código
Las declaraciones con !important tienen mayor prioridad

Veamos un ejemplo de cómo funciona la cascada con variables:

:root {
  --main-color: blue;
}

body {
  --main-color: green; /* Sobrescribe la variable para body y sus descendientes */
}

.special-section {
  --main-color: red; /* Sobrescribe la variable para .special-section y sus descendientes */
}

#unique-element {
  --main-color: purple; /* Mayor especificidad, se aplica solo a este elemento */
}

Herencia de variables

Las variables CSS se heredan de manera similar a propiedades como color o font-family. Esto significa que si un elemento no tiene definida una variable, pero su elemento padre sí, el elemento hijo utilizará el valor del padre.

body {
  --text-color: #333;
}

p {
  color: var(--text-color); /* Hereda --text-color de body */
}

.highlight {
  --text-color: #ff6600; /* Redefine la variable solo para .highlight y sus descendientes */
}

Ámbito en componentes

El ámbito de las variables CSS es especialmente útil para crear componentes reutilizables con estilos encapsulados:

.button {
  --button-bg: #0066cc;
  --button-text: white;
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: 8px 16px;
  border-radius: 4px;
}

.button.secondary {
  --button-bg: #f2f2f2;
  --button-text: #333333;
  /* No necesitamos redefinir background-color ni color */
}

.button.danger {
  --button-bg: #e74c3c;
  /* Solo cambiamos el fondo, el texto sigue siendo blanco */
}

Este enfoque permite crear variantes de componentes modificando solo las variables relevantes, manteniendo el resto de la definición del componente intacta.

Ámbito en media queries

Las variables CSS también respetan el ámbito dentro de las media queries, lo que permite adaptar valores según el tamaño de pantalla:

:root {
  --container-width: 1200px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 100%; /* Redefine la variable para pantallas pequeñas */
  }
}

.container {
  width: var(--container-width);
}

Ámbito en pseudoclases y pseudoelementos

Las variables también funcionan con pseudoclases y pseudoelementos, permitiendo cambios de estado elegantes:

.button {
  --button-bg: #0066cc;
  --button-bg-hover: #004c99;
  background-color: var(--button-bg);
  transition: background-color 0.3s;
}

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

También podemos redefinir variables dentro de pseudoclases:

.button {
  --button-bg: #0066cc;
  background-color: var(--button-bg);
  transition: background-color 0.3s;
}

.button:hover {
  --button-bg: #004c99; /* Redefine la variable en el estado hover */
  /* No necesitamos redefinir background-color */
}

Ejemplo práctico: Sistema de temas con ámbito

Veamos un ejemplo más completo que aprovecha el ámbito y la cascada para implementar un sistema de temas:

/* Tema por defecto (claro) */
:root {
  --color-background: #ffffff;
  --color-text: #333333;
  --color-primary: #0066cc;
  --color-secondary: #6c757d;
  --color-accent: #ff9900;
}

/* Tema oscuro aplicado a nivel de body */
body.dark-theme {
  --color-background: #121212;
  --color-text: #f0f0f0;
  --color-primary: #4d94ff;
  --color-secondary: #adb5bd;
  --color-accent: #ffcc00;
}

/* Componente con tema propio que anula el tema global */
.special-card {
  --color-background: #f8f9fa;
  --color-text: #212529;
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Incluso con tema oscuro activo, este componente mantiene su propio tema */
body.dark-theme .special-card {
  /* Mantiene sus propios colores a menos que los redefinamos aquí */
}

/* Podemos sobrescribir específicamente para este caso */
body.dark-theme .special-card.adapt-to-theme {
  --color-background: #2d2d2d;
  --color-text: #e0e0e0;
}

Consideraciones sobre el rendimiento

El ámbito de las variables CSS puede afectar al rendimiento si no se gestiona adecuadamente:

Definir demasiadas variables en :root puede hacer que el navegador tenga que procesar muchas variables para cada elemento
Redefinir variables en muchos niveles diferentes puede aumentar la complejidad de cálculo
Para mejor rendimiento, define las variables lo más cerca posible de donde se utilizan

Depuración de ámbito de variables

Cuando trabajamos con variables CSS y su ámbito, podemos usar las herramientas de desarrollo del navegador para depurar:

Inspecciona un elemento
Revisa la pestaña "Computed" o "Calculado"
Busca la sección "CSS Variables" o filtra por "--"

Esto te mostrará qué variables están disponibles para ese elemento y de dónde provienen.

El ámbito y la cascada de variables CSS proporcionan un sistema potente y flexible para gestionar estilos, permitiendo crear interfaces modulares y mantenibles con un código más limpio y estructurado.

Uso de var() y valores fallback

La función var() es el mecanismo principal para utilizar las variables CSS que hemos declarado previamente. Esta función permite insertar el valor de una variable CSS en cualquier lugar donde se esperaría un valor en una propiedad CSS.

Sintaxis básica de var()

La sintaxis para utilizar una variable CSS es simple:

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

Por ejemplo, si hemos definido una variable para nuestro color primario:

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

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 15px;
}

En este caso, todos los elementos con la clase .button tendrán un fondo del color definido en la variable --primary-color.

Valores fallback (valores de respaldo)

Una de las características más útiles de la función var() es la posibilidad de proporcionar valores fallback o de respaldo. Estos valores se utilizarán cuando:

La variable CSS especificada no está definida en el ámbito actual
La variable tiene un valor inválido para la propiedad donde se está usando

La sintaxis para incluir un valor fallback es:

var(--nombre-variable, valor-fallback)

Veamos un ejemplo práctico:

.card {
  /* Si --card-padding no está definida, se usará 16px */
  padding: var(--card-padding, 16px);
  
  /* Si --card-color no está definida, se usará #333 */
  color: var(--card-color, #333);
}

Múltiples valores fallback

También podemos encadenar valores fallback, creando una especie de cascada de respaldo:

.element {
  /* Orden de prioridad: --custom-width → --default-width → 100px */
  width: var(--custom-width, var(--default-width, 100px));
}

En este ejemplo:

Primero se intenta usar --custom-width
Si no está disponible, se intenta usar --default-width
Si ninguna de las dos está disponible, se usa 100px

Valores fallback compuestos

Para propiedades que aceptan múltiples valores, debemos tener cuidado con los valores fallback:

/* ❌ Esto NO funciona como se espera */
.box {
  /* Si falta --padding, se usará "10px 20px" como un solo valor */
  padding: var(--padding, 10px 20px);
}

/* ✅ Forma correcta */
.box {
  /* Cada dimensión tiene su propia variable con fallback */
  padding: var(--padding-y, 10px) var(--padding-x, 20px);
}

Uso de var() con cálculos

La función var() se puede combinar con la función calc() para realizar operaciones matemáticas con variables:

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

.container {
  /* Multiplica la unidad de espaciado por 2 */
  padding: calc(var(--spacing-unit) * 2);
  
  /* Calcula el ancho restando el margen doble */
  width: calc(100% - (var(--spacing-unit) * 4));
}

Este enfoque es especialmente útil para crear sistemas de diseño flexibles y coherentes.

Uso práctico en componentes

Veamos un ejemplo más completo de cómo usar var() con valores fallback en un componente de botón:

/* Estilos base del botón */
.button {
  /* Usa variables con valores fallback para cada propiedad */
  background-color: var(--button-bg, #0066cc);
  color: var(--button-text, white);
  padding: var(--button-padding-y, 8px) var(--button-padding-x, 16px);
  border-radius: var(--button-radius, 4px);
  border: var(--button-border, none);
  font-size: var(--button-font-size, 1rem);
  transition: var(--button-transition, all 0.3s ease);
}

/* Variante secundaria */
.button.secondary {
  --button-bg: #f2f2f2;
  --button-text: #333333;
  --button-border: 1px solid #dddddd;
}

/* Variante de tamaño pequeño */
.button.small {
  --button-padding-y: 4px;
  --button-padding-x: 12px;
  --button-font-size: 0.875rem;
}

Este enfoque permite crear variantes de componentes de forma limpia y mantenible.

Valores fallback para compatibilidad con navegadores

Los valores fallback son especialmente útiles para proporcionar compatibilidad con navegadores antiguos que no soportan variables CSS:

.element {
  /* Para navegadores antiguos */
  background-color: #0066cc;
  /* Para navegadores modernos */
  background-color: var(--primary-color, #0066cc);
}

En navegadores que no soportan variables CSS, se ignorará la segunda línea y se aplicará el color definido directamente.

Detección de soporte de variables

Podemos usar @supports para detectar si el navegador soporta variables CSS:

/* Estilos base para todos los navegadores */
.container {
  max-width: 1200px;
}

/* Estilos solo para navegadores que soportan variables CSS */
@supports (--css: variables) {
  .container {
    max-width: var(--container-width, 1200px);
  }
}

Uso de var() en propiedades personalizadas

Las variables CSS también pueden usarse como valores de otras variables:

:root {
  --primary-hue: 210;
  --primary-color: hsl(var(--primary-hue), 80%, 50%);
  --primary-light: hsl(var(--primary-hue), 80%, 70%);
  --primary-dark: hsl(var(--primary-hue), 80%, 30%);
}

Esto permite crear sistemas de color dinámicos donde cambiar un solo valor afecta a múltiples colores relacionados.

Valores fallback dinámicos

Podemos crear valores fallback que dependan de otras variables:

.card {
  /* Si --card-spacing no está definido, usa el doble de --base-spacing */
  /* Si --base-spacing tampoco está definido, usa 16px */
  padding: var(--card-spacing, calc(var(--base-spacing, 16px) * 2));
}

Ejemplo práctico: Sistema de temas con fallbacks

Veamos un ejemplo completo de un sistema de temas que utiliza var() con valores fallback:

/* Definición de variables del tema por defecto */
:root {
  /* Colores principales */
  --color-primary: #4361ee;
  --color-secondary: #3a0ca3;
  
  /* Colores de texto */
  --text-color: #333333;
  --text-color-light: #666666;
  
  /* Espaciado */
  --spacing-base: 8px;
}

/* Componente de tarjeta con valores fallback */
.card {
  background-color: var(--card-bg, white);
  color: var(--card-text, var(--text-color, #333333));
  border: 1px solid var(--card-border, #dddddd);
  border-radius: var(--card-radius, 8px);
  padding: var(--card-padding, calc(var(--spacing-base, 8px) * 3));
  box-shadow: var(--card-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Variante de tarjeta destacada */
.card.featured {
  --card-bg: var(--color-primary, #4361ee);
  --card-text: white;
  --card-border: transparent;
  --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Consideraciones al usar var() y fallbacks

Al trabajar con var() y valores fallback, ten en cuenta estas recomendaciones:

No abuses de los valores fallback anidados, ya que pueden afectar al rendimiento
Proporciona fallbacks que sean del mismo tipo que la variable (color para color, longitud para longitud)
Usa comentarios para documentar el propósito de variables complejas o fallbacks
Considera el uso de herramientas de preprocesamiento (Sass, Less) para generar variables CSS con fallbacks consistentes

Depuración de variables y fallbacks

Cuando trabajamos con variables y valores fallback, podemos usar las herramientas de desarrollo del navegador para depurar:

Inspecciona un elemento
En la pestaña "Computed" o "Calculado", busca la propiedad que usa la variable
El navegador mostrará tanto la declaración con var() como el valor computado final

Esto te ayudará a identificar si se está utilizando el valor de la variable o el valor fallback.

Limitaciones de var()

Es importante conocer algunas limitaciones de la función var():

No se puede usar en nombres de propiedades, selectores o media queries
No funciona dentro de la función url()
Algunas propiedades tienen requisitos específicos de formato que pueden causar problemas

/* ❌ Estos usos NO funcionan */
var(--property-name): value;
.var(--class-name) { ... }
@media var(--media-query) { ... }
background-image: url(var(--image-path));

/* ✅ Este uso SÍ funciona */
@media (max-width: 768px) {
  :root {
    --container-width: 100%;
  }
}

La función var() con valores fallback proporciona un sistema robusto y flexible para trabajar con variables CSS, permitiendo crear interfaces adaptables y mantenibles con un código más limpio y estructurado.

Aprende CSS online

Otros ejercicios de programación de CSS

Evalúa tus conocimientos de esta lección Variables en CSS con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Aprende a declarar y usar variables CSS para mejorar el mantenimiento y la consistencia de tus estilos con propiedades personalizadas.

Declaración de variables con --nombre-variable

Sintaxis básica

Convenciones de nomenclatura

Dónde declarar variables

Organización de variables

Variables para sistemas de diseño

Ejemplo práctico

Ventajas de usar variables CSS

Variables para temas y modos

Consideraciones al declarar variables

Ámbito y cascada de variables CSS

Ámbito de las variables CSS

Variables globales vs. locales

Cascada de variables CSS

Herencia de variables

Ámbito en componentes

Ámbito en media queries

Ámbito en pseudoclases y pseudoelementos

Ejemplo práctico: Sistema de temas con ámbito

Consideraciones sobre el rendimiento

Depuración de ámbito de variables

Uso de var() y valores fallback

Sintaxis básica de var()

Valores fallback (valores de respaldo)

Múltiples valores fallback

Valores fallback compuestos

Uso de var() con cálculos

Uso práctico en componentes

Valores fallback para compatibilidad con navegadores

Detección de soporte de variables

Uso de var() en propiedades personalizadas

Valores fallback dinámicos

Ejemplo práctico: Sistema de temas con fallbacks

Consideraciones al usar var() y fallbacks

Depuración de variables y fallbacks

Limitaciones de var()

Otros ejercicios de programación de CSS

Todas las lecciones de CSS

Introducción Y Entorno

Introducción Y Entorno

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Posicionamiento

Flexbox

Flexbox

Flexbox

Flexbox

Css Grid

Css Grid

Diseño Responsive

Diseño Responsive

Diseño Responsive