CSS Modules

CSS Modules is a CSS file organization system in which all class names and animation names are scoped locally by default. Created by Mark Dalgleish and Glen Maddern (the team behind theStyled Components concept), CSS Modules solves the fundamental problem of global CSS naming collisions by automatically generating unique, scoped class names for each CSS file, ensuring that styles defined in one component cannot accidentally affect another component. Unlike CSS-in-JS solutions like Styled Components or Emotion, CSS Modules works with plain CSS files (with a .module.css extension) and does not require any runtime JavaScript to apply styles — the scoping happens at build time through a bundler plugin or loader. The compiled output replaces local class names with globally unique hashes, and the JavaScript import provides a mapping object from the original class names to the generated hashes. Key features include: automatic local scoping of class names (e.g., .title becomes .UserProfile_title_1a2b3), composition via the composes keyword (allowing one class to inherit styles from another, either within the same file or from another module), global selectors via the :global keyword for cases where global styling is needed, support for CSS custom properties (variables), integration with all major bundlers including Webpack (via css-loader), Vite (built-in support), Rollup (via postcss-modules), Parcel (built-in), and Next.js (built-in support since version 9), support for CSS preprocessors (Sass, Less, Stylus) via the corresponding module file extensions (.module.scss, .module.less), and TypeScript support with auto-generated type declarations. CSS Modules has been adopted as the default CSS solution in Create React App, Next.js, and many other React project templates. As of 2026, the specification has over 18,000 GitHub stars.