An Introduction to CSS Modules in React

#javascript #react #codenewbie #css

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;
}

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

import headerStyles from "./header.module.css";

and use it like this:

<div>
 <h1 className={headerStyles.title}>CSS Modules</h1>
</div>

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.

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>

CodeSandbox demo:

Adding multiple classes

Consider we have two separate classes like this:

.bold {
  font-weight: bold;
}

.active {
  color: orange;
}

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>

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.