CSS modules in ReactJS

This post is originally written here with images and code samples -> https://easyontheweb.com/how-to-use-css-modules-in-reactjs/

CSS modules for ReactJS are an absolute gift of God if you’ve ever suffered from issues related to global CSS names clashing. Some of you might not have the smallest bit of idea what I’m talking about here but for the ones who do, I feel you, I really do.

I have had experience with a project where all the CSS was written in a single file and we had no naming convention like BEM followed. Even though writing CSS this way when you’re starting with a project might seem faster and easier, in the long run – it is a nightmare.

In this article, we’ll explore using CSS modules in ReactJS to write and structure the CSS for the our React components and we’ll see how using them can get us out of an unplanned mess in the future.

What are CSS modules
According to their own repo,

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

CSS Modules Repository
What this means is that even though you’ll write your CSS code in a normal CSS file as you do, they will not be globally scoped but instead be locally scoped by default, ie, those classes will only be available in the components you import them into and use them.

Under the hood, CSS modules compile to something called interoperable CSS but we as developers do not really need to care about that, we write CSS in a file normally as we would.

A very important thing to keep in mind is that the concept of CSS modules is not something that is implemented on the browser side but instead this takes place during compilation with the help of a module bundler like Webpack or Parcel.

We’ll see how this CSS gets served to the browser but what you need to keep in mind is that our application gets built with the CSS format itself and nothing happens on the browser end.

Let’s see an example of how classes get formed by CSS modules and how they keep the CSS local to the component they are used in.

Your React component

The Sidebar.module.css file
Ignore the syntax of importing and using the modular CSS for now, but it must be apparent that we are using the SidebarWrapper class for our div and the CSS file has no special naming.

But you’ll be pleasantly surprised when you check the browser and inspect your div and see something of this sort :-

Do you notice the name of the class? This is how CSS modules implement localisation. They format the name of the class in such a way that they do not collide with each other (Unless you have written a class with this name, in which case – WOW :P) .

How to use CSS modules in ReactJS
The first question that might have come to your mind after all this discussion is how you can use CSS modules in your ReactJS application.

If you are using create-react-app v2 or higher then there’s some really good news for you. CRA2 has in-built support for CSS modules and you do not actually need to do anything except get going with it. You can totally skip this section in that case.

If you are using create-react-app but version 1 then I would highly recommend you to upgrade it to at least version 2.

In case you are not using create-react-app at all then you may use one of these two modules – react-css-modules or babel-plugin-css-modules and let your package manager handle the heavy stuff for you.

Writing modular CSS
Once your React application is ready to work with modular CSS the only thing left for us to do is write the modular CSS.

Let us see what steps do you need to take for this and then we’ll expand on each step one by one :-

Create your CSS file with naming convention as [filename].module.css (a must for CRA).
Add your classes and animations to this css file.
Import your file in whatever components you want it to be imported into.
Add the classes to the className attribute of your JSX elements.
Creating the css file
What I usually follow and would recommend you to follow as well is to create a separate css file for each component of your React application. Isn’t that why we are using css modules for in the first place? Separation of concerns, right?

The naming convention to be followed has to be your filename followed by .module.css as the file extension. This enables CRA to understand that these are modular CSS files.

Adding your classes and animations
Once you’ve created your file the next thing to do is just writing your CSS code as you normally would. One thing widely followed in modular CSS files is to follow camel case for naming our classes instead of using – separated names.

This is done because it is easier to access the class names in our components when we do use these written classes.

Importing and using the CSS in components
We’ll merge step 3 & step 4 into this single section because they both involve including our written CSS in our components.

Importing styles is just like importing any other Javascript module. You can destructure the object being imported during the import as well and import only certain classes if you would like.

As you can see in the examples we are importing the styles in the object styles, you may use any name you like but styles and classes are the most commonly used ones.

The classes that we wrote in our CSS files are available as properties on this object. We can extract any property and use them as className in the JSX of our component like we did with the div in the above example.

You know what happens next as we’ve already discussed the localisation of CSS classnames and how the browser is given a different formatted name instead of the class “Sidebar” directly.

Using compose with CSS modules
Another cool feature that you get with CSS modules is the ability to compose your CSS classes. What this means is just like in OOPs we compose object classes using other classes we can make a CSS class that is made up of properties from other CSS class.

If you’ve worked with SCSS before, it’s like the @extend keyword.

The concept of composing classes in CSS is a very powerful one that let’s you reuse already written code. As you can see in the above example, composition is even allowed from classes written in a different CSS module altogether.

I hope you will try out CSS modules in your next React project, trust me they are super cool.

For more articles on React please check out the rest of the blog here -> React articles.
If you’re on Facebook and would like to join me and other web developers in the Easy on the web group please click here.