Who should manage CSS colour variables in a web project? Design or Front-End?

1. Where do I put CSS variables?
2. What is the proper way to declare variable in CSS?
3. Are CSS variables scoped?
4. Should I use CSS variables?

Where do I put CSS variables?

First of all: CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared. To create a variable with global scope, declare it inside the :root selector.

What is the proper way to declare variable in CSS?

To declare a variable in CSS, come up with a name for the variable, then append two hyphens (–) as the prefix. The element here refers to any valid HTML element that has access to this CSS file. The variable name is bg-color , and two hyphens are appended.

Are CSS variables scoped?

Declaring Global CSS Variable

CSS Variables can have a global scope and a local scope. When you declare a CSS variable in a global scope, it can be accessed throughout the entire document.

Should I use CSS variables?

CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. They can be useful for reducing repetition in CSS, and also for powerful runtime effects like theme switching and potentially extending/polyfilling future CSS features.