Cómo Usar Variables CSS y Optimizar el Proceso de Diseño de Estilos

La mayoría de los sitios web usan CSS para crear una apariencia atractiva y estilos para los distintos componentes de una página web. Técnicamente, CSS, o Cascading Style Sheets, no es un lenguaje de programación. Pero, se puede utilizar junto con lenguajes de programación como JavaScript para crear páginas web adaptables e interactivas.

Si estás familiarizado con lenguajes de programación como JavaScript, ya debes saber que puedes declarar una variable, asignarle un valor y usarla varias veces en diferentes partes de tu código. La buena noticia es que puedes aplicar el mismo concepto en CSS.

En este artículo, descubriremos qué son las variables CSS, describiremos sus ventajas y te enseñaremos cómo declararlas y dónde usarlas.

¿Qué son las Variables CSS?

Las variables CSS son propiedades personalizadas que permiten a los desarrolladores web guardar valores para usarlos más tarde en el diseño de estilos. Por ejemplo, puedes declarar el estilo y tamaño de fuente, el color de fondo y luego aplicarlos a varios elementos de tu código base, como encabezados, párrafos y bloques.

¿Para qué sirven las variables CSS? A continuación, algunas razones:

• Simplifica la actualización del código. Una vez que declaras una variable, puedes usarla repetidamente para el diseño de estilos sin tener que actualizar cada elemento manualmente.
• Reduce la cantidad de repeticiones. A medida que tu código base crece, notarás que tienes muchos tipos de clases y elementos similares. En lugar de escribir código CSS para cada elemento, simplemente puedes usar variables CSS.
• Hace que tu código sea más fácil de mantener. Mantener el código es fundamental, especialmente si quieres que tu negocio funcione sin interrupciones.
• Mejora la legibilidad. El mundo actual fomenta la colaboración. El uso de variables CSS permite crear una base de código compacta y fácil de leer.
• Facilita el mantenimiento de un estilo consistente. A medida que tu código fuente crece y el tamaño de la aplicación aumenta, las variables CSS te ayudan a mantener un estilo consistente. Por ejemplo, puedes declarar los márgenes, relleno, estilo de fuente y colores que se utilizarán en los botones de tu sitio web.

¿Cómo Declarar Variables CSS?

Ahora que ya sabes qué son las variables CSS y para qué sirven, podemos enseñarte cómo declararlas.

Para declarar una variable CSS, escribe el nombre del elemento, luego dos guiones (-), el nombre que desees y el valor. El siguiente es el sintaxis básico:

element {

  --variable-name: value;

}

Por ejemplo, si quieres aplicar relleno a todo el documento, puedes declararlo de la siguiente manera:

body {

  --padding: 1rem;

}

Alcance de las Variables CSS

Las variables CSS pueden ser locales (es decir, accesibles dentro de un elemento específico) o globales (es decir, accesibles en toda la hoja de estilo).

Variables locales

Las variables locales se agregan a selectores específicos. Por ejemplo, puedes agregarlas a un botón. Este es un ejemplo:

.button {

  --button-bg-color: #33ff4e;

}

Ahora, la variable que controla el color de fondo está disponible en el selector .button y sus elementos secundarios.

Variables globales

Las variables globales declaradas se pueden utilizar con cualquier elemento de tu código. En este caso, usaremos el pseudo-clase :root para declarar variables globales:

:root {

  --primary-color: grey;

  --secondary-color: orange;

  --font-weight: 700;

}

Puedes aplicar las variables declaradas a diferentes elementos, como encabezados, párrafos, bloques e incluso a todo a la vez.

¿Cómo Usar Variables CSS?

Crearemos un proyecto de demostración y agregaremos los archivos index.html y style.css.

En el archivo index.html, tenemos un elemento div normal y dos encabezados (h1 y h2), así como un párrafo (p).

<div>

  <h1>¡Hola desarrolladores front-end!</h1>

  <h2>Esto es cómo usar variables en CSS.</h2>

  <p> Sigue desplazándote</p>

</div>

Y el archivo style.css se ve así:

:root {

  --primary-color: grey;

  --secondary-color: orange;

  --font-weight: 700;

  --font-size: 16px;

  --font-style: italic;

}

body {

  background-color: var(--primary-color);

  font-size: var(--font-size);

}

h1 {

  color: var(--secondary-color);

  font-style: var(--font-style)

}

h2 {

  font-weight: var(--font-weight)

}

p {

  font-size: calc(var(--font-size) * 1.2);

}

Al renderizar la página web, obtendrás lo siguiente:

En el ejemplo anterior, declaramos variables globales dentro del elemento :root. Para usar cualquiera de nuestras variables globales, necesitamos la palabra clave var. Por ejemplo, para aplicar la propiedad del color de fondo que declaramos como variable global, debemos escribirlo así:

background-color: var(--primary-color);

Prueba a hacer lo mismo con otros elementos y notarás un patrón específico en el uso de la palabra clave var.

Uso de Variables CSS con JavaScript

Para demostrar cómo usar las variables CSS con JavaScript, usaremos variables locales y globales.

Agregaremos un elemento alert a nuestro código:

<div class="alert">¡Haz clic en mí!</div>

Nuestro nuevo archivo index.html se verá así:

<div>

  <h1>¡Hola desarrolladores front-end!</h1>

  <h2>Esto es cómo usar variables en CSS.</h2>

  <p> Sigue desplazándote</p>

</div>

<div class="alert">¡Haz clic en mí!</div>

Estilizaremos nuestra variable. Para ello, agregaremos lo siguiente a nuestro código CSS existente:

.alert {
  --bg-color: red; /* Define una variable local */ 
  background-color: var(--bg-color); /* Usa la variable local para el color de fondo */
  padding: 10px 20px; /* Agrega espacio interno */
  border-radius: 4px; /* Redondea las esquinas */
  font-weight: var(--font-weight); /* Usa la variable global para el grosor de la fuente */
  width: 50px; /* Ajusta el ancho */
}

Y esto es lo que hemos hecho:

• Definimos una variable local dentro del elemento alert:

  --bg-color: red

• Usamos la palabra clave var para acceder a esa variable local:

  background-color: var(--bg-color);

• Usamos la variable global que declaramos antes para configurar la propiedad del grosor de la fuente:

  font-weight: var(--font-weight);

Agregando código JavaScript

Podemos hacer que nuestro elemento alert responda a las acciones del usuario. Cuando hagas clic en él, aparecerá una ventana emergente en el navegador con el texto «¡Hemos usado variables CSS con JavaScript!«.

Podemos agregar JavaScript directamente al código HTML, encerrándolo entre las etiquetas <script/>. El código JavaScript debe ir después del código HTML, pero antes del cierre de la etiqueta </body>.

Agrega este código:

<script>

  const alertDiv = document.querySelector('.alert');

  alertDiv.addEventListener('click', function() {

    window.alert("¡¡¡Hemos usado variables CSS con JavaScript!!!");

  });

</script>

Ahora, tu código HTML debería verse más o menos así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cómo usar variables CSS</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <div>
        <h1>¡Hola desarrolladores front-end!</h1>
        <h2>Esto es cómo usar variables en CSS.</h2>
        <p>Sigue desplazándote</p>
    </div>
    <div class="alert">¡Haz clic en mí!</div>
    <script>
        const alertDiv = document.querySelector('.alert');
        alertDiv.addEventListener('click', function() {
            window.alert("¡¡¡Hemos usado variables CSS con JavaScript!!!");
        });
    </script>
</body>
</html>

En nuestro JavaScript, sucede lo siguiente:

• Buscamos el elemento alert usando document.querySelector().
• Asignamos el elemento alert a la variable alertDiv.
• Usamos el método addEventListener() en alertDiv para agregar el evento click.
• Usamos window.alert() para mostrar un mensaje que debe aparecer cuando ocurra el evento click.

Al renderizar la página, obtendrás lo siguiente:

Al hacer clic en el elemento alert, obtendrás esto:

Valores de Reserva de Variables CSS

¿Qué sucede si accedes a una variable que no se ha definido en tu hoja de estilo? El efecto CSS que querías aplicar no se aplicará. Los valores de reserva son los valores del efecto que se aplicarán si no puedes acceder a la variable.

Los valores de reserva pueden ser útiles en los siguientes casos:

• Si algunos navegadores no reconocen las variables CSS, la propiedad select tendrá a dónde recurrir.
• Si crees que la página funciona mal debido a una variable CSS, puedes usar un valor de reserva para verificar esa teoría.

Puede haber varios valores de reserva; puedes escribirlos separados por comas. Por ejemplo, considera este código:

:root {

  --primary-color: #007bff;

}

.btn {

  background-color: var(--primary-color, red, yellow);

  padding: 10px;

  border: none;

  border-radius: 5px;

  font-size: 16px;

  cursor: pointer;

}

Si al usar la variable global, escribes mal la palabra primary-color, lo que significa que no se declaró, se elegirá el valor de reserva red.

El siguiente ejemplo lo demostrará de forma más visual:

<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale

  =1.0"><title>Documento</title>

  <style>

    :root {

      --primary-color: #007bff;

    }

    .btn {

      background-color: var(--primary-color, red);

      padding: 10px;

      border: none;

      border-radius: 5px;

      font-size: 16px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <button class="btn">¡Haz clic en mi!</button>

</body>

</html>

Si renderizas en el navegador, obtendrás lo siguiente:

Mientras tanto, podemos tomar el mismo código y cambiar un solo carácter en el selector .btn:

.btn {

  background-color: var(--primary-colr, red); /*He escrito mal primary-color como primary-colr */

  padding: 10px;

  border: none;

  border-radius: 5px;

  font-size: 16px;

  cursor: pointer;

}

Y ahora, el navegador mostrará lo siguiente:

Uso de Valores Dinámicos y Calculados en Variables CSS

Los valores dinámicos se actualizan automáticamente en función de eventos o condiciones específicas, como la entrada del usuario.

Analicemos el siguiente código:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8"><title>Variables CSS con JavaScript</title>

    <style>

      :root {

        --color: #333; 

      }

      #color-input {

        margin-left: 1em;

      }

      #color-input {

        --color: var(--color-input);

      }

    </style>

  </head>

  <body>

    <label for="color-input">Elige un color:</label>

    <input type="color" id="color-input">

  </body>

</html>

En este código, sucede lo siguiente:

• Declaramos una variable --color con un valor predeterminado de #333 usando el selector :root.
• Usamos #color-input para seleccionar el elemento de entrada.
• El valor --color se establece como var(--color-input), lo que significa que el color se actualizará automáticamente cuando el usuario seleccione un nuevo color usando la paleta.

Los valores calculados realizan cálculos basados en otras propiedades y variables. Ilustremos esto con el siguiente código:

:root {

  --base-font-size: 14px;

  --header-font-size: calc(var(--base-font-size) * 3);

}

h2 {

  font-size: var(--header-font-size);

}

Al analizar este código, podemos decir lo siguiente:

• Tenemos una variable --base-font-size que define el tamaño de la fuente base.
• Tenemos una variable --header-font-size que es tres veces más grande que --base-font-size.
• Tenemos un selector h2 que usa la variable --header-font-size con la palabra clave var.

Como resultado, todos los h2 en la página web serán tres veces más grandes que --base-font-size.

Conclusión

Ahora ya sabes cómo usar las variables CSS para acelerar el proceso de desarrollo y escribir código que sea fácil de mantener. Puedes usar variables personalizadas junto con HTML o con bibliotecas como React.