Using CSS variables / custom properties

[OBXjuggler]

i did some research before this post

i am having trouble understanding CSS variables / custom properties… how they work and how they are beneficial and when i should use them

i would appreciate some (substantial) explanations

and a few novice examples

go slow for me

i am new to this concept

thanks!

[tracknut]

I use CSS variables quite a bit, and looking over a web site, I seem to use them for two purposes. There are likely other good reasons to use them, but I’m just telling you this is what I use them for.

1. I hate “magic numbers”, whether buried in my CSS, my JS, or my PHP. So I try to extract them from everywhere else and put them in as CSS variables (and in PHP as PHP Constants). So for example, I have a fair number that look like:

--body-top-border:15px;	/* Top margin size of dark border (goes away as browser shrinks) */
--button-color:#DDD;	/* Color for all tab and button links */
--box-padding:3px;		/* Padding for any text box */

This type of variable is used in my CSS, as:

body {margin-top:var(--body-top-border)}
article {padding:var(--box-padding);color:var(--text-color)}

where for the body element, I’m not really saving anything, but I’ve extracted the magic “15px” value that would otherwise be buried in my CSS, and put it into the block of CSS variables. For the article padding, I’ve used it in many places, so that all my boxes have the same padding and I just declare the value of 3px once. There are other ways one could do this of course, with a class like “.thinPadding” that could be added to each of my boxes, but I find the CSS variable quite handy for this. Also if I’m looking at my site and decide that the padding should be a bit thicker, I can just go to the CSS variable and change it in one place.

2. The second usage of CSS variables is for computed values that can be turned into a single variable, to make my life simpler. I don’t use this nearly as much as the first usage, but as an example:

--default-box-content:calc(var(--box-size) - 2 * var(--box-padding));

This would allow me to define some other CSS value like this, without needing to remember the details of what that box looks like:

#messageContent {width:var(--default-box-content)}

I hope those examples help.

[PaulOB]

@OBXjuggler

i am having trouble understanding CSS variables / custom properties… how they work and how they are beneficial and when i should use them

They are commonly used to set up a default theme (or themes) in your project where you can set all the site colors as variables in the :root at the start of the css. Then when you want to change a color sitewide you only have to update one css variable and not thousands of rules all over the site. You can do the same for fonts etc and maybe default padding margins where applicable.

Look at the css in any framework and you will see how they have set up their CSS custom properties.

[OBXjuggler]

thanks to you both!

i get it now!

i know how to write CSS variables, how to place them in my code, and i understand how they work!