midCSS
Difference between CSS Modules and Global CSS?
Updated Apr 28, 2026
Short answer
CSS Modules scope CSS locally by default to avoid naming collisions, whereas Global CSS applies globally.
Deep explanation
When using CSS Modules, classes are dynamically hashed during the build process (e.g., .button becomes .button_a7x9). This guarantees that a style defined for a specific component will not accidentally bleed into other components with the same class name.
Real-world example
Styling a React or Vue component library where encapsulation is critical.
Common mistakes
- Trying to override a CSS module class from a global stylesheet without understanding the generated hash classes.
Follow-up questions
- How do you apply global styles within a CSS module?