📚 CSS Variables and why i use them

What are they?

Like in most programming languages, CSS variables are used to store a value or property. You would mostly make them root scoped, meaning you make a :root psuedo class and make the variables in them. To make the variables you type -- followed by the name, then you type what the value is. As an example we can make a variable that stores the color black by typing --black: #0000 in the root. You use them by typing var() css function and type their full name in it, for example if we wanted to set a text's color to black we would type color: var(--black). You can also upadate the value of the variable locally, meaning you can change them in different selectors.

Helps find colors

A common way web developers use css variables is to store colors. Say that your making a big website with lots of different hex colors. It would take a long time just to re-type the hex colors you used onto multiple selectors, plus it'll be harder to show others the colors your using (like in a code snippet). With CSS variables we can store all of our hex, rgb, or hsl colors and name them the specefic color that they are. Here's an example:

Can you quickly know the background color of the body?

body {
background-color: #06D6A0;
}

How about now?

:root {
--Emerald-green: #06D6A0;
}

body {
background-color: var(--Emerald-green);
}

This shows that with CSS variables people can better understand the specefic colors your using, and it'll be easier for the web developer to type in the color they want instead of having to memorize the hex color.

Shortening image links

If you've ever imported an image from the internet and used it for the backgroud image of something you'll know that the URL is pretty long taking up lines of your css. I deal with this by making an external css file where i store all my images and svg's in variables. I then import that file into my main css file and call the variables to be the background images for my div's. I've been using this method for a week now, and i think its useful for when your blogging and using code snippets or when you have really big projects with lots of images, so the css in the main file will be shorter and easier to understand. It's of a way to clean your code then to lower your bundle size. Here's an example:

Could you tell me the background image of the body?

body {
background-image: url('https://images.unsplash.com/photo-1606567595334-d39972c85dbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80');
}

How about now?

@import "images.css";

/*Say that we stored a picture of a bird
in a variable on images.css*/

body {
background-image: var(--bird);
}

As you can see CSS variables shorten our main code by a high amount, and since we imported the css from our image css file we got all of its variables as well.