Blog

Intro a las variables. ¿Qué son?

Si alguna vez has trabajado con código antes ya debes estar familiarizado con el concepto de las variables. Podríamos imaginar que son cajas con nombre donde guardamos datos. Podemos acceder, extraer y reemplazar los contenidos de estas cajas. Las variables son elementos nucleares de cualquier lenguaje de programación, pero no tanto en los lenguajes de marcado −comoe es HTML5− ya que estos lenguajes son simples instrucciones que han de ser interpretadas, y no computan ni calculan cosas.

Lo mismo puede aplicarse al CSS como lenguaje declarativo, una herramienta usada por la mayoría para hacer una web bonita, separando la parte visual de la estructura de contenido. Por eso se hicieron populares los preprocesadores de CSS (como LESS ySASS): hacen que escribir CSS sea mucho más fácil puesto que nos permiten el uso de variables, funciones y aportan un sistema de anidamiento para las clases que resulta mucho más legible.

Los preprocesadores de CSS son geniales para proyectos de gran escala, pero puede ser como matar moscas a cañonazos si lo único que necesitas es estilar rápidamente una landing page, o jugar con un nuevo tema visual en tu web: te complican el flujo porque necesitan compilar el CSS e incrementan el peso del proyecto.

Ahora bien, eso no significa que no mejorar tu flujo de trabajo de estilos con puro CSS. CSS3 nos aporta una manera de trabajar con variables: las propiedades personalizadas / custom properties y la función var() .

---

Custom properties ( – – *) y la función var().

En CSS podemos usar las custom properties de una forma similar a como se utilizan las variables en otros lenguajes.

Para los puristas, las variables de CSS no son realmente variables, sino más bien «propiedades inválidas» (ya que no pintan nada por su cuenta) cuyo valor se usa cuando son llamadas en otras partes del código mediante el método de CSS var(). Por ello, necesitan seguir unas reglas de sintaxis.

En breve las veremos en acción, pero primero…

¿Qué es lo principal que necesitas saber?

• Las propiedades personalizadas que damos de alta tienen que escribirse con dos guiones antes del nombre que quieras darles. A continuación debes especificar un valor como harías con cualquier otra propiedad de CSS, unidades incluidas. Por ejemplo:

--my-custom-color: #1b1b1b;
--my-custom-margin: 20px 10px;
--my-custom-font: 'Open Sans', sans-serif;
--my-custom-transition: all ease 0.3s;

• Distinguen entre mayúsculas y minúsculas, así que hay que tener cuidado al nombrarlas. ¿Nuestro consejo? Olvídate del camel case (escribirAsiLosNombres) y usa sólo kebab (escribir-asi-los-nombres) o snake case (escribir_asi_los_nombres).

/* Presta atención cuando las escribes, estas propiedades son diferentes */ 
--col-padding: 20px 15px;
--col-Padding: 40px 20px;

• Visto que son propiedades, sólo pueden definirse dentro de los elementos. Podemos hacer que sean globales si las definimos en los elementos :root o body −lo que implica que podremos referirnos a ellas desde otros elementos del código−.

:root {
--color-text: #363636;
--color-accent: #64ccc9;
--font-base: Montserrat, sans-serif;
--font-display: Lobster, serif;
--col-padding: 20px 15px;
}

• Podemos sobrescribirlas a lo largo de la cascada de CSS, es decir: se ajustan a las reglas de prioridad del CSS.

/* Puedes actualizar el valor de estas propiedades en los elementos anidados */
body {
--standard-line-height: 1.5;
}
p.info {
--standard-line-height: 1.25;
}

• No sirven de nada por su cuenta. Necesitamos invocarlas usando el método var().

/* Tienes que llamar a las propiedades personalizadas usando el método var() */

body {
--standard-line-height: 1.5;
line-height: var(--standard-line-height); 
/* Ahora el body tiene una altura de línea de --standard-line-height, o sea: 1.5 */
}

p.info {
--standard-line-height: 1.25; 
/* El p.info hereda la altura de línea que equivale a
 --standard-line-height, pero la variable ha sido actualizada  
a nivel de este elemento, de modo que es 1.25 */
}

• No tienen ningún modo de validación ni tipado. Sólo tú eres responsable del uso correcto de las propiedades personalizadas al invocarlas como valores.

/* Si tenemos... */
:root {
--color-text: #363636;
--font-base: Montserrat, sans-serif;
--custom-padding: 20px;
}

/* ...esto serán VALORES NO VÁLIDOS... */
h1 {
border: var(--color-text);
font: var(--font-base);
padding: var(--color-text);
}

/*...pero esto tiene sentido y funcionará bien. */
h1 {
border: 1px solid var(--color-text);
font-family: var(--color-text);
padding: var(--custom-padding);
}

• Puedes escribir código a prueba de fallos usando los «fallbacks» o, dicho de otro modo, dar una opción de «backup» para cuando el valor de la variable invocada no es válido. Puedes añadir otra opción u opciones como parámetros en var(). Cualquier cosa entre la primera coma y el final de la función será el fallback, como:
  var(–my-custom-property, fallback);

/* En este caso, si --color-text no ha sido definido o no es un color válido,
el color final de este h1 será #333 */
h1 {
color: var(--color-text, #333);
}

/* Los fallbacks se pueden complicar todo lo que queramos, 
ya que podemos usar otras variables como fallbacks: */
/* Aquí el orden de prioridad es el que sigue:
1) --my-custom-color
2) --backup-for-custom-color
3) ---backup-for-backup-color
4) black */
h1 {
color: var(--my-first-custom-color, var(--backup-custom-color, var(--backup-for-backup-color), black));
}

---

Ventajas del uso de las variables CSS.

Ok, ya sabemos cómo dfuncionan ahora pero… ¿cómo pueden mejorar tu vida tus estilos? Aquí tienes las principales mejoras que consigues.

---

Cómo montar una hoja de estilos eficiente alrededor de variables CSS.

Seguramente no existe ninguna receta mágica para crear la hoja de estilos universal y perfecta. A través de los años, he leído y escrito CSS de formas muy distintas, y todavía sigo evolucionando con cada nuevo proyecto. Sin embargo, creo que he encontrado una estructura óptima para mí alrededor del uso de las variables de CSS. ¡Espero que pueda serte útil a ti también! Va de esta guisa:

1) Empieza con una paleta de requerimientos de estilos/marca en el :root.

Esto es especialmente útil para mí, como persona que tiene un importante trasfondo en lo visual, pero no necesitas saber gran cosa de diseño para empezar con esto. La idea es que vas a tener queimaginar las piezas que necesitas para construir un front de lamarca. Pregúntate cosas como:

• ¿Voy a usar más de una fuente para esta web? ¿Quizás una para los títulos y otra para los contenidos?
• ¿Cuántos colores diferentes debería tener?
• ¿Quiero cubrir tanto esquemas de fondo claro como de fondo oscuro? etc.

Entonces, poco a poco, ve creando y nombrando esas propiedades en el elemento :root.

:root {
--color-accent: #64ccc9;
--color-text: #1b1b1b;
--font-size: 16px;
--font-basic: 'Open Sans', Helvetica, Arial, sans-serif;
--container-max-width: 800px;
...
}

¡Todavía no tienes que añadir los valores definitivos! Usa simplemente valores temporales. Esto es importante porque a veces vas a tener que empezar a escribir código sin tener todavía las especificaciones de diseño, pero también porque hará mucho más sencilo que puedesa reutilizar tu CSS en otros proyectos. ¡Se verde! Escribe tu código como algo reciclable..

2) Ve de lo general a lo específico: comienza con los elementos básicos de HTML.

El siguiente paso es comenzar a aplicar los valores personalizados que has definido a la estructura general de tu web. Empieza por los elementos padre y los más genéricos, ahondando poco a poco en los detalles. Por ejemplo, considera qué aspecto quieres que tengan las cosas a nivel global:

• Texto genérico (para el body y los párrafos p), color del texto, tipografías, tamaño inicial del texto, altura de línea, …
• Diferencias de tamaño entre títulos, espaciados, colores, subrayados o decoraciones.
• Comportamiento de los enlaces con las pseudoclases.
• Transiciones en los cambios de estado, etc…

No uses clases personalizadas todavía. La idea es dar estilo a la estructura inicial sólo con los tags de HTML. Atiende las necesidades del body y sus elementos.

body {
font-family: var(--font-basic, sans-serif);
color: var(--color-text);
line-height: var(--line-height-basic);
}

h1, h2, h3, h4 {
font-family: var(--font-display, var(--font-basic, sans-serif));
font-weight: var(--font-bold, 700);
}

a, a:link, a:visited {
color: var(--color-accent, darkturquoise);
}
a:hover, a:active {
color: color: var(--color-accent-2, darkcyan);
}

...

Mientras estilas esas etiquetas y otras más específicas, sin duda te vas a encontrar la necesidad de nuevas propiedades personalizadas que hasta el momento no habías pensado. Eso es normal. Vuelve al inicio de tu código y sírvete añadiendo variables descriptivas, pero intenta no sobrecomplicar las cosas.

3) Define una estructura de cuadrículas o layout.

En caso de que no estés usando ningún framework para esto y quieras ir a tope con flexbox o CSS grid, ahora es el momento de empezar a crear las clases que definan los elementos del layout en tu diseño:

• los contenedores principales,
• cabeceras, menús de navegación, pié de página,
• cómo deben comportarse las filas y columnas, etc.

:root {
...
--container-max-width: 800px;
}

.container {
max-width: var(--container-max-width, 80%);
margin: 0 auto;
}

4) Media queries antes de que sea «demasiado tarde».

Antes de que las cosas se vuelvan muy íntimas anidadas, recomiendo fervientemente que consideres cómo se va a comportar tu web en distintos dispositivos. Es el momento de re-estilar o arreglar el layout y los elementos básicos de HTML para que tengan buena pinta en otras resoluciones. Dentro de las media queries puedes actualizar las variables que necesites que cambien con valores más apropiados para pantallas más o menos grandes. Véase:

/* Small devices */
@media (min-width: 576px) { 
--container-max-width: 100%;
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
/* Our reference size, the global value fits so no update*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
--container-max-width: 1000px;
}

5) Clases personalizadas para comportamientos personalizados que se repiten.

Ya hemos hecho algo general y «responsive». ¡Genial comienzo! Pero ahora tenemos que trabajar con componentes que pueden necesitar algunos cambios particulares. Es un buen momento ahora para crear algunas etiquetas de clases adicionales que nos permitan personalizar los elementos sobre la marcha en el HTML, mientras mantenemos una estructura simple de CSS. Éste es un paso que nos ayudará a evitar volvernos muy específicos a nivel de componentes.

Por ejemplo, mientras diseñas el componente te das cuenta de que quieres que un subtítulo en concreto esté en otro color de la paleta, pero no el que le toca por defecto. ¿Cuál es la mejor forma de solucionarlo? En lugar de crear otra regla para ese subtítulo o una clase particular para ello, simplemente atomiza esas necesidades en etiquetas sueltas y aplícalas conforme las necesites. Crea cosas como:

.text-bold {
font-weight: var(--font-bold, bold);
}

.text-accent {
color: var(--color-accent, bold);
}

.text-white {
color: var(--color-lightest, white);
}

/* Small devices */
@media (min-width: 576px) { 

.text-smaller-mobile {
font-size: calc( var(--font-size, 1rem) * 0.8 );
}

}

6) Los casos más específicos: clases personalizadas para los componentes.

Por fin podemos meter estilos detalladamente a nuestros componentes, usando las variables globales existentes y creando además nuevas propiedades para dichos elementos conforme las necesitemos.

Aquí puedes elegir entre definir estas nuevas variables a nivel global, para que sean más sencillas de cambiar llegado el momento, o definirlas a nivel del componente. La última opción tiene sentido especialmente cuando trabajas con frameworks y no cuando haces tu web en puro HTML, ya que un componente y sus estilos sólo deberían estar disponibles en caso de que el componente se incluya, evitando así el cargado innecesario de CSS en el caso contrario.

.magazine-grid {
display: flex;
--mag-grid-column: 33%;
}

.magazine-grid .mag-item {
max-width: var(--mag-grid-column);
}

.magazine-grid .mag-item .title {
...
}

.magazine-grid .mag-item .thumbnail {
...
}

.magazine-grid .mag-item .abstract {
...
}

---

Ejemplo en vivo: un playground de variables CSS.

Como dicen, una imagen el código en vivo vale más que mi palabras (al menos, cuando lo refactorizas). Aquí tienes un pequeño fiddle con el que jugar con lo que hemos visto hasta ahora. Te invito a cambiar los valores en la definición de las variables al inicio del CSS y ver cómo cambia la web. Rápido y limpio, ¿no?

---

Consejos finales para un mejor uso de las variables CSS.

He aquí algunas consideraciones a modo de cierre del artículo que pueden ser de utilidad. Quizás te hayas preguntado…

– ¿Es buena idea usar variables para todo?

Mejor NO. Las variables son herramienta útiles para que tu código sea más escalable y fácil de cambiar, pero definirlas y llamarlas lleva más tiempo que simplemente ir escribiendo estilos sobre la marcha. También, abusar de ellas complica mucho el código, mandando al garete nuestra idea de usar valores semánticos para que éste sea más legible. La clave de la eficiencia es encontrar un buen equilibrio entre lo que se va a necesitar con frecuencia y los casos particulares.

– Corolario: deberían todos los var() tener un fallback?

Pues no, tampoco. Es importante que protejas tu código contra valores potencialmente inválidos, pero no todos los casos son igualmente importantes, ni siquiera necesarios, y los fallbacks también implican tiempo.

Si trabajas de una manera atómica (como funcionan la mayoría de frameworks de front end) con diferentes hojas de estilos, entonces en el proceso de la combinación de estos ficheros y el orden entre elementos se puede perder información si las definiciones no han sido claras. Es una buena práctica considerar siempre un fallback para esos casos, especialmente para componentes que pueden tener un mal funcionamiento cuando heredan los estilos del padre. Por ejemplo, cuando tienes un bloque con un fondo oscuro en un esquema generalmente luminoso, poner un fallback a blanco asegura que siempre será legible su texto.

Si, en otro caso, estás definiendo todas las variables a nivel global en una misma hoja de estilos, o te aseguras de que todos los componentes están conectados con una paleta común que les provee de estas variables, ¿para qué molestarse? Es más importante que compruebes errores en las versiones en vivo y prestes especial atención al tipo de valor que estás llamado, de manera que no acabes, por ejemplo, teniendo un font-size de ‘Times New Romans’. Y para evitar ese último caso…

– ¿Cómo debería nombrar a mis variables?

Tomarse el tiempo necesario para nombrar loe elementos de código correctamente es una parte importante del desarrollo, y es un favor que haces a los demás, y a tu yo del futuro. Al margen de ser descriptivasy claras, cuando uso variables CSS, sobre todo las globales, me es útil comenzar a nombrarlas con aquello que hace que sus valores sean comunes. Por ejemplo, es más fácil de recordar si todos tus tonos de colores comienzan con la misma palabra: –color-dark, –color-accent, –color-alert en lugar de dark-color, accent-color o alert-color. Sin embargo, si las variables van a ser específicas para un elemento, yo encuentro mejor agruparlas con el nombre del mismo: como –h1-font, –h1-color, –h1-padding, etc. Al final, lo que importa es que los nombres ospermitan a ti y a otros recordar fácilmente qué contiene cada variable, de una manera ordenada.

– Variables CSS, LET o CONST?

Desde EC6, Javascript añadió dos definiciones más específicas para la declarción de variables: let y const. Mientras que let se acerca más a la idea tradicional de una variable que puede ser redefinida y actualizada, const alude a aquellas variables que deberían mantenerse constantes. Con esta alegoría de código lo que me gustaría es abrir el debate: ¿deberían las variables CSS poderse actualizar a lo largo del anidamiento de los elementos o ser definidas como valores globales constantes?

En mi personal e intrasferible opinión,considerar las propiedades personalizadas como constantes es más beneficioso, por una cuestión de claridad y coherencia. También permite cambios mucho más rápidos ya que no tienes que cubrir todo el código buscando dónde has reescrito los valores iniciales cuando quieres renombrar o modificarlos. Mi excepción favorita para esto sería actualizar las variables dentro de las media queries, pero también a un nivel global.

---

A modo de resumen, estas elecciones y procesos son los que se ajustan mejor para mi flujo de trabajo, pero quizás tú encuentres otros modos de aplicar variables CSS en tu actual sistema. ¡Te toca andar tu propia senda!

Nos encantaría leer sobre cómo las variables han hecho más fácil aplicar estilos en vuestros casos. Cuéntanos sobre tu experiencia en los comentarios, aquí a continuación. Nos encantará también responder a cualquier pregunta o tema que queráis compartir. ¡Siéntete libre de escribir y preguntar!

Muchas gracias por tu tiempo. ¡Nos vemos pronto!