The global namespace problem
In plain CSS every class lives in one global namespace, so a class named title in one file can clash with title in another. The cascade then applies the wrong rule, and bugs appear far from their cause.
- Global selectors make collisions easy and silent
- Specificity wars push people toward important
- Deleting CSS feels risky because nothing tracks usage
How CSS Modules help
A CSS Module treats each stylesheet as local by default. At build time class names are rewritten to unique hashed names, and the component imports a map from your names to the generated ones.
- You write title, the build emits something like title abc123
- Imports tie styles to the component that uses them
- Unused classes are easy to spot because each file owns its names
Scoping at build time
Sharing on purpose
When you truly need a shared rule, an explicit global escape hatch keeps the intent obvious instead of leaking by accident.
Key idea
CSS Modules make class names local by default and rewrite them to unique hashes at build time so component styles never collide and dead styles are easy to find.