What is the use of CSS Variables?

I came across an example in freeCodeCamp about the CSS Variables.
It seems like we can use it to assign colors or attributes to those variables and use it somewhere else. But I cannot find if it is useful enough. Can anyone help me understand how convenient it is to use CSS variables?

Reusability. Let’s say you want your borders and titles to be the same color. Do you want to have to copy-paste an arbitrary color code for every style definition or just use a name you chose? Then think about this: what if you want to change the border and title color from pink to green. Do you want to go tracking down that pink color code everywhere, or just change it on one line.

1 Like

It makes your CSS simpler and easier to maintain.

If you want to change your colour scheme entirely, CSS variables let you change it at the declarations once, rather than having to change it everywhere in your code.

1 Like

Oooh. I like that. Variables let you use same styles on different elements, conveniently.

Yup. It’s a really nice feature.