🍿 3 min. read

Give Your CSS Superpowers with CSS Variables

Monica Powell

What are CSS variables?

CSS variables or CSS custom properties are a way to declare reusable values within a CSS project. CSS variables can greatly reduce the repetition of code and allow us to reference more semantically meaningful names throughout our stylesheets like "--accent-color" versus the actual value they represent "#b5838d".

screenshot of CSS variable compatibility Current CSS Variables Browser Support (Source: MDN Web Docs)

How to declare CSS variables

In order to use CSS variables you should create a CSS custom property, which is a string prepended with a double hyphen --. These properties are scoped and available based on their selector. Generally, it is recommended to make the selector the pseudoselector :root so that it will apply throughout an entire site. If you select a more specific selector then the scope of where you can access the value of the variable changes accordingly.

Below is an example showing 5 different CSS variables being declared to represent different colors within a stylesheet.

1:root {
2 --white: #fff;
3 --accent-color: #b5838d;
4 --dark-accent-color: #a6757f;
5 --main-color: #6d6875;
6 --dark-main-color: #56505f;
7}

In order to access the these CSS values throughout our CSS we can use the var() method like var(--accent-color). The following example selects the element with the signup class and changes its background-color to #b5838d.

1.signup {
2 background-color: var(--accent-color);
3}

Since the value of --accent-color is being set with a CSS variable if we later decide to change the value of var(--accent-color) we only have to change it in one place, where the variables value is declared. Once the value of the variable is updated its new value will automatically be reflected everywhere var(--accent-color) is referenced. Being able to change the color in one place for a multitude of unrelated elements that are only coupled by color is powerful.

The Power of CSS Variables

CSS variables allow you to quickly play around with a color scheme and tweak the same color everywhere it is referenced without having to do a find and replace. Additionally, setting up CSS variables can improve the developer experience when creating color schemes, as you can switch the variable declaration values between themes without having to explicitly change the values within the rest of the stylesheet.

The two screenshots below show the difference in appearance when one line in the CSS file is changed from --accent-color: orange; to --accent-color: #b5838d; which is used in two completely separate places -- on the card's border-top property and the background color for the signup button. This can be very useful as stylesheets grow and values are re-used throughout.

--accent-color: orange;--accent-color: #b5838d;

Explore CSS variables!

Play around with the CSS variable values by editing the below Codepen to see CSS variables in action!

https://codepen.io/M0nica/pen/jObpJma

This article was published on May 22, 2020.


Don't be a stranger! 👋🏾

Thanks for reading "Give Your CSS Superpowers with CSS Variables". Join my mailing list to be the first to receive my newest web development content, my thoughts on the web and learn about exclusive opportunities.

     

    I won’t send you spam. Unsubscribe at any time.

    Webmentions

    144
    • 🛸
    • VRHipHop
    • calvin kabanda
    • Bryan Matthews
    • Okereke
    • Adrian Thomas
    • zainab 🎨
    • Connie Montalvo
    • John Philip 🐛
    • Shameka
    • rincon paciência
    • Fabian Brash
    • Maria Alejandra Ferreira torres
    • TheRealDine
    • TechBadGuy
    • Giovanni Massimiliano
    • C://gilbertsosi/v3.0
    • Sophia Abubakar
    • Cole Turner
    • Gen Ashley
    • Mahesh Sv👨‍💻
    • Kangie 🦘
    • NachoDev
    • ryan
    • oksanadev
    • Call me Cliff
    • KriszPap
    • JavaFXpert
    • Shannon "certified young person" Crabill
    • Chris Otto
    • Jose Hilario
    • Alice Chang
    • Percocet Peppers
    • Kathleen McMahon
    • DevBammy
    • Natalie Davis
    • Jesús Macedo 🤘🏻
    • Angie Jones
    • The Fat and Skinny on Fashion
    • €sther🌹
    • +16