CSS Modules

CSS Modules are build-step CSS files: all class and animation names are locally scoped by default, eliminating global style conflicts.

CSS Modules are not a browser specification, but a critical build-time process (often via Webpack or Rollup) that solves the global scope problem. The system ensures every class name, like `.button-primary`, is locally scoped to its component, preventing unintended style collisions across your application. When a file like `styles.module.css` is imported into a JavaScript component, the build tool maps the local name to a unique, generated global name (e.g., `button-primary_aBc12`), which is then accessed via an imported object: `styles.buttonPrimary`. This approach guarantees modularity, maintainability, and reliable component-specific styling.

https://github.com/css-modules/css-modules