CSS Modules

Subject: React

CSS Modules in React — Full Explanation

🔍 What Are CSS Modules?

CSS Modules let you write regular CSS, but the styles are scoped locally to the component they’re used in. This means:

  • ✅ Class names are automatically made unique
  • ✅ Styles don’t leak or conflict with other components

👉 Think of CSS Modules as private styling for each component.

🎯 Why Use CSS Modules?

Global CSS ProblemCSS Modules Fix
Class name collisionsAutomatically generates unique class names
Global styles override othersStyles stay local to the component
Hard to manage in big appsStyles live near components

📦 File Naming Convention

🚀 Try it in Compiler

The .module.css extension tells React to treat it as a CSS Module.

✅ Step-by-Step Example

🔹 Step 1: Create Component and CSS Module

🔧 File: Button.module.css

🚀 Try it in Compiler

🔧 File: Button.jsx

🚀 Try it in Compiler

🔍 What Happens Internally?

React compiles your class name into something like:

🚀 Try it in Compiler

✅ So no two components will ever accidentally share the same styles.

🔁 Dynamic Class Names

Combine multiple classes:

🚀 Try it in Compiler

Or use the classnames package:

🚀 Try it in Compiler
🚀 Try it in Compiler

🧠 Key Benefits of CSS Modules

BenefitDescription
Local scopingClass names are unique to the file/component
Easy maintenanceNo accidental overrides from other components
Tool-friendlyWorks with CSS preprocessors like .scss
CRA/Vite supportBuilt-in support in most React setups

⚠️ Notes & Best Practices

✅ Use camelCase or hyphen-case in .module.css files
❌ Don’t use global selectors like body, *, html inside modules
📁 Keep CSS files close to the component they style

🧪 Final Real-World Example

🔧 Card.module.css

🚀 Try it in Compiler

🔧 Card.jsx

🚀 Try it in Compiler

📌 Summary Table

FeatureDescription
.module.cssFile naming convention for CSS Modules
import styles fromImports styles as a scoped object
styles.classNameUse like styles.btn to apply the class
Prevents conflictsAll class names are unique and scoped automatically
Component-based appsKeeps styles organized and reusable per component
Next: Inline Styles