What are CSS modules in React and why use them?

Before we start talking about what CSS modules are, I want to talk about how you write CSS in React. Answer these quick questions for me please

1. Have you ever been in such a rush to finish a product that you simply write CSS classes that you think would be good without worrying about where else they might affect?

2. Have you gone insane when looking at a new project from another developer, who did the above (making sure the project takes ages to decipher)?

3. Have you written junk css that you used for a certain time and never just got around to deleting it?

4. Have you had issues where the style you applied in another component is applied to a component that it shouldn't?

If you have run into any of the above issues, you know how they bloat projects and make them very very difficult to understand. Badly written CSS is very tough to decipher and fix as you do not know what the new changes will break and where. This can cause any developer a significant amount of headache as they will need to spend hours deciphering your CSS classNames and not development.

To prevent this, some very smart developers use a methodology called BEM — Block Element Modifier. It as per their website is a methodology that helps you to create reusable components and code sharing in front-end development. So what it essentially does is tell developers to follow a strict naming pattern for their CSS in order to ensure there are no naming clashes and it is easier to find what CSS is applied and where. This is a great methodology, but there is a better player in the market. Enter CSS modules.

With CSS modules we are able to locally scope all our CSS to one component, so that the classNames we write in one component will never be applied to another component without our permission. So let’s see how we can do this. Let’s say you want to create a button component. So we first create a folder for it titled ‘button’. Then we create the JS file which is Button.js. The next file we have to create is the CSS module for this component and that is button.module.css.

Next step is to open this button component and import the Button.js and button.module.css

1import React from 'react'
2import styles from '../components/button/button.module.css'
3 
4export default function button() {
5   return (
6       <div>
7           <button className={styles.btn}>Hello</button>
8       </div>
9   )
10 

I want you to look at the button here. See how we have className={styles.btn}? That is us using the btn styles from button.module.css. So now whatever css we apply to .btn in the stylesheet will be locally scoped here. For example this below CSS will make the background of our btn black and nothing else.

1.btn{ background-color: black;}

And if you want to bring in CSS from another CSS module in another component, that's easy too!

1import React from 'react'
2import styles from '../components/button/button.module.css'
3import btnFontStyles from '../stylesheets/btnfonts/btnFontStyles.module.css'
4 
5export default function button() {
6   return (
7       <div>
8         <button className={`${styles.btn} ${btnFontStyles.btnFonts}`}>>Hello</button>
9       </div>
10   )
11}

Wasn't that easy? CSS modules are an amazing tool for developers to keep track of their styling. Please make sure you use them in your projects as the naming conventions that might make sense for you today when coding might not work for you in the future or another developer who is fresh to the project. Locally scope CSS classes help developers better understand your project and is definitely in line with why we love React- MODULARITY!

If you found what you read on CSS Modules helpful, please let me know and follow me on my social media channels for more! If not, you can just sign up to my email newsletter below to be notified of any blog post I publish 😊