How we use CSS Modules in React
Hi everyone, today
I will try to explain CSS Modules which is a very important topic for React.
CSS Modules have a structure that allows us to use our CSS files in React without causing confusion. But first, let’s look at these 4 topics that allow us to write CSS in React.
1) Inline Style
2) CSS Stylesheets
3) CSS Modules
4) Styled Components
With these 4 structures you have seen, we can write CSS in the project we have created for React.
The most common ones we will use are CSS Modules and Styled Components.
We will talk about Styled Components in detail in another content. Now we will talk about CSS Stylesheets, which have similar features with our CSS module structure. Because there are differences between these two different usage methods.
CSS Stylesheets
This structure is the classic structure that allows us to write css in a separate file in normal HTML-CSS usage and use it in our projects. We write css in a different folder and then we call and use it using the link tag from our html extension files that we want to use.
We can do this in React as well, but there is a problem here.
Using the CSS Stylesheets method in React is not as logical as using it in a regular HTML-CSS project. Because the codes we will write in each .css file that we will create in a different file in the HTML-CSS structure will only be defined in the HTML file that we want to use with the link TAG ,But in a different HTML file, this CSS file will not be effective and will not cause any confusion.
For example, we define the index.htlm file and we define classes in the class that we want to be specific to this file, such as header, div, footer. And then we call the header, div, footer classes in our index.css file and make special designs for them. Then we create a page2.html file and here we open tags that we need to use for html such as header, div, footer. We can use it by making different styling with their names.
But we cannot use this situation in React. Because React’s filing system is not in a structure that allows it.
When filing internally, React keeps javascript codes and CSS codes inside a container div in a single root class. In this case, we will keep it in an external file that you will write, which means that each of your CSS code is accessible and error-prone in each file.
For example, you will design a 2-page web frontend in app.js and page2.js files. And let’s say you have made the naming that you will use in the className named header.
Here, even if you open sections with header name in 2 different CSS files and write different codes, it means that you cannot use the header name by sharing it according to different uses within different pages .This is where CSS Modules come into play. CSS Modules allow you to keep your different CSS codes in different files for different pages, thus avoiding confusion.
So how do we use CSS Modules?
The use of CSS Modules should be as you can see in the image above.
First we specify the file name, then .module and specify that it is according to the modulation system, and we specify the file type by saying .css.
Then, when we want to call the codes you wrote in this file, we use them by naming them differently from the use in CSS Stylesheets.
Then there is a difference when using them in classNmae. For example, you can view the pictures above.
Here, instead of naming our class in quotation marks, we use {} in parentheses, which are JSX-specific. Here, first we open our parentheses and then we use the name we gave to the CSS module file that we want to use before, and we use it by giving it the name .class.
Finally, let’s examine how the class name we named in the source codes of the project is customized using CSS Modules.
In order to avoid this class name that we named is the same as the names in different files, the software automatically makes a special nomenclature and saves them in the background.
I tried to explain CSS Modules as much as I could. I hope that has been revealing. I have created a repo on github so that you can better understand this usage, you can review it by clicking here.
Note: This feature is only available in react-scripts@2.0.0 or higher
