¿Cómo definir variables globales en CSS?

En ocasiones nuestro nuevo sitio web puede llegar a ser tan grande y complejo o en su análisis nos damos cuenta de que no será una sola página web, si no que serán múltiples paginas web dinámicas entonces es cuando viene la necesidad de pensar en un Tema(colores y estilo de todo nuestro sitio web) que nos ayude a mantener nuestro sitio de manera fácil y rápida con el tiempo.

Y sin lugar a dudas tendremos la necesidad de definir o establecer un Tema a todo nuestro sitio web, que aunque ya existen algunas herramientas como Bootstrap no siempre se adapta a nuestras necesidades.

Uno de las cosas que mas vamos a utilizar es la definición de variables globales, y esto lo podemos lograr de la siguiente manera

/* Definición de variables globales*/
:root {
    --global-color-0: #060097;
    --global-color-1: #c10fff;
    --global-color-2: #1e293b;
    --global-color-3: #67768e;
    --global-color-4: #f9f6fe;
    --global-color-5: #FFFFFF;
    --global-color-6: #F2F5F7;
    --global-color-7: #ffcd57;
    --global-color-8: #000000;
}

/*su uso*/
#caja{
  background-color: var(--global-color-0, blue);
}

Como podemos observar la variable se define con dos guiones (–) precedentes al nombre de la variable en si y dentro de la pseudo-clase :root que es el nivel mas alto como el tag <html></html> de una página web.

Y el uso de la variable se hace con la instrucción en CSS de var(–global-color-0, blue), en caso de no existir la variable descrita utilizará el color blue.