base-button.module.css قبل از page.module.css مرتب می‌شود، زیرا کامپوننت <BaseButton> قبل از page.module.css ایمپورت شده است:// page.tsx
import { BaseButton } from './base-button'
import styles from './page.module.css'
export default function Page() {
return <BaseButton className={styles.primary} />
}// base-button.tsx
import styles from './base-button.module.css'
export function BaseButton() {
return <button className={styles.primary} />
}┌─────────────────────────┐
│ فرآیند بهینه‌سازی CSS │
└─────────────────────────┘
📦 ورودی (چندین فایل CSS):
• base-button.module.css
• page.module.css
• layout.module.css
│
▼
╔══════════════════════╗
║ Next.js Build ║
║ ║
║ 1. Chunking ║
║ 2. Merging ║
║ 3. Minification ║
╚══════════╦═══════════╝
│
▼
📄 خروجی (یک فایل بهینه):
┌────────────────────┐
│ optimized.css │
│ • فشرده شده │
│ • فقط CSS مورد نیاز هر route │
│ • بدون کدهای اضافی │
└────────────────────┘
نکته کلیدی: ترتیب ایمپورت CSS در کد شما، ترتیب نهایی اعمال استایل‌ها را تعیین می‌کند. استایل‌هایی که دیرتر ایمپورت می‌شوند، اولویت بالاتری دارند.
توصیه‌های کلیدی (Recommendations)
- ایزوله کردن ایمپورت‌ها: سعی کنید ایمپورت‌های CSS را فقط در یک فایل ورودی (Entry file) جاوااسکریپت یا تایپ‌اسکریپت نگه دارید.
- ایمپورت در ریشه: استایل‌های سراسری و استایل‌شیت‌های Tailwind را در ریشه برنامه خود ایمپورت کنید.
- استفاده از Tailwind: برای بیشتر نیازهای استایل‌دهی از Tailwind CSS استفاده کنید، زیرا الگوهای طراحی رایج را با کلاس‌های کاربردی پوشش می‌دهد.
- استفاده از CSS Modules: برای استایل‌های مخصوص هر کامپوننت، زمانی که کلاس‌های Tailwind کافی نیستند، از CSS Modules استفاده کنید.
- نام‌گذاری منسجم: یک قرارداد نام‌گذاری ثابت برای ماژول‌های CSS خود داشته باشید (مثلاً استفاده از
<name>.module.cssبه جای<name>.tsx). - استخراج استایل‌های مشترک: استایل‌های مشترک را در کامپوننت‌های مشترک (Shared components) استخراج کنید تا از ایمپورت‌های تکراری جلوگیری شود.
- غیرفعال کردن مرتب‌سازی خودکار: ابزارهای Linter یا Formatter که ایمپورت‌ها را به صورت خودکار مرتب می‌کنند (مانند
sort-importsدر ESLint) غیرفعال کنید.
تنظیمات پیشرفته: شما می‌توانید از گزینهcssChunkingدر فایلnext.config.jsبرای کنترل نحوه تکه‌تکه شدن (Chunking) فایل‌های CSS استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: منبع مستندات