Introducción a las Variables CSS

Nos adelantamos al futuro y presentamos una característica aún no soportada en la mayoría de los navegadores.

Las variables de CSS aportan muchas de las mismas ventajas que las variables clásicas ofrecen en los lenguajes de programación: conveniencia, código de reutilización, una base de código más legible, y la mejora de error-corrección.

Ejemplo

:root {
  --base-font-size: 16px;
  --link-color: #6495ed;
}
p {
  font-size: var( --base-font-size );
}
a {
  font-size: var( --base-font-size );
  color: var( --link-color );
}

Lo principal

Hay tres componentes principales que debes conocer sobre cuando utilizar variables CSS:

• Propiedades personalizadas
• La función var()
• pseudo-clase :Root

Propiedades personalizadas

Es amplio el conocimiento acerca de las propiedades estándar de CSS como  el color, margen,  anchura , y tamaño de fuente .

El siguiente ejemplo utiliza la propiedad CSS color:

body {
  color: #000000; /* The "color" CSS property */
}

Una propiedad personalizada sólo significa que nosotros (los autores del CSS) tenemos que definir el nombre de la propiedad.

Para definir un nombre de propiedad personalizada necesitamos colocar delante dos guiones ( - )

Si queremos crear una propiedad personalizada con el nombre de text-color y darle un valor de color negro (#000000 en código hexadecimal), así es como habría que hacerlo:

:root {
  --text-color: #000000; /* A custom property named "text-color" */
}

Función var()

Con el fin de aplicar nuestras propiedades personalizadas a nuestro trabajo, tenemos que usar la función var(), de lo contrario los navegadores no saben para qué son.

Si queremos utilizar el valor de nuestra propiedad personalizada  --text color en nuestras reglas de estilo p , h1 y h2, entonces tenemos que utilizar la función var() así:

:root {
  --text-color: #000000;
}
p {
  color: var( --text-color );
  font-size: 16px;
}
h1 {
  color: var( --text-color );
  font-size: 42px;
}
h2 {
  color: var( --text-color );
  font-size: 36px;
}

El ejemplo anterior es equivalente a:

p {
  color: #000000;
  font-size: 16px;
}
h1 {
  color: #000000;
  font-size: 42px;
}
h2 {
  color: #000000;
  font-size: 36px;
}

Pseudo-clase :root

Necesitamos un lugar para poner nuestras propiedades personalizadas. Podemos especificar propiedades personalizadas dentro de cualquier regla de estilo, pero muchas veces, esto no es conveniente porque la especificación de propiedades personalizadas presenta desafíos de mantenibilidad y legibilidad CSS.

La pseudo-clase :root representa el nivel más alto de nuestros documentos HTML. Este selector es un buen lugar donde poner nuestras propiedades personalizadas porque podremos sobrescribir los valores de las propiedades personalizadas a través de otros selectores CSS que tienen una mayor especificidad.

Beneficios de las Variables CSS

Mantenibilidad

Dentro de un proyecto de desarrollo web determinado a menudo reutilizamos valores de las propiedades CSS. Colores, alturas de línea, márgenes, tamaños de fuente y así sucesivamente.

He aquí un ejemplo de cuatro reglas de estilo que podrían beneficiarse de las variables CSS:

h1 {
  margin-bottom: 20px;
  font-size: 42px;
  line-height: 120%;
  color: gray;
}
p {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 120%;
  color: gray;
}
img {
  margin-bottom: 20px;
  border: 1px solid gray;
}
.callout {
  margin-bottom: 20px;
  border: 3px solid gray;
  border-radius: 5px;
}

El problema surge cuando tenemos que cambiar ciertos valores de las propiedades más adelante.

Si cambiamos nuestros valores manualmente, podría llevarnos mucho tiempo, y es muy posible que cometamos un error, sobre todo si nuestra hoja de estilos es extensa. Del mismo modo, si realizamos una búsqueda tipo encontrar y reemplazar, podríamos afectar involuntariamente otras reglas de estilo.

Podemos reescribir el ejemplo anterior utilizando variables CSS:

:root {
  --base-bottom-margin: 20px;
  --base-line-height:   120%;
  --text-color:         gray;
}
h1 {
  margin-bottom: var( --base-bottom-margin );
  font-size: 42px;
  line-height: var( --base-line-height );
  color: var( --text-color );
}
p {
  margin-bottom: var( --base-bottom-margin );
  font-size: 18px;
  line-height: var( --base-line-height );
  color: var( --text-color );
}
img {
  margin-bottom: var( --base-bottom-margin );
  border: 1px solid gray;
}
.callout {
  margin-bottom: var( --base-bottom-margin );
  border: 1px solid gray;
  border-radius: 5px;
  color: var( --text-color );
}

Ahora imagina que tu cliente te dice que el texto en la pantalla es difícil de leer porque el color del texto es demasiado claro. En este caso, sólo tendremos que actualizar una línea en nuestro CSS:

--text-color: black;

También nos permite ser más ágiles en el proceso de creación de diseños. Mientras estamos desarrollando un nuevo proyecto, podemos probar rápidamente colores, alturas de línea… y seremos capaces de ver los efectos de una manera holística.

Mejorar la legibilidad CSS

Las propiedades personalizadas pueden ayudar a que nuestras hojas de estilo sean más fáciles de leer.

Por ejemplo:

background-color: yellow;
font-size: 18px;

Frente a:

background-color: var( --highlight-color );
font-size: var( --base-font-size );

Los valores de propiedad como el yellow y 18px no nos dan ninguna información contextual útil. Pero cuando leemos los nombres de propiedades personalizadas como --base-font-size y –highlight-color , incluso cuando estamos leyendo el código de otra persona, al instante sabemos cuál es el valor de la propiedad al que se refiere.

Cosas a tener en cuenta

Sensible a las mayúsculas-minúsculas

Las propiedades personalizadas son sensibles a las mayúsculas y minúsculas (a diferencia de las propiedades regulares de CSS).

:root {
  --main-bg-color: green;
  --MAIN-BG-COLOR: RED;
}
.box {
  background-color: var( --main-bg-color ); /* green background */
}
.circle {
  BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */
  border-radius: 9999em;
}
.box,
.circle {
  height: 100px;
  width: 100px;
  margin-top: 25px;
  box-sizing: padding-box;
  padding-top: 40px;
  text-align: center;
}

En el ejemplo anterior, en realidad se definen dos propiedades personalizadas diferentes: --main-bg-color y --MAIN-BG-COLOR .

Valor Resolución  de una propiedad personalizada

Cuando una propiedad personalizada se declara más de una vez, la asignación sigue las reglas normales en cascada y herencia de CSS.

En el siguiente ejemplo, al enlace se le asigna el color rojo porque el  selector .container tiene una mayor especificidad en comparación con :root y body .

HTML

<body>
  <div class="container">
    <a href="">Link</a>
  </div>
</body>

CSS

:root {
  --highlight-color: yellow;
}
body {
  --highlight-color: green;
}
.container {
  --highlight-color: red;
}
a {
  color: var( --highlight-color );
}

Sin embargo, si eliminamos la regla de estilo .container de nuestro código, al vínculo se le asignará el color verde porque body se convierte en el siguiente selector que coincide con nuestros enlaces.

Valores de retorno

Se puede asignar un valor de propiedad de retorno cuando se utilizan las anotaciones de la función var(). Sólo es necesario aportar el valor de la propiedad de retorno como un argumento adicional delimitado con una coma (,).

En el siguiente ejemplo el elemento .box se supone se va a mostrar con un fondo negro. Sin embargo, al no ser un error tipográfico cuando se hace referencia al nombre de la propiedad personalizada, el fondo se representa utilizando el valor de retorno (es decir, de color rojo ).

HTML

<div class="box">A Box</div>

CSS

div {
  --container-bg-color: black;
}

.box {
  width: 100px;
  height: 100px;
  padding-top: 40px;
  box-sizing: padding-box;
  background-color: var( --container-bf-color, red );
  color: white;
  text-align: center;
}

Valores no válidos

Cuidado con la asignación de propiedades de CSS con el tipo de valor erróneo.

En el siguiente ejemplo, al dar una unidad de logitud a la propiedad personalizada -–small-button, su utilización dentro de la regla de estilo .small-button no es válido.

:root {
  --small-button: 200px;
}
.small-button {
 color: var(--small-button);
}

Una buena manera de evitar esta situación es utilizar nombres de propiedad personalizada descriptivos. Por ejemplo, nombrando a la propiedad personalizada anterior --small-button-width asegura que no se produzca un uso indebido.

Soporte de las variables CSS en los diferentes navegadores

Última actualización: marzo de 2015.

Escritorio

Móvil