1 00:00:01,140 --> 00:00:03,510 ‫Let's now learn all the fundamentals 2 00:00:03,510 --> 00:00:08,463 ‫of CSS modules that we need, which is actually really easy. 3 00:00:09,870 --> 00:00:13,650 ‫So luckily for us, CSS modules already come 4 00:00:13,650 --> 00:00:18,030 ‫out of the box both with Create-React-App and Vite. 5 00:00:18,030 --> 00:00:19,830 ‫So there's nothing to install 6 00:00:19,830 --> 00:00:22,980 ‫in order to make CSS modules work. 7 00:00:22,980 --> 00:00:25,950 ‫Now, as we just learned in the previous lecture, 8 00:00:25,950 --> 00:00:27,854 ‫what we do with CSS modules is 9 00:00:27,854 --> 00:00:32,346 ‫to create one external CSS file per component. 10 00:00:32,346 --> 00:00:36,590 ‫So let's do that here for this page navigation. 11 00:00:36,590 --> 00:00:40,050 ‫So right here in the component folder, 12 00:00:40,050 --> 00:00:42,021 ‫we will create a new file. 13 00:00:42,021 --> 00:00:45,090 ‫But now this file needs to follow the convention 14 00:00:45,090 --> 00:00:46,683 ‫of the name of the component. 15 00:00:48,180 --> 00:00:49,380 ‫So page nav. 16 00:00:49,380 --> 00:00:51,180 ‫And then the important part is 17 00:00:51,180 --> 00:00:54,367 ‫that here we add .module.css. 18 00:00:57,240 --> 00:00:59,640 ‫And so this is now the CSS module 19 00:00:59,640 --> 00:01:02,850 ‫for the page navigation component. 20 00:01:02,850 --> 00:01:06,147 ‫And so now here we can define some classes. 21 00:01:06,147 --> 00:01:09,303 ‫So let's for example, create a nav class. 22 00:01:10,710 --> 00:01:13,923 ‫And then I will just write some very simple styles here. 23 00:01:15,630 --> 00:01:20,630 ‫And let's say justify content space between, 24 00:01:21,090 --> 00:01:24,390 ‫just so we have some styles that we can see. 25 00:01:24,390 --> 00:01:27,750 ‫Now here really, we need to define class names. 26 00:01:27,750 --> 00:01:30,210 ‫So we cannot use the element selector 27 00:01:30,210 --> 00:01:31,983 ‫like this for example. 28 00:01:34,080 --> 00:01:38,250 ‫So for example, removing the bullets here from this list 29 00:01:38,250 --> 00:01:42,213 ‫by using the UL selector is not going to work. 30 00:01:43,316 --> 00:01:46,620 ‫Now if we save this, then you see that 31 00:01:46,620 --> 00:01:48,810 ‫of course nothing changed here for now. 32 00:01:48,810 --> 00:01:50,610 ‫And that's because we still need 33 00:01:50,610 --> 00:01:53,910 ‫to use these class names now in our markup. 34 00:01:53,910 --> 00:01:56,250 ‫So we have to connect these two files 35 00:01:56,250 --> 00:01:58,830 ‫by basically importing these styles here 36 00:01:58,830 --> 00:02:01,110 ‫into this page nav component. 37 00:02:01,110 --> 00:02:04,020 ‫And then as usual, we add these classes 38 00:02:04,020 --> 00:02:06,573 ‫that we define here to our elements. 39 00:02:09,090 --> 00:02:12,300 ‫Import and then all the classes that we define 40 00:02:12,300 --> 00:02:14,730 ‫in the module are basically exported 41 00:02:14,730 --> 00:02:17,850 ‫into this one big object that we can then use. 42 00:02:17,850 --> 00:02:20,643 ‫And usually we call that simply styles. 43 00:02:25,200 --> 00:02:30,200 ‫So the same folder and then page nav.module.css. 44 00:02:33,034 --> 00:02:36,660 ‫And so now this nav class that we defined 45 00:02:36,660 --> 00:02:39,813 ‫here is available on styles.nav. 46 00:02:40,831 --> 00:02:43,710 ‫And so here we define our class name. 47 00:02:43,710 --> 00:02:45,600 ‫And now that is no longer a string 48 00:02:45,600 --> 00:02:48,360 ‫like we used to do up until this point. 49 00:02:48,360 --> 00:02:50,614 ‫But now we need to enter JavaScript mode 50 00:02:50,614 --> 00:02:54,780 ‫to then use styles.nav. 51 00:02:54,780 --> 00:02:56,700 ‫And if we save this now we see 52 00:02:56,700 --> 00:02:59,880 ‫that some styles here have been applied. 53 00:02:59,880 --> 00:03:02,093 ‫Well, not really what we wanted. 54 00:03:02,093 --> 00:03:06,840 ‫So yeah, here Flexbox actually makes no sense 55 00:03:06,840 --> 00:03:09,272 ‫but it makes sense in the list. 56 00:03:09,272 --> 00:03:12,270 ‫So right here and for some reason it seems 57 00:03:12,270 --> 00:03:15,570 ‫like the styles here have actually been applied. 58 00:03:15,570 --> 00:03:18,600 ‫So this does work, but it's a really bad idea. 59 00:03:18,600 --> 00:03:21,840 ‫Because this will then select all the UL elements 60 00:03:21,840 --> 00:03:25,290 ‫on the entire application, which defeats the whole purpose 61 00:03:25,290 --> 00:03:29,070 ‫of CSS modules where this styles here, 62 00:03:29,070 --> 00:03:30,960 ‫so these classes are supposed 63 00:03:30,960 --> 00:03:34,140 ‫to only be applied to this component. 64 00:03:34,140 --> 00:03:37,350 ‫So never use the normal element selector. 65 00:03:37,350 --> 00:03:41,160 ‫But here instead, we will now basically select 66 00:03:41,160 --> 00:03:46,160 ‫all the unordered lists that are inside our nav class. 67 00:03:46,590 --> 00:03:48,673 ‫And so then here just to test this one, 68 00:03:48,673 --> 00:03:53,673 ‫let's add some orange red background color. 69 00:03:54,720 --> 00:03:56,280 ‫And there we go. 70 00:03:56,280 --> 00:03:59,280 ‫So here we have a nice ugly navigation 71 00:03:59,280 --> 00:04:02,850 ‫now styled with CSS modules. 72 00:04:02,850 --> 00:04:07,050 ‫Now notice how here we got this really weird class name. 73 00:04:07,050 --> 00:04:09,690 ‫And so this is what CSS modules does. 74 00:04:09,690 --> 00:04:12,623 ‫So they take our class name that we defined ourselves 75 00:04:12,623 --> 00:04:17,310 ‫and then they attach like this random ID here to the end. 76 00:04:17,310 --> 00:04:20,160 ‫And so if we then create another nav class 77 00:04:20,160 --> 00:04:22,902 ‫in some other CSS module that will get 78 00:04:22,902 --> 00:04:24,990 ‫a different random id. 79 00:04:24,990 --> 00:04:29,108 ‫And so then these are in the end different classes again. 80 00:04:29,108 --> 00:04:31,410 ‫So down here we can then see the styles 81 00:04:31,410 --> 00:04:33,180 ‫that have been applied. 82 00:04:33,180 --> 00:04:35,875 ‫And indeed there is our background color. 83 00:04:35,875 --> 00:04:37,890 ‫And then here the same. 84 00:04:37,890 --> 00:04:41,910 ‫So here we see that we got the same weird class name, 85 00:04:41,910 --> 00:04:45,120 ‫which comes out of this one that we created here. 86 00:04:45,120 --> 00:04:47,700 ‫And so now let me show you how this can 87 00:04:47,700 --> 00:04:49,950 ‫really avoid naming clashes. 88 00:04:49,950 --> 00:04:54,060 ‫So a problem where we or another developer on the team might 89 00:04:54,060 --> 00:04:58,290 ‫accidentally create a new class name that already exists, 90 00:04:58,290 --> 00:05:01,230 ‫which might then mess up all the other ones. 91 00:05:01,230 --> 00:05:04,320 ‫So the other elements that use that class name. 92 00:05:04,320 --> 00:05:07,590 ‫So that's a common problem when we use global CSS 93 00:05:07,590 --> 00:05:09,450 ‫like we have been doing. 94 00:05:09,450 --> 00:05:11,040 ‫But so let's now avoid that. 95 00:05:11,040 --> 00:05:14,643 ‫And in order to do that, let's first create a new page here, 96 00:05:17,370 --> 00:05:20,190 ‫which will be called app layout. 97 00:05:20,190 --> 00:05:23,850 ‫So because we already have a component called app. 98 00:05:23,850 --> 00:05:27,180 ‫And so this will basically be for the main application 99 00:05:27,180 --> 00:05:29,790 ‫where we have that list on the left side 100 00:05:29,790 --> 00:05:32,498 ‫and the map on the right side. 101 00:05:32,498 --> 00:05:35,970 ‫So let's then add another route for that page 102 00:05:35,970 --> 00:05:39,423 ‫right here or actually in the app file. 103 00:05:41,280 --> 00:05:43,792 ‫And so let's just duplicate this. 104 00:05:43,792 --> 00:05:48,677 ‫And here the path will be app and then app layout. 105 00:05:52,026 --> 00:05:54,573 ‫Okay, importing that. 106 00:05:57,180 --> 00:06:01,758 ‫And now here, I will not add that to the main navigation 107 00:06:01,758 --> 00:06:05,283 ‫but instead let's change the link here on the homepage. 108 00:06:06,581 --> 00:06:11,581 ‫So here we now move to pricing, but let's go to app. 109 00:06:12,720 --> 00:06:15,333 ‫So go to the app. 110 00:06:18,480 --> 00:06:21,210 ‫And so now if we go home and then click here 111 00:06:21,210 --> 00:06:22,710 ‫that should go to the app. 112 00:06:22,710 --> 00:06:24,030 ‫But I just remembered 113 00:06:24,030 --> 00:06:27,753 ‫that we actually haven't added any content here. 114 00:06:30,090 --> 00:06:33,450 ‫So now let's do that and there we go. 115 00:06:33,450 --> 00:06:36,780 ‫So now we have another route working in our application. 116 00:06:36,780 --> 00:06:40,563 ‫And now let's also create a navigation for this app. 117 00:06:42,870 --> 00:06:46,050 ‫So that's going to be a new component. 118 00:06:46,050 --> 00:06:51,050 ‫And so let's call this one the app nav JSX. 119 00:06:51,150 --> 00:06:55,590 ‫And let's right away also create CSS module. 120 00:06:55,590 --> 00:07:00,153 ‫So AppNav.module.css. 121 00:07:04,890 --> 00:07:08,610 ‫And again, these are just basically placeholder components 122 00:07:08,610 --> 00:07:12,153 ‫that we will replace later with the actual content. 123 00:07:14,323 --> 00:07:17,070 ‫So let's just use a nav here. 124 00:07:17,070 --> 00:07:20,883 ‫And then I will just write app navigation. 125 00:07:26,160 --> 00:07:27,610 ‫Then let's include that here. 126 00:07:30,235 --> 00:07:32,735 ‫(soft typing) 127 00:07:35,730 --> 00:07:39,153 ‫So like this and make sure that it correctly imported. 128 00:07:43,440 --> 00:07:46,072 ‫And then maybe some other element here. 129 00:07:46,072 --> 00:07:48,753 ‫And so indeed we now get both of them there. 130 00:07:49,860 --> 00:07:53,490 ‫But what I really wanted to do now was to create 131 00:07:53,490 --> 00:07:57,360 ‫here another class with exactly the same class name 132 00:07:57,360 --> 00:07:59,703 ‫as we have in this other navigation. 133 00:08:00,570 --> 00:08:02,400 ‫So this one right here. 134 00:08:02,400 --> 00:08:05,577 ‫So I'll now again create a nav class 135 00:08:05,577 --> 00:08:10,577 ‫and this one will have a background color of Rebecca purple. 136 00:08:13,800 --> 00:08:15,720 ‫Now of course, we need to then come 137 00:08:15,720 --> 00:08:18,210 ‫back here and import that. 138 00:08:18,210 --> 00:08:22,793 ‫So just like before, import the styles object 139 00:08:22,793 --> 00:08:24,710 ‫from AppNav.module.css. 140 00:08:31,170 --> 00:08:32,820 ‫And by the way, here we could 141 00:08:32,820 --> 00:08:36,180 ‫also immediately destructure this object. 142 00:08:36,180 --> 00:08:38,250 ‫So for example into nav 143 00:08:38,250 --> 00:08:41,040 ‫because that's the class name that we defined. 144 00:08:41,040 --> 00:08:46,040 ‫And so then here we could just do class name is equal nav. 145 00:08:49,260 --> 00:08:52,653 ‫And so there it gets its other color of purple. 146 00:08:53,670 --> 00:08:56,460 ‫Now here, this was just to demonstrate you 147 00:08:56,460 --> 00:08:59,160 ‫because actually I don't like doing this. 148 00:08:59,160 --> 00:09:00,979 ‫Because then you don't know 149 00:09:00,979 --> 00:09:02,130 ‫that they're coming from your styles. 150 00:09:02,130 --> 00:09:05,700 ‫And when you have a lot of these curly braces inside 151 00:09:05,700 --> 00:09:09,420 ‫your JSX and a lot of variables, then it's nice to know 152 00:09:09,420 --> 00:09:13,290 ‫that these ones here are scoped to the styles object. 153 00:09:13,290 --> 00:09:15,270 ‫Now to really see that this works, 154 00:09:15,270 --> 00:09:17,340 ‫we should actually include 155 00:09:17,340 --> 00:09:20,673 ‫this app nav inside some other page. 156 00:09:22,710 --> 00:09:25,920 ‫So let's actually open up again this year. 157 00:09:25,920 --> 00:09:27,873 ‫So let's say right in the homepage. 158 00:09:30,000 --> 00:09:34,860 ‫So below the page nav, let's also include now the app nav, 159 00:09:34,860 --> 00:09:38,520 ‫even though we will not really need it here. 160 00:09:38,520 --> 00:09:43,140 ‫But anyway, now we get both of them here. 161 00:09:43,140 --> 00:09:44,980 ‫And so now I can show you 162 00:09:46,800 --> 00:09:49,650 ‫in here that both of them start 163 00:09:49,650 --> 00:09:51,960 ‫with the nav class that we gave them. 164 00:09:51,960 --> 00:09:55,350 ‫But then we have here this unique string attached to it. 165 00:09:55,350 --> 00:09:59,580 ‫And so with this, these two classes are actually now unique, 166 00:09:59,580 --> 00:10:02,003 ‫which allows them to have different styles 167 00:10:02,003 --> 00:10:04,140 ‫even though we gave them exactly 168 00:10:04,140 --> 00:10:07,351 ‫the same name here in our modules. 169 00:10:07,351 --> 00:10:12,120 ‫And now let's talk about global CSS because sometimes 170 00:10:12,120 --> 00:10:14,940 ‫we, of course, do need some CSS that is 171 00:10:14,940 --> 00:10:17,310 ‫really global like a global reset 172 00:10:17,310 --> 00:10:20,670 ‫or setting some font properties on the body. 173 00:10:20,670 --> 00:10:24,270 ‫So some stuff that we usually do in a CSS file. 174 00:10:24,270 --> 00:10:26,643 ‫And so for that, we can actually keep including 175 00:10:26,643 --> 00:10:31,643 ‫an external CSS file like we have been doing all this time. 176 00:10:31,650 --> 00:10:35,523 ‫So to do that, let's now actually get our starter files. 177 00:10:36,930 --> 00:10:40,170 ‫So let's come here to our starter files. 178 00:10:40,170 --> 00:10:44,100 ‫And this time I want to copy the entire starter folder 179 00:10:44,100 --> 00:10:48,570 ‫into our project folder so that we can then take out 180 00:10:48,570 --> 00:10:51,420 ‫some files slowly over time. 181 00:10:51,420 --> 00:10:55,050 ‫And starting now with index CSS. 182 00:10:55,050 --> 00:10:56,670 ‫So let's grab this one 183 00:10:56,670 --> 00:10:59,823 ‫and place it into our source folder as usual. 184 00:11:01,320 --> 00:11:04,680 ‫And then let's close this down and come here 185 00:11:04,680 --> 00:11:09,680 ‫and include our CSS file right into main.jsx. 186 00:11:09,780 --> 00:11:12,033 ‫So just like we have always been doing, 187 00:11:12,990 --> 00:11:17,607 ‫so import index.css like this. 188 00:11:20,010 --> 00:11:24,183 ‫And immediately, you see that our styles here changed a lot. 189 00:11:29,352 --> 00:11:31,920 ‫So we now got the special font family here, 190 00:11:31,920 --> 00:11:35,403 ‫which I included from Google Fonts up here. 191 00:11:39,990 --> 00:11:44,430 ‫And we have some global styles about input elements. 192 00:11:44,430 --> 00:11:48,660 ‫And then here this global reset and that's it. 193 00:11:48,660 --> 00:11:52,590 ‫So all this global file has are basically the definition 194 00:11:52,590 --> 00:11:55,988 ‫of the CSS variables, which are going to be global. 195 00:11:55,988 --> 00:12:00,060 ‫And yeah, then basically this resets 196 00:12:00,060 --> 00:12:02,823 ‫but no class names anywhere to be seen. 197 00:12:06,330 --> 00:12:10,083 ‫And now let's close some of these files here. 198 00:12:11,370 --> 00:12:14,160 ‫So as we start working with multiple files, 199 00:12:14,160 --> 00:12:17,040 ‫at some point we have then many of them open 200 00:12:17,040 --> 00:12:21,090 ‫at at the same time, which can become a little bit annoying. 201 00:12:21,090 --> 00:12:24,660 ‫But anyway, what I want to do now here at the end 202 00:12:24,660 --> 00:12:28,290 ‫since we are already speaking about global CSS, 203 00:12:28,290 --> 00:12:32,310 ‫is to show you how we can define some more global CSS 204 00:12:32,310 --> 00:12:34,501 ‫also inside CSS modules. 205 00:12:34,501 --> 00:12:38,793 ‫So let's say that here we wanted a test class, 206 00:12:41,760 --> 00:12:44,640 ‫let's say with the background color of red. 207 00:12:44,640 --> 00:12:47,370 ‫Which for some reason we wanted to include 208 00:12:47,370 --> 00:12:51,813 ‫into our homepage but without importing this module. 209 00:12:52,920 --> 00:12:56,553 ‫So let's open that homepage right here. 210 00:12:57,607 --> 00:13:00,330 ‫And so again, let's say that now I wanted 211 00:13:00,330 --> 00:13:04,320 ‫to do class name and then test. 212 00:13:04,320 --> 00:13:06,090 ‫So just a regular way. 213 00:13:06,090 --> 00:13:10,080 ‫So attempting to use a global class name here. 214 00:13:10,080 --> 00:13:11,820 ‫So this really wouldn't work 215 00:13:11,820 --> 00:13:14,940 ‫right now because as we already know, 216 00:13:14,940 --> 00:13:17,070 ‫this class that we just exported 217 00:13:17,070 --> 00:13:19,928 ‫from the CSS module is not prefixed. 218 00:13:19,928 --> 00:13:22,270 ‫Or actually it got added to the end 219 00:13:22,270 --> 00:13:26,010 ‫like this random ID like this, right? 220 00:13:26,010 --> 00:13:30,439 ‫And therefore, our homepage here cannot read 221 00:13:30,439 --> 00:13:32,319 ‫just the test class. 222 00:13:32,319 --> 00:13:35,610 ‫So that's the whole reason why we have to export 223 00:13:35,610 --> 00:13:38,550 ‫our classes here into the styles object. 224 00:13:38,550 --> 00:13:40,380 ‫And then use it like this. 225 00:13:40,380 --> 00:13:44,550 ‫But again, let's say that now we wanted to use it like this. 226 00:13:44,550 --> 00:13:48,900 ‫So basically, we wanted to create a global test class. 227 00:13:48,900 --> 00:13:53,900 ‫So we could do this by using this global function 228 00:13:54,735 --> 00:13:57,900 ‫and then wrapping our selector in there. 229 00:13:57,900 --> 00:14:00,090 ‫And so now as we save this 230 00:14:00,090 --> 00:14:04,350 ‫then this test class gets global as the name says. 231 00:14:04,350 --> 00:14:08,190 ‫And so now our H1 here can access the test class 232 00:14:08,190 --> 00:14:12,450 ‫without that weird string attached to it in the end. 233 00:14:12,450 --> 00:14:14,820 ‫Now this is not really helpful, 234 00:14:14,820 --> 00:14:16,620 ‫but it was important to show you 235 00:14:16,620 --> 00:14:18,960 ‫how this global function works. 236 00:14:18,960 --> 00:14:20,910 ‫Because now we can use this 237 00:14:20,910 --> 00:14:23,220 ‫in order to style the active link 238 00:14:23,220 --> 00:14:25,841 ‫like we have been talking about before. 239 00:14:25,841 --> 00:14:28,680 ‫So remember how the page that is 240 00:14:28,680 --> 00:14:33,071 ‫currently active gets the active class attached to it. 241 00:14:33,071 --> 00:14:35,161 ‫So like this. 242 00:14:35,161 --> 00:14:40,161 ‫Now if we were trying to do this so .nav 243 00:14:40,860 --> 00:14:45,360 ‫and then selecting the active class in there, 244 00:14:45,360 --> 00:14:47,250 ‫this wouldn't work. 245 00:14:47,250 --> 00:14:50,351 ‫So let's try that with a blue 246 00:14:50,351 --> 00:14:54,690 ‫or maybe better a green background color. 247 00:14:54,690 --> 00:14:57,390 ‫And so you see that indeed it has 248 00:14:57,390 --> 00:15:00,540 ‫the active class name but it doesn't work. 249 00:15:00,540 --> 00:15:02,880 ‫And so that's because again, 250 00:15:02,880 --> 00:15:06,360 ‫CSS modules will see this class here 251 00:15:06,360 --> 00:15:09,390 ‫and it will then add that random string to it. 252 00:15:09,390 --> 00:15:12,690 ‫And so then that class will be different from that one. 253 00:15:12,690 --> 00:15:14,280 ‫And so the solution to that 254 00:15:14,280 --> 00:15:18,603 ‫in a case like this is to use global. 255 00:15:21,423 --> 00:15:24,270 ‫And now that works. 256 00:15:24,270 --> 00:15:26,290 ‫So now we got our green background 257 00:15:27,210 --> 00:15:29,670 ‫and if we click here, then it moves there. 258 00:15:29,670 --> 00:15:30,993 ‫And here the same thing. 259 00:15:32,031 --> 00:15:35,520 ‫So this global function here is usually, 260 00:15:35,520 --> 00:15:38,070 ‫mostly important when we are working 261 00:15:38,070 --> 00:15:42,063 ‫with some classes that are provided from external sources. 262 00:15:42,063 --> 00:15:44,790 ‫So in this case, the active class is given 263 00:15:44,790 --> 00:15:47,310 ‫to us by React Router. 264 00:15:47,310 --> 00:15:49,080 ‫And so then if we want to style that, 265 00:15:49,080 --> 00:15:51,494 ‫we need to use this global thing. 266 00:15:51,494 --> 00:15:55,650 ‫So otherwise if we just want to define some global classes, 267 00:15:55,650 --> 00:15:57,780 ‫we wouldn't do it inside a module 268 00:15:57,780 --> 00:16:01,953 ‫but just inside our global CSS file, which is this one. 269 00:16:04,487 --> 00:16:06,690 ‫And so this is actually all that 270 00:16:06,690 --> 00:16:09,900 ‫I wanted to show you about CSS modules. 271 00:16:09,900 --> 00:16:11,400 ‫There's also something else, 272 00:16:11,400 --> 00:16:13,920 ‫which is called composing classes. 273 00:16:13,920 --> 00:16:16,380 ‫But I think that's not really important 274 00:16:16,380 --> 00:16:18,660 ‫so we're not going to talk about that here. 275 00:16:18,660 --> 00:16:21,360 ‫Because this is really all you need to know in order 276 00:16:21,360 --> 00:16:25,410 ‫to effectively use CSS modules in your own projects. 277 00:16:25,410 --> 00:16:27,693 ‫And of course, also in this one.