Glossary · Web & App Development
CSS Modules
Overview
What CSS Modules are
CSS Modules are ordinary CSS files—conventionally named with a .module.css suffix—that are processed at build time so their class names become locally scoped by default. When you import the file into a JavaScript or TypeScript component, you receive an object that maps your written class names to unique, generated names.
This means a class called .button in one component never clashes with a .button in another, because each is compiled to something like Button_button__a1b2c. The global namespace problem that plagues large stylesheets simply goes away.
How CSS Modules work
You write plain CSS in a .module.css file, then import it as an object—for example import styles from './Button.module.css'—and reference classes as styles.button in your markup. The bundler rewrites the selectors and swaps in the hashed names, keeping the mapping consistent between the stylesheet and the component.
Tooling support is broad: Vite, webpack (via css-loader), and Next.js recognize the .module.css convention out of the box. You still write standard CSS, so there is no new styling language to learn, and features like composition (composes) let you share rules between classes.
When to use CSS Modules
CSS Modules suit component-based apps where you want the safety of scoped styles while keeping real, standard CSS files. They pair naturally with React, Next.js, and Vue, and avoid the runtime overhead of some CSS-in-JS libraries because scoping happens at build time.
They are one option among several. Utility-first frameworks like Tailwind CSS take a different approach, and CSS-in-JS solutions offer dynamic styling. The right choice depends on team preference, performance needs, and how much dynamic, prop-driven styling a project requires.
Where we use it
Related Zen in Tech services
How our team puts CSS Modules to work in real projects.
FAQ
CSS Modules — common questions
How are CSS Modules different from regular CSS?
Regular CSS class names are global, so any matching selector can affect any element. CSS Modules scope class names locally to the importing component by generating unique names at build time, which prevents accidental style collisions.
Do CSS Modules work with React and Next.js?
Yes. Next.js supports CSS Modules natively for any file ending in .module.css, and React apps built with Vite or webpack support them through their default CSS tooling. You import the stylesheet as an object and reference classes from it.
Are CSS Modules better than Tailwind CSS?
Neither is universally better—they solve styling differently. CSS Modules keep standard CSS in scoped files; Tailwind uses utility classes in markup. Many teams even combine them. Choose based on team workflow, design-system needs, and maintainability preferences.
Need CSS Modules done right?
Book a free consultation and we’ll map the fastest, most cost-effective path for your project.
Knowledge hub
From our knowledge hub
All articles →How to Reduce AI Voice Agent Latency
How to cut AI voice agent latency to sub-second, human-like turn-taking: where lag comes from (STT, LLM, TTS, network) and the fixes that actually work.
Read · 7 min →AI AutomationAutomating Lead Follow-Up and Onboarding for Coaches and Agencies
Follow-up automation for coaches and agencies: respond to leads in minutes, qualify prospects before calls, and automate onboarding so you focus on clients.
Read · 6 min →Web DevelopmentThe Auto Repair & Dealership Website That Books More Jobs
Auto repair and dealership websites that convert: online booking, fast mobile pages, reviews, and service pages that turn visitors into booked jobs.
Read · 4 min →