DEV Community

Cover image for CSS Variables and why i use them
Lens
Lens

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

How about now?

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

body {
background-color: var(--Emerald-green);
}
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.




There are lots of other ways people use css variables, these are just the ways i use them as a junior web dev, so you can try these methods yourself on your own projet! I hope this blog helped you, so have a good day/night 👋.

Top comments (9)

Collapse
 
prsaya profile image
Prasad Saya

I recently used CSS variables in client-side JavaScript, e.g., document.getElementById("message").style.color = "var(--highlight)";. Also, in a ReactJS code: const rowStyle = { color: "var(--dark)" };.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Cool article, but I'd challenge the idea that custom properties would mostly be set in the :root element; one of the coolest things about custom properties is that they are part of the cascade and get inherited like most other properties, so you can use them to override things for parts of your page.

Say you have a --color custom property that's set to some "boring" colour by default, and gets used by a bunch of elements like buttons, alerts, etc. This alone could be achieved with preprocessor variables; but if you now have an area of particular interest, you can wrap it in a <div class="important"> and create an .important class that overrides the --color property to something more attention-seeking.

And once CSS Color Module Level 5 with its relative color syntax is here, things will only get more interesting in that regard.

Collapse
 
lensco825 profile image
Lens

I didn't know that, thanks for sharing!

Collapse
 
paulobcss profile image
Paul O'Brien

I would avoid using ' __emerald-green' description just as you would avoid using classes such as "emerald-green". They are too descriptive and make changes awkward.

What happen when the client changes the theme color to blue? You then have to go through all the places you've used var(--emerald-green) (which could be hundreds across hundreds of pages) rather than changing one single property/value in the :root.

Some developers would cheat (especially in a hurry) and just change the :root property value to a blue leaving all the html still saying var(--emerald-green) but displaying as blue :)

Collapse
 
vulcanwm profile image
Medea

I knew about using them for colours but didn't know I could use variables for urls.
Thanks for teaching me something new!

Collapse
 
ota200 profile image
O.T.A

Great article 👍

Collapse
 
amandaiaria profile image
Amanda Iaria • Edited

css variables are great. Instead of changing properties in a new class or in a media query you can change the property of the variable. It makes things so much cleaner.

Collapse
 
l2aelba profile image
l2aelba

Great great.

Collapse
 
sanika_tiwari profile image
Sanika-Tiwari

Great article, helped me a lot : )