Variables CSS

Las variables CSS, también llamadas propiedades personalizadas, son una herramienta que nos va a facilitar el trabajo a la hora de lograr coherencia entre el aspecto de los diferentes elementos de nuestro sitio Web.

Si estas familiarizado con la programación, el concepto de variable te resultará familiar. Si no es tu caso, no te preocupes y sigue leyendo, ya que es algo fácil de entender.

La importancia de la coherencia

Un fallo MUY HABITUAL cuando empezamos en el mundo del desarrollo Web consiste en ir improvisando el diseño y la apariencia del sitio Web.

Si no sabemos diseñar, es muy importante “inspirarse” en sitios Web similares al que queremos hacer. De hecho, los diseñadores también se “inspiran” en diseños de otros. Y todo el tema del diseño Web se mueve mucho por “modas”, así que es importante saber que “es lo que se lleva”.

Cuando analizamos el aspecto de un sitio Web es fácil ver que existe una coherencia y una serie de patrones que se repiten entre los diferentes elementos que la conforman.

Veamos algunos ejemplos de este tipo de coherencia:

• Los colores de las diferentes páginas de un sitio Web han de ser coherentes. El diseñador elige una gama de colores y se limita a esos colores durante el diseño de todas las páginas. Además, es perfectamente consistente usando los mismos colores, tipografías, etc. para aquellas partes del sitio Web que son similares (por ejemplo, el diseñador puede decidir que todos los títulos [h1, h2, h3…] tengan el mismo color en todas las páginas).
• Lo normal es que la mayoría de formularios de un sitio Web tengan un aspecto similar. Para un usuario puede resultar desconcertante que cada formulario Web de nuestro sitio Web muestre un aspecto diferente, con colores, tipografías, y tamaños diferentes.
• El aspecto de una miniatura de un producto: cuando en un sitio Web se muestra en una miniatura el nombre de un producto, una imagen del mismo, su precio, y un botón de “añadir al carrito”, lo normal es que siempre que se quiera mostrar una miniatura de un producto se siga el mismo diseño y aspecto.
• Si tenemos enlaces con aspecto de botón, lo normal es que todos los enlaces con aspecto de botón de nuestro sitio Web tengan un aspecto y colores similares. Es más, los botones de los formularios probablemente tendrán el mismo aspecto. Un usuario de nuestro sitio Web no tiene la necesidad de diferenciar un enlace con aspecto de botón, de un botón de enviar el formulario. Aunque para nosotros sean elementos diferentes, por coherencia, para el usuario deben de tener el mismo aspecto.

Crear nuestras propias variables CSS

Las variables CSS nos sirven para guardar valores que vayamos a reutilizar varias veces (por ejemplo, un color). Por este motivo muchas veces se las compara con un cajón donde guardamos algo.

Para definirlas debemos de darles un nombre precedido de dos guiones.

header {
  --un-color : blue;
  --otro-color : white;
}

Y para usar estos valores debemos usar la función var().

header nav {
  background-color: var(--un-color);
  color: var(--otro-color);
}

Y ya está, así de fácil. El navegador básicamente obtendrá el valor de las variables y las sustituirá por dicho valor como si hubiéramos escrito esto:

header nav {
  background-color: blue;
  color: white;
}

En este ejemplo estamos usando las variables para almacenar colores, pero en una variable podemos guardar cualquier valor de cualquier propiedad CSS.

Donde crear las variables

Podemos crear las variables usando cualquier selector, pero hay que tener en cuenta que las variables existirán solo dentro del ámbito donde han sido definidas.

Así, en el anterior ejemplo, las dos variables las hemos creado dentro del elemento header y por lo tanto solo se pueden usar dentro de dicho elemento.

Si queremos definir variables que podamos usar en cualquier sitio, lo recomendable es usar la pseudo-clase :root.

Veamos un ejemplo:

HTML:

<h1>Producto muy interesante</h1>
<p>Lorem ipsum <a href="#">amet asperiores cumque</a> aspernatur....</p>
<a href="#" class="boton">Añadir Producto</a>
<input type="submit" class="boton" value="Finalizar Compra" />

CSS:

:root {
    /* Aquí definimos variables que podremos usar en cualquier sitio. */
    /* La idea es elegir una serie de colores, tamaños, tipografías y 
       reutilizarlos durante todo el CSS para facilitar la coherencia 
       de aspecto. */
    --color-a : #842;
    --fondo-a : pink;
    --color-b : orange;
    --fondo-b : #222;
    --color-c : white;
    --fuente-a : Arial, Helvetica, sans-serif;
    --fuente-b : 'Times New Roman', serif;
    --redondeado : 5px;  
}
a {
    text-decoration: none;
    color: var(--color-b);
}
body {
    background-color: var(--fondo-b);
    color: var(--color-c);
    font-family: var(--fuente-a);  
}
h1, h2, h3 {
    font-family: var(--fuente-b);  
    color: var(--color-b);
    border-left: 4px solid var(--color-a);
    padding-left: 8px;
}
.boton {
    display: inline-block;
    background-color: var(--fondo-a);
    color: var(--color-a);
    padding: 10px 30px;
    border-radius: var(--redondeado);
    border: 1px solid var(--color-a);
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
}
/* etc... */

Además de facilitar la coherencia en el aspecto de nuestro sitio Web, otra de las ventajas de esta forma de trabajar, es que es fácil realizar cambios de aspecto. Ya que, simplemente cambiando los valores de unas pocas variables podemos cambiar el aspecto de todo nuestro sitio Web de un plumazo!