Cascade and Inheritance with CSS Variables

You learned that to define a CSS variable you begin by defining its scope. 0:00 And scoping a variable to the root implies that the variable is available to 0:04 all elements. 0:08 Well, using root is a great way to set global variables and 0:10 keep all your variables in one place for easy maintenance like this. 0:13 You don't always need to define your variables inside root. 0:16 Since CSS variables follow the standard cascade rules, 0:20 they behave like regular CSS properties. 0:23 So that means they inherit, cascade, and can be declared on or 0:25 scoped to any CSS selector. 0:29 You can define and reset a variable at different levels of specificity. 0:32 So in the latest project files, 0:35 I have this base class of button for creating a button set, 0:38 that uses var(--btn-bg) to set the background color of a button. 0:42 Now the --btn-bg variable and 0:48 value have not been declared anywhere in the style sheet yet, we'll do that next. 0:50 So instead of defining the --btn-bg variable 0:55 in the root scope like we've been doing all along, I'll declare and 0:58 assign the values inside the button modifier selector given to each button. 1:01 So as you can see in index.html, 1:06 the call out button has the base button class and a call out class and the learn 1:09 more buttons in the cards also have the base button class and an info class. 1:14 So first in variables.css, I'll create a chained class selector 1:21 that targets elements with the class button and also a class name of callout. 1:27 And here I'll set the value of the --btn-bg variable to #b13c69. 1:33 Then right below I'll create a class that targets elements 1:43 with the class button and the class info. 1:48 And here I'll set the --btn-bg 1:53 value to #60a4b3. 1:58 The custom properties are resolved according to the normal inheritance in 2:02 cascade rules. 2:07 So the browser updates the background color value of a button 2:08 based on the class or element the --btn-bg variable is scoped to. 2:12 Scoping custom properties to DOM elements gives you even more interesting 2:18 possibilities. 2:21 Again, since CSS variables follow the cascade and inheritance, 2:23 we can style elements based on where they appear in the HTML. 2:27 In other words, 2:30 we can efficiently set how an element looks when it's inside of another element. 2:31 For example, to update the styles of a button 2:36 based on whether it appears inside an intro div, a card item or 2:39 a modal window, you might create three descendant selectors like this. 2:43 Well with custom properties, we can update the styles without 2:48 having to write descendant selectors that couple your CSS to he DOM structure. 2:52 Like earlier, we declare the regular CSS properties who's values we wanna 2:56 update inside the base button rule, like font size and background color. 3:01 So in the base button class, 3:06 I'll add the font size property and set the value to var and 3:09 specify a custom property name of --btn-font-size. 3:14 And now I can update how the button appears inside an intro, card, 3:20 and modal element by setting the custom property values on those selectors. 3:25 So I'll replace the chained class selector with the intro class, 3:31 I already have the background set. 3:37 I'll set the --btn-font-size variable to 1.1em. 3:40 And right below I'll replace the selector with a class card. 3:47 And set --btn-font-size to 0.85em. 3:54 The page also has a modal window that's set to display none for now, and 4:02 you can see what it looks like if I comment out the display property. 4:07 So back in the modal rule, 4:12 I'll set --btn-font-size to 1em, 4:17 and --btn-bg to #e85838. 4:25 So each of these selectors creates a new context for the variables. 4:31 So now any button descendent of intro, card, and 4:36 modal can inherit the property set on their parent selectors. 4:40 So that means I can go over to my HTML and 4:45 remove the extra call out and info modifier classes from the markup. 4:48 So the call up button will simply have the class button and 4:54 it's inside the div intro and then inside each div with a class card, 4:58 I'll remove the info class from the button inc elements. 5:03 As you can see the custom properties don't have to know anything about their context. 5:12 And as a result we get this perfectly themeable and reusable button component. 5:18