CSS Modules

Usually when working on large web projects as a React or Angular front-end developer, you may often come across scenarios where you use the same class name, multiple times in different CSS files for styling different components.

In such cases (as is typical of CSS), the latest class definition overrides the previous class and most times, this might lead to a conflict in your styling presentation for various components.

One way of solving this problem would be to use appropriate naming convention for the classes so that no two class names are identical. Another way would be to use what we call CSS Modules.

CSS Modules are simply CSS files that help you define CSS class names in a local scope in order to avoid style conflicts with previous class definitions of the same name.

So for example you have 2 functional components (an anchor and a button) defined like so:

Anchor Component

import React from "react";
import styles from "./index.module.css"
const Anchor = () => (
   <a href="https://google.com" className={styles.button}>
      Subscribe
   </a>
);
export default Anchor;

Anchor CSS (index.module.css)

.button {
   background: blue;
   color: white;
   padding: 15px;
   border: none !important;
   border-radius: 0;
   display: inline-block;
   font: 400 18px Arial;
   text-decoration: none;
}

Button Component

import React from "react";
import styles from "./index.module.css";
const Button = () => (
   <button type="sumbit" className={styles.button}>
      Subscribe
   </button>
);
export default Button;

Button CSS (index.module.css)

.button {
   background: red;
   color: white;
   padding: 15px;
   border: none !important;
   border-radius: 0;
   display: inline-block;
   font: 400 18px Arial;
   text-decoration: none;
}

These 2 components can be added together into our App.js file like so:

import React from “react”;
import Button from “./components/button”;
import Anchor from “./components/anchor”;
function App() {
   return (
      <div>
         <Button></Button>
         <Anchor></Anchor>
      </div>
   );
}
export default App;

Notice that both components use the same class name (in this case, “button”). The “button” class is declared in 2 CSS module files (index.module.css) and imported via the styles object into their respective components. However, the button comes out looking red and the anchor blue.

This is made possible using CSS Modules!

How is this possible you might ask? Well, at the granular level, the CSS module compiler (Webpack) converts each class name to a unique name using a hash function and stores them in a styles object like so:

For the Anchor:

styles = {
   button: "anchor_button__1vzqO"
}

For the Button:

styles = {
   button: "button_button__36CJZ"
}

The unique names are mapped to a key/value pair in the styles object, this is why we are able to call them using the styles object into our component like so:

<a href="https://google.com" className={styles.button}>Subscribe</a>

On inspecting our code, we see that the class names have been rendered uniquely like so:

<div>
   <button type=”sumbit” class=”button_button__36CJZ”>
      Subscribe
   </button>
   <a href=”https://google.com" class=”anchor_button__1vzqO”>
      Subscribe
   </a>
</div>

In this way, the anchor’s button class doesn’t override the button’s button class. They work independent of each other.

CSS Modules comes in very handy as it gives you the freedom to use whatever name you’d prefer in your CSS class definitions. The compiler does the heavy-lifting of converting the names to unique class names, so you have one less thing to worry about.