Using CSS Modules In React App
Welcome back reader to another blog where I try to explain a technical topic in the most simple way possible. This blog will focus on what CSS Modules are and how you can use them in your React application (bootstrapped with Create-React-App).
What are CSS Modules?
According to the official repo CSS Modules are “CSS files in which all class names and animation names are scoped locally by default”. What does this mean? CSS Modules are not specs or an implementation in the browser, but rather a process in a build step (with the help of Webpack or Browserify) that changes class names and selectors to be scoped (kinda like namespaced). I think an example will help to better explain this concept.
Above we are applying the greeting class to a h2 tag.
The image above shows that we are applying some CSS to the h2 tag. What I just showed you is how you will typically add styles to HTML elements. The browser is able to understand this two files and apply the CSS styling without any problems or extra step.
CSS Modules takes a different approach. Instead of writing plain HTML, we need to write all of our markup in a JavaScript file, in our case I will use a main.js file. Here’s an example of how this might look:
During our build step, the compiler would search through that styles.css file that we’ve imported, then look through the JavaScript we’ve written and make the .greeting class accessible via styles.greeting. Our build step would then process both these things into new, separate HTML and CSS files, with a new string of characters replacing both the HTML class and the CSS selector class. Now the HTML and CSS generated by our build tool might look like this:
As you can see the greeting class was transformed in both the HTML and CSS files. During the build step a new class was generated dynamically with a unique identifier.
You might be wondering, why would you use CSS Modules? CSS Modules tries to solve a problem that you might encounter when working on medium to large projects and that is global scoping in CSS. By default CSS scoping is global and the reason for this is that we want our styles to cascade throughout our project. At times this is what you want, but if you want your styles to be locally scoped CSS Modules is one of the best solutions. The unique identifiers created by CSS Modules can definitely help in localizing our scope.
CSS Modules In React Application
There are two different ways of using CSS Modules in a React application.
When using the Create-React-App tool you are provided with a handy command eject that allows you to configure Webpack among other features at your heart content. This is one way to use CSS Modules in a React application. Obviously there are a few more steps you need to complete after you have ejected, but I will not go over them here. If you are interested I recommend reading this blog on it.
Instead I will go for option number two, which is the easiest way of using CSS Modules in a React app. Note: this feature is only available with react-scripts@2.0.0 or higher. This option only requires that you name and import your CSS files differently.
Not using CSS Modules:
Using CSS Modules:
As you can see the naming convention for the file is [name].module.css. This lets React and Webpack know that we are using CSS Modules.
I made some changes to the Button.js file in order to use CSS Modules. On line 3 we are importing the CSS module stylesheet as styles , but you can use any name you like. At line 6 we are using the CSS styles we just imported.
You can gain access to the styling in the styles import (line 3) by referencing it as a JavaScript object. That is why we use styles.error_btn at line 6.
If you were to inspect this element using the Chrome Dev Tools you will see something like this:
As you can see the class was transformed and an unique identifier was added as well.
CSS Modules is a great approach for making CSS locally scoped and for preventing naming clashes in medium to large projects. I hope you were able to gain a better understanding of how CSS Modules work, their benefits and how you can implement them into your React application.
