CSS Modules is an approach to scoping CSS that operates at build time. Its specification README states the definition plainly: “A CSS Module is a CSS file where all class names and animation names are scoped locally by default.” Rather than a runtime library, it is a convention applied by a build tool: an ordinary stylesheet is processed so that the names a developer writes locally are rewritten into unique global names before the CSS ever reaches the browser.
The problem it solves is the same global-namespace problem that motivates other modern styling approaches. In plain CSS, every class name shares one project-wide namespace, so a generic name like “.button” or “.active” written in one file can silently clash with the same name in another. The CSS Modules README notes that the approach “prevents the common issue of styles in one file affecting the entire project by localizing styles to specific components,” eliminating the accidental overrides that plague large codebases as they grow.
The mechanism works through a mapping. When a CSS Module is imported into JavaScript, the README explains, “it exports an object with all mappings from local names to global names.” A developer writes a local class name in the stylesheet and refers to it through that exported object in the markup; the build step substitutes a guaranteed-unique generated name in the output. Because the substitution happens during the build, the resulting CSS is just ordinary CSS with mangled class names, and there is no runtime cost to inject or parse styles in the browser.
That build-time nature is the key contrast with runtime CSS-in-JS libraries. CSS Modules delivers automatic local scoping, the central benefit those libraries also offer, without shipping a styling engine to the browser or computing class names while components render. The trade-off is that styles are static CSS rather than JavaScript, so dynamic, prop-driven styling is less direct than in a runtime library, though it can still be achieved by toggling between predefined classes.
CSS Modules became a popular middle path in the front-end community, especially for teams that wanted component-scoped styles while keeping the performance characteristics of plain CSS. It is supported natively by many modern bundlers and build tools, which made adoption a configuration choice rather than a dependency, and it remains a standard option whenever the goal is local scoping without a runtime styling layer.