CSS Modules Overview

The Problem: CSS Is Global by Default

Every class name in a regular CSS file lives in one shared, global namespace across the whole project. In a large codebase built from many components, this makes accidental name collisions and unintended overrides increasingly likely as the project grows.

What CSS Modules Do

A CSS Module is a regular-looking .css file, but a build tool automatically scopes every class name inside it to the specific component that imports it - rewriting class names behind the scenes so they cannot collide with identically named classes elsewhere in the project.

/* Card.module.css */
.title {
  font-size: 1.25rem;
  font-weight: 600;
}

import styles from './Card.module.css';

function Card() {
  return <h3 className={styles.title}>Heading</h3>;
}

At build time, styles.title resolves to something like Card_title__a1b2c - a unique, generated class name that cannot clash with a .title class defined in a completely different component's file.

How This Compares to BEM and Utility-First

When CSS Modules Fit Well

CSS Modules are most common in component-based frameworks (like React or Vue) with a build step already in place, where each component naturally owns its own small CSS file alongside its markup/logic.