CSS Modules का उपयोग
In this page:
/* Name.module.css */
.className { property: value; }
// Component.jsx
import styles from "./Name.module.css";
<div className={styles.className}>Content</div>वह Problem जो CSS Modules Solve करते हैं
Regular CSS class names global होते हैं — एक file में '.card' नाम की class accidentally एक large app में कहीं और defined एक '.card' class को override कर सकती है या इससे override हो सकती है।
CSS Modules इसे solve करते हैं class names को automatically उस component तक locally scoped बना कर जो उस stylesheet को import करता है।
उदाहरण: The Problem CSS Modules Solve
// Run in your local React project (npm install required)
/* Card.module.css */
.card { border: 1px solid #ccc; padding: 16px; }
// Card.jsx
import styles from './Card.module.css';
function Card() {
return <div className={styles.card}>Content</div>;
}कैसे Import एक Object बन जाता है
एक .module.css file import करना आपको raw CSS text नहीं देता — build tool इसे एक JavaScript object में transform करता है जहां हर key आपके original class names में से एक है, और हर value एक unique, generated class name है (जैसे card_a1b2c) जो app में किसी और चीज़ से collide नहीं करेगा।
उदाहरण: How the Import Becomes an Object
// Run in your local React project (npm install required)
import styles from './Button.module.css';
function Button() {
console.log(styles); // { button: "button_a3f9c" }
return <button className={styles.button}>Click me</button>;
}Multiple Classes Combine करना
जब एक component को एक साथ एक से ज़्यादा CSS Modules class चाहिए हो (जैसे एक base style plus एक conditional variant), आप generated class name strings को template literals या एक छोटे helper से combine करते हैं, क्योंकि JSX का className सिर्फ एक final string चाहता है।
उदाहरण: Combining Multiple Classes
// Run in your local React project (npm install required)
import styles from './Button.module.css';
function Button({ primary }) {
const className = primary ? `${styles.button} ${styles.primary}` : styles.button;
return <button className={className}>Click me</button>;
}- यह भूल जाना कि import syntax अलग है — आप CSS file को एक object के रूप में import करते हैं (import styles from './App.module.css'), एक side-effect import के रूप में नहीं।
- Generated styles.className property के बजाय regular string class names उपयोग करना।
- File को सिर्फ 'App.css' नाम देना instead of 'App.module.css' — '.module.css' suffix ही है जो ज़्यादातर build tools में CSS Modules processing trigger करता है।
- CSS Modules class names को उस component तक locally scope करते हैं जो उन्हें import करता है, global naming collisions से बचते हुए।
- Component.module.css नाम की एक file build tool (Vite, webpack, आदि) द्वारा specially process होती है।
- Imported styles एक JS object बन जाती हैं जो आपके original class names को generated, unique ones से map करती हैं।
- यह एक build-tool feature है, runtime library नहीं — इस preview sandbox के लिए कोई CDN equivalent मौजूद नहीं है।
Build-tool feature (Vite/webpack/Create React App सभी इसे support करते हैं); कोई specific React version requirement नहीं।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: