DEV Community

loading...
Cover image for An Introduction to CSS Modules in React

An Introduction to CSS Modules in React

myogeshchavan97 profile image Yogesh Chavan ・3 min read

When it comes to React, following are some of the ways of styling in React.

  • Inline CSS
  • Normal CSS
  • CSS In JS libraries like styled-components
  • CSS Modules
  • SASS/SCSS

In this article, we will explore how to use CSS Modules.

What is a CSS module?

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

In short, all the CSS declared in the file are local to the file in which this CSS file is imported.

We will use CSS modules in the context of React but they are not limited to just React.

You can use the CSS modules with any module bundler like webpack or browserify or any other way which supports importing CSS files.

An alternative to CSS modules in React to create local scope is to use styled components.

Benefits of CSS modules:

  • Using CSS modules avoid namespace collision for CSS classes
  • You can use the same CSS class in multiple CSS files
  • You can confidently update any CSS file without worrying about affecting other pages
  • Using CSS Modules generates random CSS classes when displayed in the browser

CSS Modules are the preferred way of styling in Gatsby.js and Next.js.

Why do we need to use the CSS Module?

In the React application, we usually create a single .css file and import it to the main file so the CSS will be applied to all the components.

But using CSS modules helps to create separate CSS files for each component and is local to that particular file and avoids class name collision.

That's enough about the Introduction. Let's see how to use it.

Using CSS Modules

CSS modules support is provided by create-react-app out-of-the-box so we don't need to install or configure anything to get it working.

When working with React, it's a convention to name the CSS file with .module.css extension.

Suppose, we have a header.module.css file in the components folder with the following content:

.title {
  font-size: 2.5rem;
}
Enter fullscreen mode Exit fullscreen mode

then in the components/Header.js file, we import this file in the following way:

import headerStyles from "./header.module.css";
Enter fullscreen mode Exit fullscreen mode

and use it like this:

<div>
 <h1 className={headerStyles.title}>CSS Modules</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

CodeSandbox demo:

Check out the preview for the above code sandbox here.

If you check the preview above, you will see that even though we have given as title as the class for h1, the final CSS class is different when displayed in the browser.

CSS Class name

So CSS Modules helps to create random classes when displayed in the browser.

Using hyphens while naming classes

It's common to name a CSS class with hyphen like menu-items.

So to use that class inside components we need to use the bracket notation like this:

<div className={headerStyles["menu-items"]}>Some text...</div>
Enter fullscreen mode Exit fullscreen mode

CodeSandbox demo:

Adding multiple classes

Consider we have two separate classes like this:

.bold {
  font-weight: bold;
}

.active {
  color: orange;
}
Enter fullscreen mode Exit fullscreen mode

Then to use both of these classes for the same element we need to use the ES6 template literal syntax like this:

<div className={`${headerStyles["bold"]} ${headerStyles["active"]}`}>Some text...</div>
Enter fullscreen mode Exit fullscreen mode

CodeSandbox demo:

Conclusion

  • CSS modules help to avoid global class name collisions
  • They also help in keeping CSS files clean and easy to organize and maintain
  • They are similar to styled-components for maintaining local scope
  • They're scoped locally to avoid unintentional side effects elsewhere
  • They are used as preferred styling mechanism in Gatsby.js and Next.js and they work out-of-the-box

You can find the complete GitHub source code for this article in this repository.


Learning Modern JavaScript is not an easy task. But don't worry, this guide will help you to become an expert in Modern JavaScript and better at React.

Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.

Discussion (12)

pic
Editor guide
Collapse
ritaxcorreia profile image
Rita Correia

I've been using CSS modules and love it! Don't have to worry about name class clashing

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

That's great to hear 👍

Collapse
juanda_dev profile image
Juan Martínez

Awesome! never thought we could do this way with CSS in React. I'm still new to this library.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Glad you found it useful 🙂

Collapse
rachit995_97 profile image
Rachit Sharma

Most of the time I had problems with global class name collisions. This is fantastic. Thanks!

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Yes, that happens a lot of times. That's where CSS modules come in handy. 👍

Collapse
soumavabanerjee profile image
Soumava Banerjee

Insightful article! I'll use this in my next project.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Thank you. You can also check out this website for your reference which I have created using Next.js with CSS Modules for styling.

Using CSS modules makes managing CSS so easy that's why it's preferred in Next.js and Gatsby.js

Collapse
soumavabanerjee profile image
Soumava Banerjee

It's very nice! I follow you regularly on LinkedIn. Your posts are very informative and they help me out quite a lot!

Thread Thread
myogeshchavan97 profile image
Yogesh Chavan Author

Thank you 🙂 I'm glad you're finding my posts valuable

Collapse
axibord profile image
Collapse
abhilashlr profile image
abhilashlr

Nice article, but would also have liked to see the cons of css modules in it.