Prosper Opara

Posted on Sep 3, 2018 • Updated on Apr 25, 2019

CSS VARIABLE SCOPE

#css #styling #frontenddevelopment

I think removing the native cascading effect of css variables will be awesome.

variables should be accessible to other selectors not within the scope of the :root element.

more like:

{
--variable_name: value;
}

selector{
    property: var(--variable_name);
}

code sample:

index.html

<div class="question">
    <h1>questions</H1>

    <ul>
        <li>Whats your name</li>
    </ul>
<div>

<div class="greet">
    <p>hello world</p>
</div>

index.css

/*
proposed css variable declaration 
*/
{
 --bg_color: #111;
--font_color: #fff;
}

.question{
    background-color: var(--bg_color);
    color: var(--font_color);
}

/*
   The greet class is on a different scope from the question class, but still shares the varible values with .question
*/
.greet{
    background-color: var(--bg_color);
    color: var(--font_color);
}

This are my thoughts though, I'd love to hear your thoughts about this too..

Top comments (4)

Mattia Astorino • Sep 4 '18 • Edited

I don’t understand the purpose of this post. Your “proposal” is the same of the actual behavior. Variables declared inside :root are accessible and they can be redeclared inside any selector.

Prosper Opara • Sep 4 '18

A variable declared within :root is only accessible to it and its children. Other elements outside of :root will not have access to the variable unless they are re-declared in this element.

But what if we can declare a variable once with a GLOBAL SCOPE, such that it's not bound to any :root element and its children, but can be easily accessed by every other element regardless of their position(in or outside the :root element).

Mattia Astorino • Sep 4 '18 • Edited

In HTML there can't be anything outside the document root element, it is always the <html> tag.

I think you don't know CSS Properties and Values API Level 1. Registering custom properties by CSS you must bind it to a selector since in css you can't write nothing outside {}. Since in CSS :root {} is the document root element (<html>) it works as a "global scope" because there is nothing outside it. So any custom property declarede at :root level is accessible by the entire document.

BTW, right now you can also register custom properties directly to the document object through JS using Houdini api...

Let property set be the value of the current global object’s associated Document’s

CSS.registerProperty({
    name: "--my-color",
    syntax: "<color>",
    inherits: false,
    initialValue: "rgba(0,0,0,0)"
});

There is also a postcss plugin that allows you (trying to bring a lv2 proposal) to do the reverse thing, register a document-level custom property inside CSS:

github.com/jonathantneal/postcss-r...

@property --theme {
  syntax: '<color>+';
  initial-value: #fff;
  inherits: true;
}

Prosper Opara • Sep 9 '18

Ok, i get your point now, html{} is the solution.

Thanks for sharing your knowledge about CSS internals.

DEV Community

CSS VARIABLE SCOPE

Top comments (4)

Read next

5 Essential HTML and CSS Tricks to Ditch JavaScript

Can I Use CLI - Compatibility within terminal's reach

Dark Mode Toggle in HTML Web Components

Using CSS Variables for Theme Customisation