2020-07-27

#css

Chidume Nnamdi

22391

Jul 27, 2020 ⋅ 5 min read

CSS variables: Scoping

Chidume Nnamdi I'm a software engineer with over six years of experience. I've worked with different stacks, including WAMP, MERN, and MEAN. My language of choice is JavaScript; frameworks are Angular and Node.js.

See how LogRocket's Galileo AI surfaces the most severe issues for you

No signup required

Check it out

We can declare variables in CSS in the same way we declare variables in other programming languages.

We declare a variable in CSS assigned with a value. The variable can then be consumed in CSS rulesets.

In JavaScript, for example, we declare variables using the let, var, and const keywords:

let nine = 9;
var ten = 10;
var eight = 8;

Then, we consume them by referring to their variable names:

>> nine
9
>>  ten
10
>> eight 
8

We can also do this in CSS. To declare a variable in CSS, we use this format:

--varName

In CSS, it’ll look like this:

body {
    --mainColor: limegreen;
}

Let’s say we declare a variable with the name --mainColor and a value of limegreen. This variable holds a color name.

To consume variables in CSS, we use var():

var(--varName);

var will retrieve the value of the variable passed to it, and replace itself with the value:

body {
    --mainColor: limegreen;
}

div {
    color: var(--mainColor);
}

Here, div consumes the mainColor variable using the var function. The var will retrieve the value limegreen from --mainColor and replace itself with limegreen, the value of the --mainColor variable.

So, the color of the text node in the div element will be lime green. In other words, the CSS code would translate to this:

body {
    --mainColor: limegreen;
}

div {
    color: limegreen;
}

🚀 Sign up for The Replay newsletter

The Replay is a weekly newsletter for dev and engineering leaders.

Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.

Scoping

The place in the CSS hierarchy where you declare a CSS variable will determine its level of visibility throughout the lower levels of the hierarchy.

A CSS variable used throughout the entire page is declared in the :root pseudo-selector, or in the html selector.

This is because all the elements on our page are enclosed in one HTML element, so CSS variables declared in the HTML element or in its :root selector will be visible for consumption from its children.

:root is a pseudo-selector attached to the root of the HTML element in a document. In an RSS document, the :root element is attached to the RSS element.

Generally, a CSS variable is only visible to child elements of the parent element it is declared in.

Now, we have this:

<body>
    <div>Div 1</div>
    <div>Div 2</div>
</body>

The body element is parent to its child elements div, Div 1, and Div 2.

So this is feasible:

body {
    --bgColor: limegreen;
}

div {
    background: var(--bgColor);
}

The CSS variable bgColor is declared in the body element and consumed in a div to set the background of div elements to lime green.

This would be visible to our two div elements because they are child elements to the body element, which is where the CSS variable it consumed is declared.

Now, if the reverse was true:

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

div {
    --bgColor: limegreen;
}

<body>
    <div>Div 1</div>
    <div>Div 2</div>
</body>

The --bgColor variable is declared in the div element and consumed in the body element. Now, the body element is above the div element, so the --bgColor variable won’t be visible to the body element. As a result, the background of the body element won’t turn to lime green.

Over 200k developers use LogRocket to create better digital experiences

Learn more →

The --bgColor variable in this case will be visible to elements beneath the div elements:

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

div {
    --bgColor: limegreen;
}

p {
    background: var(--bgColor);
}

<body>
    <div>Div 1
        <p>Paragraph 1</p>
    </div>
    <div>Div 2
        <p>Paragraph 2</p>
    </div>
</body>

The --bgColor variable will be visible to the p elements because they are child elements of div.

We can see here that the visibility of CSS variables depends on a parent-child relationship. A child element is within the scope of its parent element, so it can use the CSS variable declarations in the parent scope.

Theming is done with CSS variables, and mostly the theming propagates the entire DOM tree, so the CSS variables are usually set in the html element or in the :root element. This is because no element is placed outside the HTML element:

:root {
    --bgColor: lightcoral;
    --mainColor: limegreen;
    --borderColor: seagreen;
}

In rare cases when we want to theme a portion of the DOM tree or to theme a DOM branch using CSS variables, we’ll set the CSS variables in the root element of the DOM branch so it will propagate down the branch tree.

<html>
    <body>
        <div class="branch">
            <p>
                Paragraph 1
            </p>
        </div>
        <p>
            Paragraph 2
        </p>
    </body>
</html>
```
```css
.branch {
    --brBgColor: palevioletred;
    --brMainColor: blueviolet;
}

p {
    background: var(--brBgColor);
    color: var(--brMainColor);
}

The CSS variables declared in the div.branch will be visible to the p element Paragraph 1, because it is a child element of the div with class name branch. The background color and text color will be painted palevioletred and blueviolet colors, respectively.

The p element Paragraph 2 will not be affected with the styling because the CSS variables --brBgColor --brMainColor will not be visible to it. This is because it is not a child element of the div.branch.

So, this is scoping at work in CSS variables.

Global scope

CSS variables declared in the :root selector are said to be in the Global scope. This means that they can be accessed anywhere in the CSSOM.

Why does it work?

Local scope

Just like in the :root selector, CSS variables can also be declared in all levels of the CSSOM hierarchy or a particular selector.

Now, CSS variables declared in these levels or in a selector are only visible or scoped locally to the selector and its child nodes.

Hoisting

CSS variables are hoisted and they are moved on the top of the CSSOM before rendering the styles of respective HTML elements in the browser.

Just like in JavaScript, CSS variables can be hoisted. This means that CSS variables can be used before they are declared.

var num2 = 90

var add = num1 + num2

var num1 = 10

log(add)

In the above example, the num1 variable is being used before it is declared. That means that num1 was hoisted. Upon running the code, add will log 100. Despite being used first before declaration, JavaScript was able to get the value and perform the operation.

The same is also true in CSS variables:

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

:root {
    --bgColor: rgb(221, 221, 221);
}

As you can see, the CSS variable --bgColor was used before it was declared in the :root pseudo-selector. And the code works perfectly fine!

So, CSS variables can be accessed first and declared later. This makes CSS variables a very powerful feature.

Checking for support

CSS variables are widely supported in major browsers, though support may be lacking in older versions of Chrome and Firefox. Support for CSS variables in IE and Edge are presently underway.

Because not all browsers support CSS variables, we can detect CSS variable feature support using the @supports.

@supports(--bgColor: rgb(221, 221, 221)) {

}

The second option is to set a fallback value:

:root {
    --primaryColor: blue;
}

button {
    color: blue;
    color: var(--primaryColor);
}

We set up a --primaryColor variable in the :root selector with color blue. However, we’re not sure the browser our CSS runs on supports CSS variables. To make the code work, we added a fallback value in the button selector. This makes sure the button uses our primary color in browsers that don’t support CSS variables.

Advantages of using CSS variables

Theming

CSS Variables scoping improves the way we add and modify themes in our CSS. With CSS variables, theming in CSS won’t require extra stylesheets with different themes. Instead, all you need to do is update the CSS variables.

Styling

Leveraging CSS Variable scope improves the size, specificity, and semantics of our stylesheets.

Let’s say we have a button:

button {
    padding: 10px 5px;
}

With different button styles:

.btn-danger {
    background-color: orange;
}

.btn-success {
    background-color: lightblue;
}

With CSS variables, we don’t have to define background-color in every button style.

button {
    --btnBgColor: blue;
    padding: 10px 5px;
    background-color: var(--btnBgColor);
}

.btn-danger {
    --btnBgColor: orange;
}

.btn-success {
    --btnBgColor: lightblue;
}

We simply assign the --btnBgColor new values in every button style. We no longer need to override the base styles.

See? CSS variables are very powerful, and the scoping feature makes them an ideal tool for clean, modular design systems.

Conclusion

We just treated a potential bug in CSS today.

Just as we have scoping in JavaScript and other languages, the same is true in CSS variables. We have seen one major application of CSS variables: theming. There are lots more it can offer us.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email, or DM me.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket lets you replay user sessions, eliminating guesswork around why bugs happen by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks.

LogRocket's Galileo AI watches sessions for you, instantly identifying and explaining user struggles with automated monitoring of your entire product experience.

Modernize how you debug web and mobile apps — start monitoring for free.

#css

Vitest 4 adoption guide: Overview and migrating from Jest

Learn how Vitest 4 makes migrating from Jest painless, with codemods, faster tests, native ESM, browser testing, and a better DX.

Onuorah Bonaventure

Dec 18, 2025 ⋅ 15 min read

Types vs. interfaces in TypeScript

Learn when to use TypeScript types vs. interfaces, with practical guidance on React props, advanced mapped and template literal types, performance tradeoffs, and common pitfalls.

Yan Sun

Dec 18, 2025 ⋅ 12 min read

I tested 5 AI CLI tools: Here’s how they stack up

A hands-on comparison of five AI coding CLIs, tested by building the same React Todo app.

Emmanuel John

Dec 18, 2025 ⋅ 10 min read

The Replay (12/17/25): React2Shell, Shopify Winter ‘26, and more

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the December 17th issue.

Matt MacCormack

Dec 17, 2025 ⋅ 34 sec read

View all posts

3 Replies to "CSS variables: Scoping"

Per says:

June 30, 2021 at 5:36 am

Some serious issues in your article. First the “root” class has one colon, e.g. “:root”, second, your fallback sample, the “color: var(–primaryColor);” need to be after the “color: blue;” or else it won’t work

Reply
1. Matt Angelosanto says:
  
  June 30, 2021 at 8:22 am
  
  Thanks for catching, we’ve updated the post
  
  Reply
Chidume Nnamdi says:

June 30, 2021 at 8:39 am

Wow, thanks for that.

Reply

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →