Jude's blog
CSS Variables: The Secret Weapon for Easy and Less Redundant Styling!

CSS Variables: The Secret Weapon for Easy and Less Redundant Styling!

Learn how to enhance your styling capabilities using the untapped power of CSS variables.

Mba-Atanga Jude's photo
Mba-Atanga Jude
·

6 min read

Table of contents

Have you ever been styling your webpage and noticed you need the same:

  • background-color

  • font settings (size, color, family)

  • margin and padding settings

For many different elements? And you become bored by the numerous times you have to specify these particular styles in your CSS code? Well, worry no more, because CSS variables provide an enhanced solution to this problem! In this article, we will embark on a journey to unlock the full potential of CSS variables. We will dive into their syntax, explore their advantages over traditional CSS properties, and demonstrate how they can greatly save you time and stress when styling websites.

Prerequisites

  • You need just basic HTML and CSS knowledge (intermediate level).

  • A text editor and a web browser (any of your choice)

What are CSS variables?

CSS variables, also known as custom properties, are placeholders or unique names that help you store style properties that can be reused throughout your stylesheet. These variables are frequently used to store style properties like:

  • colors

  • numerical values (width, height, margin, and padding values)

  • gradients, box shadows

  • font styles

Imagine you have a particular color and font setting you want to apply to 30 different elements on your website. Instead of stressing yourself out defining that color and font setting 30 different times in your stylesheet for each of those 30 elements, you can simply store that color value and font setting each in a CSS variable by giving them a unique name and just calling that name when you need to specify those values for each element. This saves a lot of time and stress. Let's get into it!

Declaring CSS variables

You declare a CSS variable using a double hyphen (--), followed by a unique name for the variable and its value. For example, the following declaration defines a variable called --color with the value#FF0000, which is red.

--color: #FF0000;

Using CSS variables

To access a CSS variable and apply its value to the style property of an HTML element, you use the var() function. For example, the following declaration sets the background color of the body element to the value of the --color variable.

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

The above code will set the background color of the body of your document to red since the value of the --color variable was set to red. It's that easy!😌

CSS variables and scope

You can declare CSS variables for a global or local scope. Declaring a variable for a global scope means you can access/use that variable throughout the entire document; that is, on any HTML element in that document. Declaring a variable for a local scope means you can only use that variable inside the selector where it is declared.

To create a variable with global scope, declare it inside the :root pseudo-class, which represents the root element of your document, like this:

:root {
    --color: #FF0000;
    --font-size: 20px;
}

The above declaration implies that you can now use the variables --color and --font-size anywhere in your stylesheet and define their values to any element on your webpage.

Now let's say you have some buttons on your page and you want only those buttons to have a different color from red; say blue. This is where local scope comes in. Since you will use the variable just for the buttons and nothing else, you can declare it only inside the button selector and not in the :root selector anymore.

Let's call this variable --button-color. Here is how you declare the local variable:

button {
    --button-color: #0000ff;
}

Since you have declared this --button-color variable only inside the button selector and not in the :root selector anymore, you can only use it for button elements, that is, the color style #0000ff will only be applied to button elements. If you try to use it for another element other than a button, say a div, the style will not be applied! For example:

body{
    background-color: var(--button-color);
}

If you try to run this code above, it will not work. That is, the background color of the body will not change to blue. This is because you did not declare the --button-color variable in the :root selector. You rather declared it in the button selector making it only applicable to button elements and nothing else. If you want this code to work, you will need to declare that variable in the :root selector so you can apply it to any other element and not just buttons.

Benefits of CSS variables

Now that you know how to declare and use CSS variables, let's dive into how vital it is to have this skill added to your styling skillset.

Enhanced Reusability

CSS variables make it extremely easy for you to reuse code throughout your stylesheet. For example, let's say you want to give 20 elements a particular background color on your website; say this color: #6495ed. It will be much easier for you to define one variable which stores this color value, and then call that variable 20 times using the syntax we've discussed above. That is much better than writing out the hex color value 20 times for each element, which will take a lot of time and stress you up even more. It might also lead to some errors with the color code.

Easier Maintenance

With CSS variables, modifying styles becomes more efficient. For example, still taking our example above of 20 elements. Imagine you realize that the first color above no longer intrigues you. You see another color that captivates you like this one: #0000ff . You then want to change that first color and set all those elements to have this new one. With CSS variables, all you need to do is go to where you declared the variable for that first color and change its value to that of this new color. Immediately, the background color of all those 20 elements changes to #0000ff. With the input of just ONE WORD! Isn't that Marvelous!!😫

Imagine how stressful and long it would be for you if you had to change the background color for all those elements using the traditional method of changing one by one. You might even make some errors while doing it. Therefore, you realize that by adjusting a single variable, you can apply changes across multiple elements, simplifying the maintenance process and reducing the likelihood of errors.

Responsive Design

You can also use CSS variables in conjunction with media queries to create responsive web designs. If you define variables for breakpoints, font sizes, or spacing (margin, padding, flexbox, grid), you can easily adjust the styling based on different screen sizes or devices. This provides a more consistent user experience across various platforms. To know more about using CSS variables with media queries, see the link here.

Conclusion

Congratulations my friend!! you now possess the power to use CSS variables to easily control your stylesheet. As you have seen, with just the input of one word or phrase, you can change the looks of several elements on your webpage. This will help you greatly to be able to create more adaptable and easily maintainable websites. To learn more about harnessing the power of CSS variables, visit the w3schools website.

Please do well to leave some comments and errors spotted as this is my first technical article. Your feedback will be greatly appreciated. Also, ensure to like and follow for more awesome content that will be coming your way shortly!

HTML5CSScss variables