CSS Modules (CSS Modules)

ماژول های CSS (CSS Modules) به تو کمک می کنند استایل هر کامپوننت را جدا نگه داری. یعنی مثل این است که برای هر کلاس درس، دفتر جدا داشته باشی تا نوشته ها قاطی نشوند.

CSS Modules در React چیست؟

در ماژول های CSS، هر فایل استایل مثل یک جزیره جدا است. کلاس هایی که در .module.css می نویسی، فقط برای همان فایل React که آن را import می کند فعال هستند و اسمشان پشت صحنه یکتا می شود.

این یعنی دیگر دو کلاس هم نام در دو فایل مختلف به هم نمی خورند. مثل این است که روی هر دفتر، اسم خودت و سال تحصیلی را هم بنویسی تا اشتباه نشود.

نکته: CSS Modules بخشی از خود هسته React نیست؛ اما تقریباً تمام ابزارهای build مثل Create React App و Vite از آن پشتیبانی می کنند.

ساخت اولین CSS Module

قدم اول برای استفاده از CSS Modules در React این است که یک فایل استایل با پسوند .module.css بسازی؛ مثلاً Button.module.css. این پسوند به ابزار build می گوید که این فایل، ماژول CSS است.

در این مثال، یک کلاس ساده برای دکمه می سازیم تا ظاهرش مرتب شود.

.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

مشاهده در ادیتور

اینجا فقط یک کلاس ساده داریم. مهم ترین نکته همین پسوند .module.css است. بدون این پسوند، فایل به عنوان CSS معمولی شناخته می شود نه CSS Modules در React.

استفاده از CSS Module در کامپوننت

حالا باید این ماژول CSS را داخل کد React استفاده کنیم. برای این کار، فایل را مثل یک شیء وارد (import) می کنیم و بعد روی className از آن استفاده می کنیم.

مثلاً برای نمایش یک دکمه ساده، این طوری عمل می کنیم:

import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button
        className={styles.mybutton}
      >
        My Button
      </button>
    </div>
  );
}

مشاهده در ادیتور

اینجا styles یک شیء است که از فایل Button.module.css می آید. کلید styles.mybutton همان کلاس .mybutton است؛ اما در خروجی مرورگر نام آن یکتا می شود؛ مثل _mybutton_q1obu_1.

نکته: این یکتا شدن نام کلاس باعث می شود استایل های ماژول های CSS در React با هم قاطی نشوند.

چند کلاس در یک CSS Module

در مثال قبل فقط یک کلاس داشتیم. حالا چند کلاس مختلف برای دکمه های اولیه (primary) و ثانویه (secondary) می سازیم.

کافی است کلاس های جدید را در همان فایل Button.module.css اضافه کنیم:

.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: white;
}

.secondary {
  background-color: #6c757d;
  color: white;
}

مشاهده در ادیتور

حالا می توانیم این کلاس ها را با هم ترکیب کنیم؛ یعنی یک دکمه هم استایل عمومی دکمه را بگیرد و هم رنگ مخصوص خودش را.

در کامپوننت React، دو دکمه مختلف می سازیم:

import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button
        className={`${styles.mybutton} ${styles.primary}`}
      >
        My Primary Button
      </button>
      <button
        className={`${styles.mybutton} ${styles.secondary}`}
      >
        My Secondary Button
      </button>
    </div>
  );
}

مشاهده در ادیتور

با این روش، mybutton استایل عمومی دکمه را می دهد و primary یا secondary رنگ و حالت خاص دکمه را تنظیم می کند. مثل این است که همه دانش آموزها یونیفرم یکسان دارند، اما هر کلاس، رنگ شال مخصوص خود را دارد.

ویژگی composes در CSS Modules

در CSS Modules می توانی از واژه composes استفاده کنی. این یعنی یک کلاس، استایل های کلاس دیگری را به ارث ببرد. این کار شبیه این است که بگویی: «کلاس دوم، همه قوانین کلاس اول را هم داشته باشد.»

در مثال دکمه ها، هر دو کلاس primary و secondary می توانند استایل های mybutton را inherit کنند.

.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  composes: mybutton;
  background-color: #007bff;
  color: white;
}

.secondary {
  composes: mybutton;
  background-color: #6c757d;
  color: white;
}

مشاهده در ادیتور

حالا دیگر لازم نیست در JSX دو کلاس را کنار هم بنویسی. کافی است فقط کلاس های primary و secondary را روی دکمه قرار دهی.

import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button
        className={styles.primary}
      >
        Primary Button
      </button>
      <button
        className={styles.secondary}
      >
        Secondary Button
      </button>
    </div>
  );
}

مشاهده در ادیتور

به این ترتیب، استایل های پایه فقط یک بار در mybutton نوشته می شوند و بقیه کلاس ها آن را composes می کنند. این تکنیک در نگهداری استایل های بزرگ با CSS Modules در React خیلی کمک می کند.

کلاس های global در CSS Modules

به صورت پیش فرض، کلاس های داخل فایل .module.css فقط محلی (local) هستند. یعنی فقط در همان فایل React که ماژول را import کرده استفاده می شوند و نامشان یکتا می شود.

اما گاهی دوست داری کلاسی بسازی که همه کامپوننت ها ببینند؛ یعنی کلاس global. برای این کار از سینتکس :global استفاده می کنیم.

:global(.myheader) {
  padding: 10px 20px;
  font-size: 50px;
  color: white;
  background-color: dodgerblue;
}

مشاهده در ادیتور

این کلاس .myheader دیگر نام یکتای عجیب نمی گیرد. در خروجی همان myheader می ماند و همه جا می توانی از آن استفاده کنی.

مثلاً در یک کامپوننت ساده این طور:

import styles from './BlueHeader.module.css';

function App() {
  return (
    <div>
      <h1
        className="myheader"
      >
        My Header
      </h1>
    </div>
  );
}

مشاهده در ادیتور

هرچند ماژول را import کرده ایم، اما برای کلاس global، دیگر به styles نیاز نداریم. مستقیم اسم کلاس را در className می نویسیم.

ترکیب کلاس های global و local

گاهی می خواهی بعضی کلاس ها global باشند و بعضی فقط محلی. CSS Modules در React این ترکیب را هم به راحتی پشتیبانی می کند.

مثلاً هدر را global می خواهیم، اما پاراگراف فقط در همین کامپوننت خاص باشد.

:global(.myheader) {
  padding: 10px 20px;
  font-size: 50px;
  color: white;
  background-color: dodgerblue;
}

.myparagraph {
  font-size: 20px;
  color: white;
  background-color: purple;
}

مشاهده در ادیتور

حالا در کامپوننت، برای هدر از کلاس global و برای پاراگراف از کلاس local استفاده می کنیم.

import styles from './MyStyles.module.css';

function App() {
  return (
    <div>
      <h1
        className="myheader"
      >
        My Header
      </h1>
      <p
        className={styles.myparagraph}
      >
        My Paragraph
      </p>
    </div>
  );
}

مشاهده در ادیتور

به این ترتیب، هدر می تواند در چند صفحه مشترک باشد، اما استایل پاراگراف فقط مخصوص همین ماژول است. این ترکیب در ساختن طراحی های تمیز و قابل مدیریت با ماژول های CSS در React خیلی مهم است.

نکته: اگر تازه با استایل دهی با CSS در React آشنا شده ای، این صفحه درباره ماژول های CSS در React مرحله بعدی طبیعی برای حرفه ای تر شدن است.

گام به گام تمرین CSS Modules در React

برای تمرین CSS Modules در React این مراحل را انجام بده:

1. یک فایل Button.module.css بساز و کلاس mybutton را اضافه کن.
2. در یک کامپوننت ساده، فایل را import کن و از styles.mybutton روی یک دکمه استفاده کن.
3. کلاس های primary و secondary را اضافه کن و آن ها را با mybutton ترکیب کن.
4. سپس همین کلاس ها را با composes بازنویسی کن و تفاوت JSX را ببین.
5. در نهایت یک کلاس global با :global بساز و در چند کامپوننت مختلف از آن استفاده کن.

جمع بندی سریع CSS Modules در React

• فایل های .module.css یعنی استفاده از ماژول های CSS در React.
• هر کلاس در CSS Modules محلی است و نام یکتا می گیرد.
• شیء styles پل بین کلاس های CSS و className است.
• composes کمک می کند استایل پایه را یک بار تعریف کنی.
• با :global می توانی بخشی از استایل ها را سراسری کنی.