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.
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)
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)" };.Cool article, but I'd challenge the idea that custom properties would mostly be set in the
:rootelement; 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
--colorcustom 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.importantclass that overrides the--colorproperty 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.
I didn't know that, thanks for sharing!
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 :)
I knew about using them for colours but didn't know I could use variables for urls.
Thanks for teaching me something new!
Great article 👍
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.
Great great.
Great article, helped me a lot : )