1
00:00:03,000 --> 00:00:04,582
In the previous video

2
00:00:04,582 --> 00:00:06,918
we added a CSS file to our app,

3
00:00:06,918 --> 00:00:08,802
containing global styles,

4
00:00:08,802 --> 00:00:10,912
that apply to all our pages.

5
00:00:10,912 --> 00:00:12,946
Now, keeping all the styles

6
00:00:12,946 --> 00:00:14,453
in a global CSS file

7
00:00:14,453 --> 00:00:15,960
doesn't work so well

8
00:00:15,960 --> 00:00:18,070
when our app becomes larger,

9
00:00:18,070 --> 00:00:20,406
and we add many different pages

10
00:00:20,406 --> 00:00:21,536
and components.

11
00:00:22,714 --> 00:00:25,638
For example, here we added some rules

12
00:00:25,638 --> 00:00:28,008
for the "ul" and "li" elements

13
00:00:28,008 --> 00:00:30,141
used in the navigation bar.

14
00:00:30,141 --> 00:00:31,405
But as they are,

15
00:00:31,405 --> 00:00:33,301
these rules really apply

16
00:00:33,301 --> 00:00:35,434
any "ul" and "li" elements,

17
00:00:35,434 --> 00:00:37,646
anywhere in our application.

18
00:00:38,621 --> 00:00:40,168
What happens if we have

19
00:00:40,168 --> 00:00:42,253
a list of items somewhere else,

20
00:00:42,253 --> 00:00:43,666
like in our HomePage?

21
00:00:44,301 --> 00:00:46,106
Let's add a list here for example,

22
00:00:46,966 --> 00:00:48,516
with some test items

23
00:00:48,516 --> 00:00:50,065
saying "One", "Two",

24
00:00:50,643 --> 00:00:51,362
and "Three".

25
00:00:52,843 --> 00:00:54,567
You can see that in the page

26
00:00:54,567 --> 00:00:56,106
these items are displayed

27
00:00:56,106 --> 00:00:57,399
all in a single line,

28
00:00:58,023 --> 00:01:00,468
because it's applying the same rules

29
00:01:00,468 --> 00:01:02,777
we defined in our global CSS file,

30
00:01:02,777 --> 00:01:04,882
written for the navigation bar.

31
00:01:04,882 --> 00:01:06,308
But if we have a list

32
00:01:06,308 --> 00:01:08,414
in the main section of the page

33
00:01:08,414 --> 00:01:10,180
we probably want that list

34
00:01:10,180 --> 00:01:12,421
to be displayed as bullet points.

35
00:01:13,329 --> 00:01:16,179
So we need a way to apply these rules

36
00:01:16,179 --> 00:01:18,490
only to "ul" elements that are

37
00:01:18,490 --> 00:01:20,493
inside the navigation bar.

38
00:01:21,148 --> 00:01:22,696
In this simple example,

39
00:01:22,696 --> 00:01:23,975
we could apply them

40
00:01:23,975 --> 00:01:25,860
only inside a "nav" element,

41
00:01:27,214 --> 00:01:28,794
and that would work fine

42
00:01:28,794 --> 00:01:29,650
in this case.

43
00:01:29,650 --> 00:01:32,087
You can see that the links at the top

44
00:01:32,087 --> 00:01:33,733
are all on the same line,

45
00:01:33,733 --> 00:01:35,972
while the list in the main content

46
00:01:35,972 --> 00:01:38,080
is displayed with bullet points.

47
00:01:38,080 --> 00:01:39,594
This works in this case

48
00:01:39,594 --> 00:01:42,097
because we have a single "nav" element

49
00:01:42,097 --> 00:01:42,887
in our page.

50
00:01:42,887 --> 00:01:44,665
But what if we have another

51
00:01:44,665 --> 00:01:46,575
"nav" element somewhere else,

52
00:01:46,575 --> 00:01:48,946
and we want to style it differently?

53
00:01:50,171 --> 00:01:52,533
To be absolutely sure those styles

54
00:01:52,533 --> 00:01:54,339
only apply to the elements

55
00:01:54,339 --> 00:01:56,216
inside our NavBar component

56
00:01:56,855 --> 00:01:58,215
we could add a "className"

57
00:01:58,215 --> 00:01:59,209
to the root element

58
00:01:59,762 --> 00:02:02,470
named like the React component itself.

59
00:02:03,028 --> 00:02:05,022
So now that "nav" element

60
00:02:05,022 --> 00:02:06,459
has class "NavBar"

61
00:02:07,039 --> 00:02:08,300
and we can use this

62
00:02:08,300 --> 00:02:09,697
in our CSS selectors.

63
00:02:10,905 --> 00:02:12,807
Instead of applying these styles

64
00:02:12,807 --> 00:02:14,055
to all "nav" elements

65
00:02:14,615 --> 00:02:16,271
we can apply them only to

66
00:02:16,271 --> 00:02:18,259
those who have class "NavBar".

67
00:02:19,548 --> 00:02:21,472
And the result is the same

68
00:02:21,472 --> 00:02:23,842
but our rules are more specific.

69
00:02:23,842 --> 00:02:25,989
So this is a better approach,

70
00:02:25,989 --> 00:02:28,136
but having to add a CSS class

71
00:02:28,136 --> 00:02:30,505
to each React component by hand,

72
00:02:30,505 --> 00:02:33,022
and then writing the correct rules

73
00:02:33,022 --> 00:02:34,503
in a global CSS file

74
00:02:34,503 --> 00:02:36,353
is still a bit of a pain,

75
00:02:36,353 --> 00:02:38,574
especially once our code grows

76
00:02:38,574 --> 00:02:40,869
and we have lots of components.

77
00:02:40,869 --> 00:02:43,165
That's why these days there are

78
00:02:43,165 --> 00:02:45,682
many libraries available for React

79
00:02:45,682 --> 00:02:48,569
that give us "component-scoped styles".

80
00:02:49,958 --> 00:02:52,279
In this example we're going to use

81
00:02:52,279 --> 00:02:53,098
"styled-jsx"

82
00:02:53,667 --> 00:02:56,534
which is a library created by Vercel,

83
00:02:56,534 --> 00:02:59,635
that is the same company behind Next.js.

84
00:02:59,635 --> 00:03:03,200
But this is just one of many possible options.

85
00:03:03,200 --> 00:03:04,828
Next.js also supports

86
00:03:04,828 --> 00:03:07,076
"CSS Modules" out of the box.

87
00:03:07,076 --> 00:03:09,866
And if you prefer some other library

88
00:03:09,866 --> 00:03:11,572
that works with React,

89
00:03:11,572 --> 00:03:14,362
it should work with Next.js as well.

90
00:03:15,405 --> 00:03:17,602
But let's have a look at how

91
00:03:17,602 --> 00:03:18,936
styled-jsx works.

92
00:03:19,515 --> 00:03:21,016
Let's comment out these

93
00:03:21,016 --> 00:03:22,909
global NavBar styles for now,

94
00:03:23,515 --> 00:03:25,741
and let's re-implement them

95
00:03:25,741 --> 00:03:27,143
using styled-jsx.

96
00:03:27,726 --> 00:03:28,744
We can actually remove

97
00:03:28,744 --> 00:03:29,902
this "className" as well.

98
00:03:32,026 --> 00:03:33,724
Ok. With styled-jsx

99
00:03:33,724 --> 00:03:36,049
we can write our CSS rules

100
00:03:36,049 --> 00:03:39,000
directly inside our JSX elements.

101
00:03:39,679 --> 00:03:40,921
All we need to do is

102
00:03:40,921 --> 00:03:42,226
add a "style" element

103
00:03:42,789 --> 00:03:45,462
with a special property called "jsx".

104
00:03:45,462 --> 00:03:47,919
We can insert this "style" element

105
00:03:47,919 --> 00:03:49,147
wherever we like,

106
00:03:49,147 --> 00:03:51,893
inside the JSX tree for our component,

107
00:03:51,893 --> 00:03:53,555
but typically we put it

108
00:03:53,555 --> 00:03:55,795
just before the end, like this.

109
00:03:56,657 --> 00:03:58,357
Now, inside the element

110
00:03:58,357 --> 00:04:00,722
we want a JSX expression that is

111
00:04:00,722 --> 00:04:02,792
a backtick-delimited string.

112
00:04:03,440 --> 00:04:05,397
This way the string can span

113
00:04:05,397 --> 00:04:06,446
multiple lines,

114
00:04:06,446 --> 00:04:09,243
and inside here we can write our styles,

115
00:04:09,243 --> 00:04:11,271
using the regular CSS syntax.

116
00:04:11,981 --> 00:04:13,566
For example, let's style

117
00:04:13,566 --> 00:04:14,689
our "ul" element.

118
00:04:15,256 --> 00:04:17,392
Let's go and copy the same styles

119
00:04:17,392 --> 00:04:19,788
we were using in our global CSS file.

120
00:04:20,353 --> 00:04:21,906
and just paste them here.

121
00:04:22,407 --> 00:04:23,109
If we save,

122
00:04:24,240 --> 00:04:25,880
you can see that the styles

123
00:04:25,880 --> 00:04:27,825
have been applied to the NavBar.

124
00:04:28,386 --> 00:04:29,738
If we look at the elements

125
00:04:29,738 --> 00:04:31,142
as rendered in the browser,

126
00:04:31,694 --> 00:04:33,698
you can see how styled-jsx

127
00:04:33,698 --> 00:04:35,934
automatically added a "class"

128
00:04:35,934 --> 00:04:37,553
to the "nav" element,

129
00:04:37,553 --> 00:04:39,403
a class with a unique id

130
00:04:39,403 --> 00:04:41,100
that starts with "jsx"

131
00:04:41,100 --> 00:04:43,258
and then some random number.

132
00:04:43,258 --> 00:04:45,494
And the same class is applied

133
00:04:45,494 --> 00:04:49,041
to all the elements inside the NavBar as well.

134
00:04:49,041 --> 00:04:50,660
That's how styled-jsx

135
00:04:50,660 --> 00:04:52,665
makes sure that our styles

136
00:04:52,665 --> 00:04:54,901
only apply to this component.

137
00:04:56,172 --> 00:04:57,721
It's basically similar

138
00:04:57,721 --> 00:04:59,271
to what we did earlier

139
00:04:59,271 --> 00:05:01,385
when we manually added a class

140
00:05:01,385 --> 00:05:03,076
to our NavBar component,

141
00:05:03,076 --> 00:05:04,907
except that now styled-jsx

142
00:05:04,907 --> 00:05:07,232
is doing it automatically for us.

143
00:05:08,085 --> 00:05:10,317
Ok, now that we've seen how it works

144
00:05:10,317 --> 00:05:12,921
let's go and copy the other styles as well

145
00:05:14,151 --> 00:05:15,732
And paste all the rules

146
00:05:15,732 --> 00:05:17,658
inside our component styles.

147
00:05:18,227 --> 00:05:20,066
We can remove the ".NavBar" class,

148
00:05:21,127 --> 00:05:24,186
since these styles are already isolated.

149
00:05:24,686 --> 00:05:26,059
Ok, if we save now,

150
00:05:26,919 --> 00:05:28,438
the links in the NavBar

151
00:05:28,438 --> 00:05:30,089
have the expected styles,

152
00:05:30,089 --> 00:05:32,599
but the other list in the main content

153
00:05:32,599 --> 00:05:33,656
is not affected.

154
00:05:34,355 --> 00:05:36,789
All right. We can now go and remove

155
00:05:36,789 --> 00:05:39,432
those styles from the global CSS file.

156
00:05:40,002 --> 00:05:42,225
All the NavBar-specific styles

157
00:05:42,225 --> 00:05:44,892
are now inside the component itself,

158
00:05:44,892 --> 00:05:46,226
where they belong.

159
00:05:46,226 --> 00:05:48,227
I should also mention that,

160
00:05:48,227 --> 00:05:50,154
to get syntax highlighting

161
00:05:50,154 --> 00:05:51,562
and code completion

162
00:05:52,433 --> 00:05:54,305
I had to install a couple of

163
00:05:54,305 --> 00:05:56,312
Visual Studio Code extensions.

164
00:05:56,879 --> 00:05:57,896
One is called

165
00:05:57,896 --> 00:06:00,479
"styled-jsx Syntax Highlighting",

166
00:06:01,058 --> 00:06:01,645
and the other one is

167
00:06:02,691 --> 00:06:05,298
the "styled-jsx Language Server".

168
00:06:05,798 --> 00:06:07,403
So you may want to install

169
00:06:07,403 --> 00:06:08,947
those extensions as well.

170
00:06:09,509 --> 00:06:12,076
But this is how styled-jsx works.

171
00:06:12,076 --> 00:06:13,944
I personally like having

172
00:06:13,944 --> 00:06:16,433
all the styles in the same place

173
00:06:16,433 --> 00:06:18,145
as the component code.

174
00:06:18,145 --> 00:06:20,324
That's what makes styled-jsx

175
00:06:20,324 --> 00:06:22,891
a so-called "CSS-in-JS" solution.

176
00:06:22,891 --> 00:06:25,459
And I also like being able to use

177
00:06:25,459 --> 00:06:27,249
the regular CSS syntax.

178
00:06:27,249 --> 00:06:29,427
But if you prefer some other

179
00:06:29,427 --> 00:06:31,528
styling solution for React,

180
00:06:31,528 --> 00:06:34,874
as I mentioned you should be able to use it

181
00:06:34,874 --> 00:06:36,508
with Next.js as well.