You learned that to define a CSS variable you begin by defining its scope.

And scoping a variable to the root implies that the variable is available to

all elements.

Well, using root is a great way to set global variables and

keep all your variables in one place for easy maintenance like this.

You don't always need to define your variables inside root.

Since CSS variables follow the standard cascade rules,

they behave like regular CSS properties.

So that means they inherit, cascade, and can be declared on or

scoped to any CSS selector.

You can define and reset a variable at different levels of specificity.

So in the latest project files,

I have this base class of button for creating a button set,

that uses var(--btn-bg) to set the background color of a button.

Now the --btn-bg variable and

value have not been declared anywhere in the style sheet yet, we'll do that next.

So instead of defining the --btn-bg variable

in the root scope like we've been doing all along, I'll declare and

assign the values inside the button modifier selector given to each button.

So as you can see in index.html,

the call out button has the base button class and a call out class and the learn

more buttons in the cards also have the base button class and an info class.

So first in variables.css, I'll create a chained class selector

that targets elements with the class button and also a class name of callout.

And here I'll set the value of the --btn-bg variable to #b13c69.

Then right below I'll create a class that targets elements

with the class button and the class info.

And here I'll set the --btn-bg

value to #60a4b3.

The custom properties are resolved according to the normal inheritance in

cascade rules.

So the browser updates the background color value of a button

based on the class or element the --btn-bg variable is scoped to.

Scoping custom properties to DOM elements gives you even more interesting

possibilities.

Again, since CSS variables follow the cascade and inheritance,

we can style elements based on where they appear in the HTML.

In other words,

we can efficiently set how an element looks when it's inside of another element.

For example, to update the styles of a button

based on whether it appears inside an intro div, a card item or

a modal window, you might create three descendant selectors like this.

Well with custom properties, we can update the styles without

having to write descendant selectors that couple your CSS to he DOM structure.

Like earlier, we declare the regular CSS properties who's values we wanna

update inside the base button rule, like font size and background color.

So in the base button class,

I'll add the font size property and set the value to var and

specify a custom property name of --btn-font-size.

And now I can update how the button appears inside an intro, card,

and modal element by setting the custom property values on those selectors.

So I'll replace the chained class selector with the intro class,

I already have the background set.

I'll set the --btn-font-size variable to 1.1em.

And right below I'll replace the selector with a class card.

And set --btn-font-size to 0.85em.

The page also has a modal window that's set to display none for now, and

you can see what it looks like if I comment out the display property.

So back in the modal rule,

I'll set --btn-font-size to 1em,

and --btn-bg to #e85838.

So each of these selectors creates a new context for the variables.

So now any button descendent of intro, card, and

modal can inherit the property set on their parent selectors.

So that means I can go over to my HTML and

remove the extra call out and info modifier classes from the markup.

So the call up button will simply have the class button and

it's inside the div intro and then inside each div with a class card,

I'll remove the info class from the button inc elements.

As you can see the custom properties don't have to know anything about their context.

And as a result we get this perfectly themeable and reusable button component.