I'm struggling to find a genuine use case for CSS Variables

[CuriousFullStacks]

I’m going through the City Skyline project in the Responsive Web Design course and wondering why you’d use a variable like the one being taught over just having selectors grouped into one section, to set the same background color.

For example, is there any genuine reason to setting a variable once and applying it to each class/ID, over just grouping the selectors that you want to have that specific trait?

[hbar1st]

There is probably more than one reason for this but the first reason I thought of is that the css file is not always man-made.
Sometimes it is generated and it is easier to use variables in that case.

[hbar1st]

another reason is if you are creating a stylesheet for a big site
and multiple developers are working to create mutliple sections but they all need to look and feel the same way
So you can define a stylesheet with all the variables and everyone can use it as needed.

[miketandy]

CSS variables are very useful and are frequently used in professional contexts.

It means you can easily change things like your colour scheme, fonts or any other design elements across your entire website/app, simply by changing one line of code.

[FKlusmann]

The same question was in my head. I think that this project wanted us to get used to the idea that css variables exist and a feel for using them. When using one .css file for many pages, grouping variables at the top made more sense to me. Then I see them used in calculating values for media queries. Here is what I an using today:

     :root { 
       --rb-blue: LightBlue; /* root background */
       --rb-gray: LightGray;
       --rf-blue: blue;      /* root font */
       --rf-green: green;
       --rf-brown: Maroon;
       background-color: var(--rb-blue);
       padding: 25px;
     } 

I found this link interesting: Using CSS Media Queries and Variables for Responsiveness - Dillion's Blog
I hope this helps.
– Fred

[miketandy]

Exactly this. You define your design system in one place.

Although as a rule of clean code variable names should always be as explicit as possible, so ‘bg-blue’ would be clearer than ‘rb-blue’ and ‘text-blue’ would be clearer than ‘rf-blue’.

By naming variables in an explicit way you remove the need to comment your code in this manner, and is considered best practice. The variable name should always be explicitly descriptive of what that variable is.

[FKlusmann]

Thanks, @miketandy . I agree with you about the naming. I used these names for a test project. I think that I will post it here with a request for comments.
– Fred