Variables en CSS (Propiedades Personalizadas)

¿Qué son las variables en CSS?

Las variables en CSS permiten almacenar valores reutilizables que pueden aplicarse en múltiples lugares dentro de una hoja de estilos. Son útiles para mantener el código más limpio y facilitar la modificación de estilos globales.

Las variables se definen usando la sintaxis --nombre-de-variable y se pueden utilizar en cualquier parte del CSS usando la función var(--nombre-de-variable).

Ventajas de usar variables en CSS:

Reutilización: Definir un valor una vez y reutilizarlo en todo el documento.
Facilidad de mantenimiento: Si deseas cambiar un color o tamaño global, solo necesitas modificar la variable en un lugar.
Mejor organización del código: Al usar variables, puedes tener una estructura más clara y organizada para los estilos.

Declaración de una variable:

Las variables en CSS se definen dentro de un selector. La forma más común es declarar las variables en el :root, lo que las hace accesibles en todo el documento.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
  --padding: 10px;
}

En este ejemplo, hemos definido tres variables: --primary-color, --secondary-color, --font-size, y --padding.

Usar una variable:

Para utilizar una variable, se emplea la función var() seguida del nombre de la variable que deseas usar:

body {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--padding);
}

button {
  background-color: var(--secondary-color);
  color: white;
  padding: var(--padding);
}

Este código aplica las variables a diferentes propiedades. Si decides cambiar el valor de --primary-color o --padding, el cambio se reflejará en todo el documento sin necesidad de cambiarlo manualmente en cada lugar.

Ejemplo práctico:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variables CSS</title>
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --font-size: 18px;
      --padding: 1rem;
    }

    body {
      background-color: var(--primary-color);
      font-size: var(--font-size);
      padding: var(--padding);
      color: white;
    }

    button {
      background-color: var(--secondary-color);
      color: white;
      padding: var(--padding);
      border: none;
      cursor: pointer;
    }

    button:hover {
      background-color: var(--primary-color);
    }
  </style>
</head>
<body>
  <h1>Bienvenido a la página</h1>
  <button>Haz clic aquí</button>
</body>
</html>

Bienvenido a la página

En este ejemplo:

El fondo del cuerpo es del color de --primary-color.
El tamaño de la fuente en el cuerpo es de --font-size.
El botón tiene un color de fondo que usa --secondary-color, pero al hacer hover sobre el botón, cambia al color primario con --primary-color.

Valores por defecto en `var()`

Puedes definir un valor por defecto para una variable en caso de que no esté definida o falle por alguna razón. Se hace pasando un segundo argumento en var():

h1 {
  color: var(--main-text-color, black);
}

En este ejemplo, si --main-text-color no está definida, el color predeterminado será negro (black).

Ámbito de las variables (Scope)

Las variables en CSS siguen el mismo concepto de ámbito que en otros lenguajes de programación. Puedes declarar variables globales dentro de :root, o variables locales dentro de un selector específico.

Ejemplo de variables locales:

.section {
  --background-color: #f39c12;
}

.section .box {
  background-color: var(--background-color);
}

Aquí, la variable --background-color solo está disponible dentro del selector .section.

Buenas prácticas:

Nombres descriptivos: Usa nombres que expliquen claramente el propósito de la variable. Ejemplo: --primary-color, --heading-font-size.
Consistencia: Mantén un esquema de nombres consistente para facilitar la lectura y mantenimiento del código.
Variables globales y locales: Usa variables en :root para valores que se reutilizarán en todo el documento, y variables en selectores específicos para modular los estilos.

Conclusión:

Las variables en CSS son una poderosa herramienta para mantener un código de estilos más limpio, organizado y fácil de mantener. Ayudan a mejorar la consistencia visual de un proyecto y a reducir errores al evitar la duplicación de valores.