#9: Global CSS vs CSS Modules in Next.js | Key Differences & Styling Best Practices

Hello What's up Guys Today in this Video We will Show How to Add CSS and CSS Modules in Our Next Application. Yes guys, today's video is very important because in yesterday's video I told you how you can install tail CSS for basically styling your application. And in this video, I told you two methods. So please do check out this video. Today in this video I will tell you how you can install the CSS which you are seeing. Ok? Because there may be many of you who may not like the tail. Right? So you will obviously prefer CSS. And CSS also has multiple. We have a modules we have a global CSS. We have external style sheets then we have a tail wind CSS. Well, I told you this yesterday. Mother-in-law is also there. And then CSS in JS basically style components. So, I would like to tell you that I have already uploaded a video on all this a long time ago. You can check them out. But yes now it's version 15 nex. Basically JS which is the latest one. So I told the tail CSS. Today in this video we will see what are CSS modules and how global CSS works. Believe me this video is very important and you have to understand some differences between CSS Modules and Global CSS and this can be asked in your interview also. So without any delay let us start the video. So first of all you can see this is our application. And in this application someone asked me a doubt in the comment. Isn't it? So we solved them by saying that the nap bar should not be visible in the about page. So something like this is happening right now. So let me do one thing, that doubt which I had, I hope it would have been cleared. And if you also have any doubt then please comment. I will definitely help. And I think this is a very useful doubt so guys I will also make a video on it. So what do I want to do right now? I am closing the application for now. This about me, I added this user inside our actual root group that we had created. Because I want the nap bar to be visible in every route to whichever user is accessing it. Ok? So this way my work is done. Now again I come here. I started this application of mine with the help of npm run and then dev. So let me tell you, first of all we look at global CSS. So you should notice that whenever you want with tail or without tail, if you create an application in Next JS, still you will see global.cs file which is visible at the bottom, you will definitely find it. Ok? And I guess there might be one more thing here, oh, okay, it is not visible right now, it is not a big deal but you will get global dot css and here you can already see all this, so let me do one thing, whatever you are seeing here, any idea what this could be, I mean, he has given three properties to the body, so what could this be, let me do one thing, here he has used this variable, which is a very good thing, you can see this of the background here, let me do one thing, right now, if I take you to my application. So currently the background color of my application is pitch black. Right? So what about Guys? This is the background color they have used here. Now for the time being I am doing one thing. I will redo it here. Ok? I redid it for a while. Now if I go here. It is working. Let me refresh it once and show it to you guys. And boom guys. Now you can see that its style here has changed. Meaning the background color which was black a while ago , now it's red. Why did this happen? What is the reason behind that? The reason is, what are you doing here inside global dot CSS? This body of yours is an element, okay? This body element of yours, you can call it a tag or anything, you are targeting it. And you told me that I want its background colour to be red. So this is your global CSS. It means the moment you add any CSS property inside this global CSS, then it will be applied on the entire page of your application, wherever you import it. This is the beauty. So it's like guys, when you used to work in normal HTML, CSS, JavaScript, you used to create an external CSS file and apply it, so you can consider it global. This will be applied to every page of yours. Ok? And by that I mean you can see it here. I haven't even imported it here. I have imported it in the layout. If I remove this from the layout, let me refresh it once again. Although there is no need to refresh for some reasons. I don't know why this happened. But now you see he is gone. There is no styling at all. But the moment I add this. Look, my style has been added there. So importing is very important. And this is your global CSS. Whatever you add here will be applied everywhere. For example, right now I will make it black instead of red. Black looks a little better. Right? Like right now if I hover over this. Whatever links I have, if I hover over them, their color changes. Ok? So you ca n't target a tag very easily here. Whenever someone hovers over A, I would like to make its color red. And boom guys look it is changing. Now you can ask a question. Like, when I go to the navigation part, here we have not used the anchor tag anywhere. I did not use anchor tag anywhere. But still when I am styling it I hovered over the anchor tag. I'll tell you what it is. If I go to mainspect, if I tag this, do you see where is the link tag? What is link tag? Are you seeing any links of LIN anywhere? The ones you are seeing are not visible anywhere else, right? Here you can see only the anchor tag. So it is very important for you to understand this. Brother, this next reaction, whatever it is, is to make your life easy. I mean our browser understands only HTMLS, JavaScript and nothing else. You are seeing that whatever it is, it is getting converted and is visible to you in the anchor tag only. And one more thing to remember is that whenever you add classes it appears in the tail something like this. I do another thing. Let me go to my about page. Ok ? The H1 in the About page is a halo. I have to give the name of the class here. We don’t offer a class. Here we give the class name. What to give? Class name. Here I give the common heading like this. Ok ? Because it can be used at many places. But right now I have given only one place. I will copy this. I am traveling on Global. Look carefully. And obviously there is no need to say anything. I will have to use dot. And this is how I work here. This time I would like to give pink. That's ok. Ok. I am walking here. I will go on about it. And I would like to refresh one more time. Ok. C You don't seem to know that much. The light of this color is very pale. But this pink color has been added here. I have nothing to do with him. Just want to show you this. When you hover here just have a look at here. Like class name we wrote. But here you can see the class. Please pay attention. Look, you can be asked small things like we have written the class name there but here you can see the class. And second thing, whatever name of the class I have written, I can see it here as it is. There are two things you need to keep in mind for now because this is going to change when we work on CSS modules. So you should keep this in mind. He is doing some such work in global CSS. Ok? That's all he had to show. And this is how global CSS works. I would like to remind you again. I have already uploaded world best CSS course. You have n't checked out yet. I read your hands. Do check this video out once. You will not find a better CSS course than this. You can see guys, I worked very hard on this. So now let's look at CSS modules. I hope you understood Global CSS. No big deal. You can easily accept it in the same way as normal CSS which is used. Just don't forget to import yes. And do n't forget the import method. Where we are importing and giving whatever file is there. This is the third change here. You can also see the method of viewing imports. Alright now let's talk about CSS modules. What are CSS Modules? Many times it may happen that you have an I would like to go to my service page. With let's you have already named a file. I mean you have already named a class. That is a common heading. Ok? I used it elsewhere. But I want to have an H1 on my services page as well. There also, the name of the class should be a common heading but it should be different. Right? So in that case you would use CSS modules. This means that you can create your own CSS module for this particular component. In which whatever class name you add on it, it will target only this. And whatever classes you are using in it, even if they are duplicates and already exist in the global CSS, still we have nothing to do with it because that CSS module will be dedicated only to the page of this particular service. Let's assume you have five different components. You can say that there are different pages. About page is different, service page is different , portfolio is different, contact page is different. And you want to add different styles to each one which are independent from each other. So there you create a CSS module for a service. Create a CSS module for your about. Create a CSS module for your portfolio. Create a CSS module for your contact. Just understand it in this way. Let me show you right now. I am going on the service side. I am creating a file here. You can write CSS dot module in this way. And else you write service dot. So guys what am I writing here ? Service dot module dot CSS. Ok? You need to write this module dot css. There is nothing to do here. Do the same thing that you selected under that common heading. Now, I would like to make its colour red. Ok? Look carefully. The common heading is also on my global dot CSS. If you remember here we have a common dot heading. I used the same class name here. See, I am using the same class name. If you had done this on the same file, the one at the bottom would have got applied. Someone above would have ignored it. That's the main drawback, right? But now here it is an individual brother. Whatever CSS files the modules have, they have nothing to do with global. Ok? Neither does it have anything to do with that. Vicesvor, you say it. So I'll go here. Now look carefully. Right now if I go here, I 'll refresh once. Although there is no need for it. If I go on service then look what color do I see here ? I am seeing pink color. I can see the color that I applied in global dot css. Why? Because in global dot CSS we have the same class name that is your common heading which we have in our service page also common heading but I want red color here that is why we created service dot module dot css file and we have already added the color there but how will our service file know that brother we have created a specific CSS file for you so relax whatever you want you can keep adding there nobody has to do with it but you don't have to tell us this thing right that is it, here you see carefully this is very important you cannot miss it and that is how will we import it okay so import now it is up to you here the normal convention is style so everyone then writes classes or class also but let's go with style only from where dot forward slash look service dot module css did you notice like the moment when you were importing the global CSS in the layout file. This is how we did. Right? By writing simple import keyword, we placed the path of the file here. But when you create files with modules dot CSS. And then when you have to import it. So this is it. It has to be done this way. Like import keyword is same in both. The root is the same in both. But you have to give it a name and then you will have to write from. Now what will happen with this? This class name which you have given in this manner, you have to write it within curly bases. Ok? And then you have to say here style dot, right? Even if I remove this, does 'Let's Check It Out' auto suggestion come? Style dot neck auto suggestion is not coming. But let's check it out, what is it? Common, you can see guys, if we are using huffen then he is not taking it at all. So now let me tell you if underscore was there, it would have taken it. So let us do one thing. I will run it here. Ah let me underscore this. Control s save let me do one thing. I also underscore it on the global dots so that it does not appear that both are different. But anyway, now we are not going to separate. Isn't it? Control s Save. Look, it is the same here too. And ah we have ah same here too. I am going to the page now. Control S. I 'm saving. Look, the way to do this is also different. Even the way you add this style to your guys is different. There the file name was given inside double code. End of discussion. Meaning, the name of the class. But here you have to write in that style. And then look at the dot carefully. Here we have a dot and then that is the name of the class. This is how you have to do it here. And there are also curly buses. Now if I go here one more time. Look guys, our work is done. Look which color is coming here? Red colour. And this is the color that I have defined here. If I still don't believe it, I will turn it yellow. Look, yellow colour has come. So ya guys this is it. That's it for this video today. But one thing is very important which the interviewer may ask you. Look carefully. I told you one difference. You will see the difference when you are importing. Whatever module dot cs is there with global and then normal, the method of writing there is different. Then when you want to apply any attribute basically in any element or any tag, right there you can see that you have to give curly bases. And then guys you have to apply the style which you like, the name by which you have imported it by dotting it. So this was your second difference. The third and most important difference is that most of you may not even notice because you guys may not have much to do with it, I mean, but now if I hover over it, look, tell me one thing, service underscore common underscore heading underscore PIEIP what is this, which class name was this brother when I mean you, then tell me one thing, which class name is this and when did I give it because I gave the class name just now live in front of you, I do not remember or my memory is not so weak or so fragile that I do not know that I have given some strange name. I remember it very well. I have given the common underscore heading. Right? You can see it here, you can see it here. But what is this? What is this thing? So guys do you understand what I said? You have the same class in global also. And here also we have the same class. So CSS does not have any power. Hey brother, this is the common heading we are talking about. No, you see what is happening here, it has been transformed deliberately so that there is no confusion, you are understanding further, right? On one hand, if you use a common heading, then you will see the same class name, the global one. Next, if you are using module. CSS, then deliberately they change it in this way, convert it into something different so that there is never a conflict in the class name, we feel that brother, they have kept it separate from both, but in reality, whatever is happening, okay, you should never forget these three differences. So now guys it's up to you whether you have to use Tailwind or you have to use these modules. Ok? Alright guys, I would like to tell you that if you like the video then please like it. Share generously with friends. If you have any doubt in your mind, please comment. I will definitely help you. If needed I will make a video for you as well. Ok? And our next target is 8 like subscribe. If you haven't subscribed yet, please do. I will meet you in tomorrow's video. Till then guys thank you so much. Take care. [music]