What Are CSS Modules and How Do They Solve Global Scope Problems?
Learn what CSS Modules are, how build-time class-name hashing prevents collisions, and how composes enables reuse.
Expected Interview Answer
CSS Modules are CSS files processed by a build tool so that every class name is automatically scoped to the specific component that imports it, generating unique hashed class names at build time to eliminate the global-namespace collisions that plain CSS suffers from.
In plain CSS, every class name lives in one global namespace shared across the entire application, so a `.button` class defined in one file can accidentally clash with a `.button` class in a completely unrelated file, and only source order or specificity determines which one wins. CSS Modules solve this by treating each `.module.css` file as its own local scope: when a component does `import styles from './Button.module.css'`, the build tool rewrites each class name to a unique identifier like `Button_button__a3f1c`, and the JavaScript object it hands back (`styles.button`) maps the original name to that generated one. This means two components can both define `.button` with completely different rules and never conflict, without needing a naming convention like BEM to manually simulate scoping. CSS Modules also support `composes`, which lets one local class extend the rules of another local (or even external) class without duplicating declarations, giving a lightweight sharing mechanism while keeping the isolation guarantee.
- Eliminates global class-name collisions without manual naming conventions
- Colocates styles with the component that uses them, aiding maintainability
- Dead-code elimination is easier since unused local classes are unreferenced imports
- composes gives lightweight class reuse without breaking scope isolation
AI Mentor Explanation
CSS Modules are like every team in a tournament being issued its own private locker room instead of sharing one communal kit room where jersey number 7 might belong to two different players. Because each team’s locker is sealed off, Team A’s "number 7" and Team B’s "number 7" never get mixed up or handed to the wrong player. If a team wants to reuse another team’s training routine, they can explicitly borrow it rather than accidentally inheriting it. That sealed-per-team, opt-in-sharing model is exactly what CSS Modules do with class names.
Step-by-Step Explanation
Step 1
Author a .module.css file
Write normal CSS class selectors in a file named with the .module.css convention.
Step 2
Import it into a component
The bundler processes the file and returns a JS object mapping original class names to generated ones.
Step 3
Build tool generates scoped names
Each class is rewritten to a unique identifier, e.g. Button_button__a3f1c, based on file and class name.
Step 4
Reference via the styles object
The component applies className={styles.button}, guaranteeing no collision with any other module’s classes.
What Interviewer Expects
- Explains the global-namespace problem CSS Modules solve
- Understands the build-time class-name hashing/rewriting mechanism
- Knows how composes enables scoped reuse without breaking isolation
- Can contrast CSS Modules with BEM (manual convention) and CSS-in-JS (runtime scoping)
Common Mistakes
- Thinking CSS Modules are a runtime feature rather than a build-time transform
- Confusing CSS Modules with Shadow DOM style encapsulation, which is a different browser-native mechanism
- Not knowing about composes as the mechanism for sharing styles across scoped modules
- Assuming global styles are impossible with CSS Modules, ignoring the :global() escape hatch
Best Answer (HR Friendly)
“CSS Modules let me write normal CSS but have the build tool automatically make every class name unique to the component that uses it, so I never accidentally clash with a class of the same name somewhere else in the app. I import the styles like a JavaScript object and reference classes through it, which keeps things scoped without needing a strict manual naming convention.”
Code Example
/* Button.module.css */
.button {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
background-color: #2563eb;
}
// Button.tsx
import styles from './Button.module.css'
export function Button({ children }: { children: React.ReactNode }) {
// styles.button resolves to something like "Button_button__a3f1c"
return <button className={styles.button}>{children}</button>
}Follow-up Questions
- How does the composes keyword work in CSS Modules?
- How would you write a genuinely global style rule inside a CSS Modules file?
- How do CSS Modules compare to CSS-in-JS libraries in terms of runtime cost?
- How does CSS Modules’ scoping approach differ from Shadow DOM encapsulation?
MCQ Practice
1. How do CSS Modules prevent class-name collisions?
The build tool rewrites local class names into unique identifiers scoped to the source file.
2. How do you reference a CSS Modules class inside a component?
Importing the module gives a JS object mapping original names to their generated, scoped equivalents.
3. What does the composes keyword do in a CSS Modules file?
composes provides scoped, lightweight style reuse between classes without duplicating declarations.
Flash Cards
What problem do CSS Modules solve? — Global class-name collisions across an application’s stylesheets.
How are CSS Modules class names made unique? — The build tool hashes/rewrites them at build time, e.g. Button_button__a3f1c.
How do you use a scoped class in a component? — Via the imported styles object, e.g. className={styles.button}.
What does composes do? — Lets a local class reuse rules from another class while keeping scope isolation.