The CSS Modules: How to use them and why they are helpful

Have you ever came across a situation when you've created a component but having a hard time thinking about a class name for it. Because you've used the same class name elsewhere and now you are out of innovative class names.
or
You are working on a big project which has many developers working on different CSS files and you are having a hard time keeping up with the class names.

Here comes the CSS modules to the rescue.

What are CSS Modules

The idea behind CSS Modules is, Local scoping of the CSS files.
By using CSS Modules your CSS class name would become similar to local variables in Javascript.

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

In Simple words, The CSS module is nothing but a CSS file, Which is when imported, every class name and animation would be scoped locally to the component that is importing it. This allows us to reuse the class names without worrying about conflicts with other class names in our application.

How does it work

The CSS modules are not officially supported by the browsers, rather they need to be compiled during the build process using webpack or Browserify. which creates a unique class name for every class and animations.

Let's look at an example:

This is our regular code

<button class = "submitButton">submit</button>

.submitButton{
background: purple;
}

But when compiled, it converts to this

<button class = "_src_styles_module__submitButton__2WrTz">submit</button>

Decoding the compiled class

/* Decoding the compiled class */

_src_styles_module  <=====   Location of the file
submitButton     <======    Actuall class name
2WrTZ            <======    Random hash which compiler 
                             generates to make the class unique


/* We can easily identify these as they as 
   separated by "__" (Double underscore)*/

How to use CSS Modules with React

Now after seeing the benefits of CSS Modules you might be wondering how can we use it in React app.
Using CSS Modules in React app is pretty simple,

You can create a normal CSS file just remember to save it as .module.css
After creating the CSS file, import it in your component like you would import an object from a JS file.
You can name it anything you want.
import buttonStyles from './styles.module.css'
or
import mysticalBtn from './styles.module.css'
All are valid names, but most people go with either style or component name
Now you can simply access the style as you access an object's properties.

If you want IntelliSense for CSS Modules in VS Code, you can check out this plugin

So far so good, but how can I get a globally unique name?

Using Classes globally

If you don't want to make a class change its name(make it unique), you can do so by making it available globally.
To make a class global in CSS modules, you have to just wrap your class with :global(your class){...}

:global(.submitButton) {
  background: purple;
}

Wrapping up

Now you know how easy it is to use CSS Modules,
However, If you are not using CRA to set up your project, you might have to work with webpack or Browserify to set up CSS modules, which can be intimidating but I will cover it in some other blog.
I hope this article has helped you learn more about CSS Modules and how you can use them to help improve your CSS workflow. If you have any questions about CSS modules, please don’t hesitate to leave a comment below.
see you soon... 👋

Atishay Jain