‫Let's now learn all the fundamentals
‫of CSS modules that we need, which is actually really easy.
‫So luckily for us, CSS modules already come
‫out of the box both with Create-React-App and Vite.
‫So there's nothing to install
‫in order to make CSS modules work.
‫Now, as we just learned in the previous lecture,
‫what we do with CSS modules is
‫to create one external CSS file per component.
‫So let's do that here for this page navigation.
‫So right here in the component folder,
‫we will create a new file.
‫But now this file needs to follow the convention
‫of the name of the component.
‫So page nav.
‫And then the important part is
‫that here we add .module.css.
‫And so this is now the CSS module
‫for the page navigation component.
‫And so now here we can define some classes.
‫So let's for example, create a nav class.
‫And then I will just write some very simple styles here.
‫And let's say justify content space between,
‫just so we have some styles that we can see.
‫Now here really, we need to define class names.
‫So we cannot use the element selector
‫like this for example.
‫So for example, removing the bullets here from this list
‫by using the UL selector is not going to work.
‫Now if we save this, then you see that
‫of course nothing changed here for now.
‫And that's because we still need
‫to use these class names now in our markup.
‫So we have to connect these two files
‫by basically importing these styles here
‫into this page nav component.
‫And then as usual, we add these classes
‫that we define here to our elements.
‫Import and then all the classes that we define
‫in the module are basically exported
‫into this one big object that we can then use.
‫And usually we call that simply styles.
‫So the same folder and then page nav.module.css.
‫And so now this nav class that we defined
‫here is available on styles.nav.
‫And so here we define our class name.
‫And now that is no longer a string
‫like we used to do up until this point.
‫But now we need to enter JavaScript mode
‫to then use styles.nav.
‫And if we save this now we see
‫that some styles here have been applied.
‫Well, not really what we wanted.
‫So yeah, here Flexbox actually makes no sense
‫but it makes sense in the list.
‫So right here and for some reason it seems
‫like the styles here have actually been applied.
‫So this does work, but it's a really bad idea.
‫Because this will then select all the UL elements
‫on the entire application, which defeats the whole purpose
‫of CSS modules where this styles here,
‫so these classes are supposed
‫to only be applied to this component.
‫So never use the normal element selector.
‫But here instead, we will now basically select
‫all the unordered lists that are inside our nav class.
‫And so then here just to test this one,
‫let's add some orange red background color.
‫And there we go.
‫So here we have a nice ugly navigation
‫now styled with CSS modules.
‫Now notice how here we got this really weird class name.
‫And so this is what CSS modules does.
‫So they take our class name that we defined ourselves
‫and then they attach like this random ID here to the end.
‫And so if we then create another nav class
‫in some other CSS module that will get
‫a different random id.
‫And so then these are in the end different classes again.
‫So down here we can then see the styles
‫that have been applied.
‫And indeed there is our background color.
‫And then here the same.
‫So here we see that we got the same weird class name,
‫which comes out of this one that we created here.
‫And so now let me show you how this can
‫really avoid naming clashes.
‫So a problem where we or another developer on the team might
‫accidentally create a new class name that already exists,
‫which might then mess up all the other ones.
‫So the other elements that use that class name.
‫So that's a common problem when we use global CSS
‫like we have been doing.
‫But so let's now avoid that.
‫And in order to do that, let's first create a new page here,
‫which will be called app layout.
‫So because we already have a component called app.
‫And so this will basically be for the main application
‫where we have that list on the left side
‫and the map on the right side.
‫So let's then add another route for that page
‫right here or actually in the app file.
‫And so let's just duplicate this.
‫And here the path will be app and then app layout.
‫Okay, importing that.
‫And now here, I will not add that to the main navigation
‫but instead let's change the link here on the homepage.
‫So here we now move to pricing, but let's go to app.
‫So go to the app.
‫And so now if we go home and then click here
‫that should go to the app.
‫But I just remembered
‫that we actually haven't added any content here.
‫So now let's do that and there we go.
‫So now we have another route working in our application.
‫And now let's also create a navigation for this app.
‫So that's going to be a new component.
‫And so let's call this one the app nav JSX.
‫And let's right away also create CSS module.
‫So AppNav.module.css.
‫And again, these are just basically placeholder components
‫that we will replace later with the actual content.
‫So let's just use a nav here.
‫And then I will just write app navigation.
‫Then let's include that here.
‫(soft typing)
‫So like this and make sure that it correctly imported.
‫And then maybe some other element here.
‫And so indeed we now get both of them there.
‫But what I really wanted to do now was to create
‫here another class with exactly the same class name
‫as we have in this other navigation.
‫So this one right here.
‫So I'll now again create a nav class
‫and this one will have a background color of Rebecca purple.
‫Now of course, we need to then come
‫back here and import that.
‫So just like before, import the styles object
‫from AppNav.module.css.
‫And by the way, here we could
‫also immediately destructure this object.
‫So for example into nav
‫because that's the class name that we defined.
‫And so then here we could just do class name is equal nav.
‫And so there it gets its other color of purple.
‫Now here, this was just to demonstrate you
‫because actually I don't like doing this.
‫Because then you don't know
‫that they're coming from your styles.
‫And when you have a lot of these curly braces inside
‫your JSX and a lot of variables, then it's nice to know
‫that these ones here are scoped to the styles object.
‫Now to really see that this works,
‫we should actually include
‫this app nav inside some other page.
‫So let's actually open up again this year.
‫So let's say right in the homepage.
‫So below the page nav, let's also include now the app nav,
‫even though we will not really need it here.
‫But anyway, now we get both of them here.
‫And so now I can show you
‫in here that both of them start
‫with the nav class that we gave them.
‫But then we have here this unique string attached to it.
‫And so with this, these two classes are actually now unique,
‫which allows them to have different styles
‫even though we gave them exactly
‫the same name here in our modules.
‫And now let's talk about global CSS because sometimes
‫we, of course, do need some CSS that is
‫really global like a global reset
‫or setting some font properties on the body.
‫So some stuff that we usually do in a CSS file.
‫And so for that, we can actually keep including
‫an external CSS file like we have been doing all this time.
‫So to do that, let's now actually get our starter files.
‫So let's come here to our starter files.
‫And this time I want to copy the entire starter folder
‫into our project folder so that we can then take out
‫some files slowly over time.
‫And starting now with index CSS.
‫So let's grab this one
‫and place it into our source folder as usual.
‫And then let's close this down and come here
‫and include our CSS file right into main.jsx.
‫So just like we have always been doing,
‫so import index.css like this.
‫And immediately, you see that our styles here changed a lot.
‫So we now got the special font family here,
‫which I included from Google Fonts up here.
‫And we have some global styles about input elements.
‫And then here this global reset and that's it.
‫So all this global file has are basically the definition
‫of the CSS variables, which are going to be global.
‫And yeah, then basically this resets
‫but no class names anywhere to be seen.
‫And now let's close some of these files here.
‫So as we start working with multiple files,
‫at some point we have then many of them open
‫at at the same time, which can become a little bit annoying.
‫But anyway, what I want to do now here at the end
‫since we are already speaking about global CSS,
‫is to show you how we can define some more global CSS
‫also inside CSS modules.
‫So let's say that here we wanted a test class,
‫let's say with the background color of red.
‫Which for some reason we wanted to include
‫into our homepage but without importing this module.
‫So let's open that homepage right here.
‫And so again, let's say that now I wanted
‫to do class name and then test.
‫So just a regular way.
‫So attempting to use a global class name here.
‫So this really wouldn't work
‫right now because as we already know,
‫this class that we just exported
‫from the CSS module is not prefixed.
‫Or actually it got added to the end
‫like this random ID like this, right?
‫And therefore, our homepage here cannot read
‫just the test class.
‫So that's the whole reason why we have to export
‫our classes here into the styles object.
‫And then use it like this.
‫But again, let's say that now we wanted to use it like this.
‫So basically, we wanted to create a global test class.
‫So we could do this by using this global function
‫and then wrapping our selector in there.
‫And so now as we save this
‫then this test class gets global as the name says.
‫And so now our H1 here can access the test class
‫without that weird string attached to it in the end.
‫Now this is not really helpful,
‫but it was important to show you
‫how this global function works.
‫Because now we can use this
‫in order to style the active link
‫like we have been talking about before.
‫So remember how the page that is
‫currently active gets the active class attached to it.
‫So like this.
‫Now if we were trying to do this so .nav
‫and then selecting the active class in there,
‫this wouldn't work.
‫So let's try that with a blue
‫or maybe better a green background color.
‫And so you see that indeed it has
‫the active class name but it doesn't work.
‫And so that's because again,
‫CSS modules will see this class here
‫and it will then add that random string to it.
‫And so then that class will be different from that one.
‫And so the solution to that
‫in a case like this is to use global.
‫And now that works.
‫So now we got our green background
‫and if we click here, then it moves there.
‫And here the same thing.
‫So this global function here is usually,
‫mostly important when we are working
‫with some classes that are provided from external sources.
‫So in this case, the active class is given
‫to us by React Router.
‫And so then if we want to style that,
‫we need to use this global thing.
‫So otherwise if we just want to define some global classes,
‫we wouldn't do it inside a module
‫but just inside our global CSS file, which is this one.
‫And so this is actually all that
‫I wanted to show you about CSS modules.
‫There's also something else,
‫which is called composing classes.
‫But I think that's not really important
‫so we're not going to talk about that here.
‫Because this is really all you need to know in order
‫to effectively use CSS modules in your own projects.
‫And of course, also in this one.