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.

--

--

--

Full Stack Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Feedback Loops and Solving the Right Problem

How to automate web scraping using Selenium in Python: IMDb case

Take care when using requireContext

“DevOps” it’s about automation, right?

Create OML Users in Autonomous Data Warehouse

Modern ways of Developing location-based android apps using callbackFlows (Coroutines)

6.Functions

The time of the ‘just’ being a developer is over. — Rant edition.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chigozie Orunta

Chigozie Orunta

Full Stack Engineer

More from Medium

SASS → (SAssy CSS)

SYNTAX VS SEMANTICS; NAMING CSS CLASSES

MDN Styling and Layout w/CSS chapter 9

Add to cart button HTML | add to cart HTML & CSS javascript