Introducción

Hace un tiempo que los ficheros css permiten gestionar valores de la estética de la web mediante variables. Esas variables se pueden definir en otro fichero css, como por ejemplo en variables.css, o en el propio fichero css en el que tenemos todo el estilo de nuestra web.

Da igual como decidamos hacerlo porque el funcionamiento será el mismo.

Código

Todas nuestras variables deben estar encapsuladas dentro de la etiqueta :root y precedidas por --, quedando de la siguiente manera:

:root {
  --main-bg-color: #0000
}

Esta etiqueta root siempre debe estar antes del código css en el que usaremos las variables, esto quiere decir que si lo importamos en el HEAD de nuestra web, se debe importar antes que el fichero css en el que se usarán las variables:

<link rel="stylesheet" href="variables.css">
<link rel="stylesheet" href="mystyle.css">

Otra forma es usando en @import dentro de nuestro mystyle.css:

@import 'variables.css';

Si en nuestro caso no queremos tener dos ficheros y únicamente usar el mystyle.css las primeras líneas de ese fichero deben ser la etiqueta :root, quedado de la siguiente manera:

:root {
  --main-bg-color: #0000
}

.fondo {
  background-color: var(--main-bg-color);
}

Conclusión

Si no queremos usar scss u otros sistemas de estilos con más funcionalidad o queremos hacer más fácil trabajar con ficheros css muy largos y en los que para cambiar un color se deben editar varias etiquetas, debes usar variables y verás como la complejidad a la hora de editar el estilo de tu web es mucho más sencillo.