Cómo utilizar variables en CSS y agilizar su estilo

La mayoría de los sitios web utilizan CSS para pulir su aspecto y dar estilo a los distintos componentes de la página web. CSS, u hoja de estilo en cascada, no es técnicamente un lenguaje de programación. Sin embargo, CSS puede utilizarse con lenguajes de programación como JavaScript para crear páginas web interactivas y con capacidad de respuesta.

Si ha utilizado lenguajes de programación, como JavaScript, sabrá que puede declarar una variable, asignarle un valor y reutilizarla en diversas partes de su código. La buena noticia es que puede aplicar el mismo concepto en CSS.

Este artículo definirá las variables CSS, describirá sus ventajas y le mostrará cómo declarar y utilizar una variable en CSS.

¿Qué son las variables en CSS?

Las variables CSS son propiedades personalizadas que permiten a los desarrolladores web almacenar valores que pueden reutilizar a través de la hoja de estilos. Por ejemplo, puede declarar el estilo de fuente, el color de fondo y el tamaño de fuente que puede reutilizar con elementos como encabezados, párrafos y divs en su código base.

¿Por qué utilizar variables CSS? Estas son algunas de las razones;

• Facilita la actualización del código: Una vez que declara una variable, puede reutilizar toda su hoja de estilos sin necesidad de actualizar manualmente cada elemento.
• Reduzca la repetición: A medida que su base de código crezca, descubrirá que tiene clases y elementos similares. En lugar de escribir código CSS para cada elemento, puede utilizar simplemente variables CSS.
• Hace que su código sea más mantenible: El mantenimiento del código es importante si quiere que su empresa siga funcionando.
• Mejora la legibilidad: El mundo moderno fomenta la colaboración. El uso de variables en CSS da como resultado una base de código compacta y legible.
• Facilita el mantenimiento de la coherencia: Las variables CSS pueden ayudarle a mantener un estilo coherente a medida que crece su código fuente o aumenta el tamaño de su aplicación. Por ejemplo, puede declarar los márgenes, el relleno, el estilo de fuente y los colores que se utilizarán en sus botones en todo el sitio web.

Cómo declarar variables en CSS

Como ya sabe qué son las variables en CSS y por qué debe utilizarlas, podemos seguir adelante e ilustrarle cómo declararlas.

Para declarar una variable CSS, comience con el nombre del elemento, luego escriba dos guiones (-), el nombre deseado y el valor. La sintaxis básica es

element {

--variable-name: value;

}

Por ejemplo, si desea aplicar relleno en todo el documento, puede declararlo como;

body { 

--acolchado: 1rem;

}

Ámbito de las variables en CSS

Las variables CSS pueden tener un ámbito local (accesible dentro de un elemento específico) o global (accesible en toda la hoja de estilo).

Variables locales

Las variables locales se añaden a selectores específicos. Por ejemplo, puede añadirlas a un botón. Este es un ejemplo;

.button {

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

 }

La variable de color de fondo está disponible en el selector de botón y sus hijos.

Variables globales

Una vez declaradas, puede utilizar variables globales con cualquier elemento de su código. Utilizamos la pseudoclase :root para declarar las variables globales. Así es como las declaramos

:root {

 --primary-color: gris;

 --secondary-color: naranja;

 --font-weight: 700:

 }

En el código anterior, puede utilizar cualquiera de las variables declaradas con distintos elementos, como encabezados, párrafos, divs o incluso todo el cuerpo.

Cómo utilizar variables en CSS

Crearemos un proyecto con fines de demostración y añadiremos los archivos index.html y styles.css.

En el índice de archivos . html, podemos tener un div sencillo con dos encabezados ( h1 y h2) y un párrafo (p).

<div>

 <h1>¡¡¡¡Hola Front-end Dev!!!!</h1>

 <h2>Así se utilizan las variables en CSS.</h2>

 <p>Siga desplazándose</p>

 </div&gt>

En el archivo style.css, podemos tener lo siguiente;

:root {

 --primary-color: gris;

 --secondary-color: naranja;

 --font-weight: 700:

 --font-size: 16px;

 --font-style: cursiva;

 }

 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);

 }

Cuando se renderice la página web tendremos lo siguiente;

En el código anterior, hemos declarado variables globales en el elemento :root. Debemos utilizar la palabra clave var para utilizar la variable global en cualquiera de nuestros elementos. Por ejemplo, para aplicar el color de fondo que hemos declarado como variable global, presentamos nuestro código de la siguiente manera;

color-de-fondo: var(--color-principal);

Compruebe el resto de elementos y observará una tendencia en la forma de aplicar la palabra clave var.

Utilizar variables CSS con JavaScript

Utilizaremos variables locales y globales para ilustrar cómo utilizar variables CSS con JavaScript.

Podemos añadir un elemento de alerta a nuestro código existente;

<div class="alert">¡Hágame clic!</div>

Nuestro nuevo documento index. html será el siguiente;

<div>

 <h1>¡¡¡¡Hola Front-end Dev!!!!</h1>

 <h2>Así se utilizan las variables en CSS.</h2>

 <p>Siga desplazándose</p>

 </div>

 <div class="alert">¡Hágame clic!</div&gt>

Podemos dar estilo a nuestra variable. Añada el siguiente código a su código CSS existente;

.alert {

 --bg-color: red; /* Defina la variable local */

 background-color: var(--bg-color); /* Utilice la variable local para el color de fondo */

 padding: 10px 20px;

 border-radius: 4px;

 font-weight: var(--font-weight); /*Utilice la variable global para el peso de la fuente*/

 width: 50px;

 }

Hemos hecho lo siguiente

• Definida una variable local dentro del elemento de alerta;

--bg-color: rojo

• Hemos utilizado la palabra clave var para acceder a esta variable local;

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

• Utilizado la variable global que declaramos anteriormente como nuestro font-weight;

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

Añadir código JavaScript

Podemos hacer que nuestro elemento de alerta responda; cuando haga clic en él, aparecerá una ventana emergente en su navegador que dirá; "¡¡¡¡Hemos utilizado variables CSS con JavaScript!!!!“.

Podemos añadir código JavaScript directamente al código HTML encerrándolo mediante etiquetas <script/>. El código JavaScript debe ir después del código HTML, pero antes de cerrar la etiqueta </body>.

Añada este código

<script>

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

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

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

 });

 </script&gt

Su código HTML debería ser ahora algo parecido a esto;

Nuestro JavaScript hace lo siguiente;

• Utilice document.querySelector() para localizar el elemento de alerta.
• Asignamos al elemento de alerta una variable alertDiv.
• En el alertDiv, utilizamos el método addEventListener () para añadir un evento 'click'.
• Utilice window.alert () para mostrar un mensaje cuando se produzca el evento de clic.

Cuando se renderice la página, tendrá lo siguiente;

Cuando haga clic en la alerta, obtendrá lo siguiente;

Valores Fallback en Variables CSS

¿Qué ocurre cuando hace referencia a una variable no definida en su hoja de estilos? El efecto CSS que pretende aplicar no se aplicará. Los valores fallback ofrecen un valor de un efecto que aparecerá en lugar de la variable no referenciada.

Los valores fallback son útiles de las siguientes maneras;

• Si ciertos navegadores no entienden las variables CSS, la propiedad seleccionada puede tener algo a lo que recurrir.
• Si sospecha que una página no funciona como se esperaba debido a una variable CSS, puede utilizar un valor Fallback para comprobar si es cierto.

Puede tener más de una propiedad fallback, separadas por comas. Tome este código, por ejemplo

: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 escribe mal la palabra primary-color al utilizar la variable global, lo que significa que no está declarada, elegirá el rojo, el valor Fallback.

Podemos demostrarlo mejor con este código

<!DOCTYPE html>

<html lang="en">

<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">¡Hágame clic!</button>

</body>

</html&gt>

Si lo renderiza en el navegador, obtendrá esto;

Sin embargo, podemos obtener el mismo código y cambiar sólo un carácter en el selector del botón de la siguiente manera;

.btn {

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

 padding: 10px;

 border: none;

 border-radius: 5px;

 font-size: 16px;

 cursor: pointer;

 }

El navegador mostrará ahora esto;

Utilizar variables de valor dinámico y valor calculado en CSS

Los valoresdinámicos se actualizan automáticamente en función de determinados eventos o condiciones, como las entradas del usuario.

Estudie este 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">Elija un color:</label>

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

 </body>

</html&gt>

El código anterior hace lo siguiente;

• Declaramos una variable --color con un valor por defecto de #333 utilizando el selector :root.
• Utilice #color-input para seleccionar el elemento de entrada.
• El valor de --color se establece en var(--color-input), lo que significa que el color siempre se actualiza cuando el usuario elige un nuevo color utilizando el selector de color.

Losvalores calculados realizan cálculos basados en otras propiedades o variables. Podemos ilustrarlo utilizando este código;

:root {

 --base-font-size: 14px;

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

}

h2 {

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

}

De este bloque de código, podemos observar lo siguiente;

• Tenemos --base-font-size variable que define el tamaño de fuente base.
• Tenemos --header-font-size, que es 3 veces el valor de -base-font-size.
• Tenemos un selector h1 que utiliza var con --header-font-size.
• Así, todos los h1 de la página web tendrán el triple del tamaño de --base-font-size.

Recapitulando

Ahora ya sabe cómo utilizar las variables CSS para acelerar el proceso de desarrollo y escribir código fácil de mantener. Puede utilizar variables personalizadas con HTML y bibliotecas como React. Eche un vistazo a los diferentes enfoques que puede utilizar para dar estilo a React utilizando CSS.

Puede consultar el código fuente aquí.