CSS Variables Understanding

I am studying CSS Right, and going through that curriculum, but I’ve hit a snag. Not a snag is doing something, but rather understanding something. I do not understand the benefits of using CSS Variables, or their point. I’ve read MDN’s tutorial on them as well as the very short W3School explanation of them, and I just do not see their point. All it appears to do is cause me to add MORE lines of coding, and coding that just seems unnecessary. I just don’t see the benefit. I would desire less lines of coding, rather than more. Is there something I am missing? Is there a better explanation of them that I haven’t read other than MDN and W3School?

I understand what you mean it is more code but if u write good variables it’s pretty much the same. if you wanted a variable white for example you can call it $white.

The point of css variables is that can you change the theme of you sites by changing the variable. Let’s say your client changed their mind or you changed your mind and want another color. Then it’s much easier to just change one variable than go and change every variable.

Conclusion it may not makes sense if you make a easy website but if u have the same color for 10,20 places then variables are awesome.

1 Like

okay. definitely in that sense I can see the benefit of them. Maybe the initial write-up doesn’t seem beneficial, because of the redundancy and the additional lines, but I can see how it would make changing the look of a theme quicker than doing a “find, replace all” or needing to sift through hundreds or thousands of lines of code to change the color for each item.

Thanks :slight_smile:

It lets you define some property under a name then use that name for it everywhere, so it tends to produce less code, the code is generally more understandable, and the code is generally much easier to change/maintain. You don’t need to use variables, it’s just easier.

I would definitely say that it certainly makes it easier to change/maintain, but it does not produce less code. For example.

#brown {
background-color: brown;
}

actually has a lot less code in it than

:root {
–brown: brown;
}

#brown {
background-color: var(–brown, brown);
}

Sure, but that’s a toy example: if you only have one instance of that background colour, then there isn’t much need for it, but generally you’d have tens-hundreds of instances. Also, would more normally be something like:

:root {
–branding-base-col: brown;
}

#main-content {
background-color: var(–branding-base-col);
}

In which it is more useful to use variables even if there is only one instance, because then all brand colours would be defined in a single place

1 Like

DanCouper already explained how easy it makes things when you can just change a value in one place and have that work across the entire page. On most sites you’ll have ~3-6 colors you use, not counting some individual cases.

On your product landing page that you posted earlier, you have nearly 600 lines of code, and that’s just a simple static page. Now imagine a larger project or an enterprise-level project. It would be pretty a pretty horrid work to change all that individually. You can put anything in variables, colors are just one example, what about paddings, margins, backgrounds, shadows? You get the idea.

As for the amount of code, it’s always going to take just a few lines of code more to write variables because values themselves are just one line. You trade that for a much easier ability to maintain things that will save you hours… which in turn can be invested to write more code :stuck_out_tongue: Mixins are what you’re gonna be using to write less code.

1 Like

@ProximusDesign this is a good example of using variables:

https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a

1 Like

thanks for all the wisdom. really appreciated :slight_smile:

1 Like