1
00:00:00,180 --> 00:00:04,620
You learned that to define a CSS variable
you begin by defining its scope.

2
00:00:04,620 --> 00:00:08,890
And scoping a variable to the root
implies that the variable is available to

3
00:00:08,890 --> 00:00:10,110
all elements.

4
00:00:10,110 --> 00:00:13,260
Well, using root is a great way
to set global variables and

5
00:00:13,260 --> 00:00:16,790
keep all your variables in one place for
easy maintenance like this.

6
00:00:16,790 --> 00:00:20,290
You don't always need to define
your variables inside root.

7
00:00:20,290 --> 00:00:23,970
Since CSS variables follow
the standard cascade rules,

8
00:00:23,970 --> 00:00:25,770
they behave like regular CSS properties.

9
00:00:25,770 --> 00:00:29,500
So that means they inherit,
cascade, and can be declared on or

10
00:00:29,500 --> 00:00:32,050
scoped to any CSS selector.

11
00:00:32,050 --> 00:00:35,830
You can define and reset a variable
at different levels of specificity.

12
00:00:35,830 --> 00:00:38,314
So in the latest project files,

13
00:00:38,314 --> 00:00:42,822
I have this base class of button for
creating a button set,

14
00:00:42,822 --> 00:00:48,350
that uses var(--btn-bg) to set
the background color of a button.

15
00:00:48,350 --> 00:00:50,190
Now the --btn-bg variable and

16
00:00:50,190 --> 00:00:55,200
value have not been declared anywhere in
the style sheet yet, we'll do that next.

17
00:00:55,200 --> 00:00:58,290
So instead of defining
the --btn-bg variable

18
00:00:58,290 --> 00:01:01,620
in the root scope like we've been
doing all along, I'll declare and

19
00:01:01,620 --> 00:01:06,430
assign the values inside the button
modifier selector given to each button.

20
00:01:06,430 --> 00:01:09,310
So as you can see in index.html,

21
00:01:09,310 --> 00:01:14,840
the call out button has the base button
class and a call out class and the learn

22
00:01:14,840 --> 00:01:20,370
more buttons in the cards also have
the base button class and an info class.

23
00:01:21,680 --> 00:01:27,157
So first in variables.css,
I'll create a chained class selector

24
00:01:27,157 --> 00:01:33,414
that targets elements with the class
button and also a class name of callout.

25
00:01:33,414 --> 00:01:41,834
And here I'll set the value of
the --btn-bg variable to #b13c69.

26
00:01:43,740 --> 00:01:48,452
Then right below I'll create
a class that targets elements

27
00:01:48,452 --> 00:01:51,760
with the class button and the class info.

28
00:01:53,410 --> 00:01:58,855
And here I'll set the --btn-bg

29
00:01:58,855 --> 00:02:02,801
value to #60a4b3.

30
00:02:02,801 --> 00:02:07,152
The custom properties are resolved
according to the normal inheritance in

31
00:02:07,152 --> 00:02:08,126
cascade rules.

32
00:02:08,126 --> 00:02:12,398
So the browser updates the background
color value of a button

33
00:02:12,398 --> 00:02:18,020
based on the class or element
the --btn-bg variable is scoped to.

34
00:02:18,020 --> 00:02:21,890
Scoping custom properties to DOM
elements gives you even more interesting

35
00:02:21,890 --> 00:02:23,120
possibilities.

36
00:02:23,120 --> 00:02:27,181
Again, since CSS variables follow
the cascade and inheritance,

37
00:02:27,181 --> 00:02:30,890
we can style elements based on
where they appear in the HTML.

38
00:02:30,890 --> 00:02:31,750
In other words,

39
00:02:31,750 --> 00:02:36,570
we can efficiently set how an element
looks when it's inside of another element.

40
00:02:36,570 --> 00:02:39,220
For example,
to update the styles of a button

41
00:02:39,220 --> 00:02:43,450
based on whether it appears inside
an intro div, a card item or

42
00:02:43,450 --> 00:02:48,390
a modal window, you might create
three descendant selectors like this.

43
00:02:48,390 --> 00:02:52,087
Well with custom properties,
we can update the styles without

44
00:02:52,087 --> 00:02:56,772
having to write descendant selectors that
couple your CSS to he DOM structure.

45
00:02:56,772 --> 00:03:01,773
Like earlier, we declare the regular
CSS properties who's values we wanna

46
00:03:01,773 --> 00:03:06,713
update inside the base button rule,
like font size and background color.

47
00:03:06,713 --> 00:03:09,436
So in the base button class,

48
00:03:09,436 --> 00:03:14,993
I'll add the font size property and
set the value to var and

49
00:03:14,993 --> 00:03:20,564
specify a custom property
name of --btn-font-size.

50
00:03:20,564 --> 00:03:25,589
And now I can update how the button
appears inside an intro, card,

51
00:03:25,589 --> 00:03:31,940
and modal element by setting the custom
property values on those selectors.

52
00:03:31,940 --> 00:03:37,870
So I'll replace the chained class
selector with the intro class,

53
00:03:37,870 --> 00:03:40,130
I already have the background set.

54
00:03:40,130 --> 00:03:45,166
I'll set the --btn-font-size
variable to 1.1em.

55
00:03:47,927 --> 00:03:51,595
And right below I'll replace
the selector with a class card.

56
00:03:54,884 --> 00:03:58,908
And set --btn-font-size to 0.85em.

57
00:04:02,744 --> 00:04:07,083
The page also has a modal window that's
set to display none for now, and

58
00:04:07,083 --> 00:04:11,220
you can see what it looks like if I
comment out the display property.

59
00:04:12,980 --> 00:04:17,632
So back in the modal rule,

60
00:04:17,632 --> 00:04:25,035
I'll set --btn-font-size to 1em,

61
00:04:25,035 --> 00:04:31,600
and --btn-bg to #e85838.

62
00:04:31,600 --> 00:04:36,862
So each of these selectors creates
a new context for the variables.

63
00:04:36,862 --> 00:04:40,621
So now any button descendent of intro,
card, and

64
00:04:40,621 --> 00:04:45,380
modal can inherit the property
set on their parent selectors.

65
00:04:45,380 --> 00:04:48,850
So that means I can go over to my HTML and

66
00:04:48,850 --> 00:04:54,350
remove the extra call out and
info modifier classes from the markup.

67
00:04:54,350 --> 00:04:58,357
So the call up button will
simply have the class button and

68
00:04:58,357 --> 00:05:03,199
it's inside the div intro and
then inside each div with a class card,

69
00:05:03,199 --> 00:05:07,316
I'll remove the info class
from the button inc elements.

70
00:05:12,112 --> 00:05:18,240
As you can see the custom properties don't
have to know anything about their context.

71
00:05:18,240 --> 00:05:22,801
And as a result we get this perfectly
themeable and reusable button component.