CSS Modules در React – آموزش استایل Scoped بدون تداخل کلاس

در پروژه‌های بزرگ، دو کامپوننت با کلاس .container ممکن است استایل یکدیگر را خراب کنند. CSS Modules کلاس‌ها را محلی (scoped) می‌کند: هر فایل CSS فقط در همان کامپوننت import‌شده اعمال می‌شود و نام کلاس در build یکتا می‌شود.

CSS Modules چیست؟

فایلی با پسوند .module.css که React/Vite آن را به آبجکت JavaScript تبدیل می‌کند. به‌جای رشته، از property آن آبجکت در className استفاده می‌کنید.

ساختار فایل‌ها

MyComponent.module.css

.container {
  padding: 20px;
  background: #f5f5f5;
}

.title {
  font-size: 1.5rem;
  color: #333;
}

MyComponent.jsx

import styles from "./MyComponent.module.css";

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>محتوا</h1>
    </div>
  );
}

قوانین نام‌گذاری

مزایا

• بدون تداخل نام — هر ماژول scope خودش را دارد
• CSS معمولی — syntax آشنای CSS، بدون JS-in-CSS
• مناسب پروژه بزرگ — تیم‌ها فایل جدا نگه می‌دارند
• پشتیبانی Vite/CRA — بدون تنظیم اضافه در اکثر setupها

چند کلاس همزمان

<div className={`${styles.card} ${styles.highlight}`}>...</div>

یا با کتابخانه clsx / classnames برای شرط.

جمع‌بندی

CSS Modules تعادل خوبی بین CSS کلاسیک و encapsulation است. فایل .module.css بسازید، import کنید و با styles.xxx به کلاس‌ها وصل شوید. برای پروژه‌هایی که می‌خواهند CSS جدا از JS بماند ولی تداخل کلاس نداشته باشند، انتخاب محکمی است.