In this tutorial we will learn what CSS Modules are, why React developers use them, and how you can apply them to style your components without worrying about class name conflicts. By the end, you will be able to confidently style your React 19 components using CSS Modules in a clean and organized way.

What Are CSS Modules?

CSS Modules let you write normal CSS, but each class you create is scoped only to the component that imports it.

This means:

• No class name collisions
• No styles leaking into other components
• No need for complicated naming conventions

Each CSS class becomes a unique identifier behind the scenes.

Example:

.button {
  background: black;
}

Becomes something like:

_button_abc123

React handles this automatically.

Why Use CSS Modules?

CSS Modules sit in a perfect middle ground:

• Cleaner than global CSS
• Simpler than CSS-in-JS
• Works well for small or large apps
• Keeps styling close to the component
• Predictable and easy to debug

For beginners, Modules are one of the easiest and safest styling strategies.

Creating Your First CSS Module

Step 1: Create a CSS module file.

src/Button.module.css

Add:

.button {
  padding: 12px 20px;
  background: black;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Step 2: Import it into your component.

src/Button.jsx

import styles from "./Button.module.css";
 
export default function Button({ label }) {
  return <button className={styles.button}>{label}</button>;
}

Here’s what is happening:

• styles becomes an object
• Each CSS class becomes a property on that object
• styles.button becomes the unique class name for styling

You now have a fully scoped, conflict-free styled component.

Using Multiple Classes

CSS Modules let you combine multiple classes with string concatenation.

In your CSS:

.base {
  padding: 12px 20px;
}
 
.primary {
  background: black;
  color: white;
}

In the component:

<button className={`${styles.base} ${styles.primary}`}>
  Click
</button>

This allows you to build small, reusable style pieces without naming collisions.

Conditional Class Names

Often you want to change styles based on props.

Example:

export default function Alert({ type }) {
  return (
    <p className={type === "error" ? styles.error : styles.success}>
      {type === "error" ? "Error occurred" : "Success!"}
    </p>
  );
}

This keeps your component logic simple and your styles well organized.

Organizing Module Files

A good folder structure looks like this:

src/
  components/
    Button.jsx
    Button.module.css
    Alert.jsx
    Alert.module.css

Each component gets its own styles, keeping UI logic clean and isolated.

Example: Simple Card Component

Create:

src/Card.module.css

.card {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}
 
.title {
  font-size: 1.25rem;
  font-weight: bold;
}

Component:

src/Card.jsx

import styles from "./Card.module.css";
 
export default function Card({ title, children }) {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
      <p>{children}</p>
    </div>
  );
}

Use in your app:

<Card title="Hello World">This is a styled card using CSS Modules.</Card>

Your card now has isolated, clean styling.

When Should You Use CSS Modules?

CSS Modules are a great choice when you want:

• Easy to manage styles
• No naming conflicts
• CSS that feels familiar
• Performance without extra libraries
• Clean separation between structure and design

They work perfectly for:

• Small to medium projects
• Components with isolated styles
• Developer teams of all experience levels

CSS Modules provide a safe, simple, and scalable way to style your React components. They keep your styles local, prevent naming clashes, and help you maintain a predictable structure as your application grows. For many React projects, CSS Modules are an ideal balance between flexibility and simplicity.