CSS Performance and Optimization

🔹 ۱. کاهش حجم CSS

  • فقط استایل‌هایی که نیاز داری رو نگه دار.

  • از CSS Minify استفاده کن (حذف فاصله‌ها، کامنت‌ها، خط‌های اضافی).

  • توی پروژه‌های بزرگ از PurgeCSS یا ابزار مشابه استفاده کن تا کلاس‌هایی که استفاده نمی‌شن حذف بشن.

🔹 ۲. استفاده بهینه از Selectorها

  • از سلسله مراتب زیاد (Nested) پرهیز کن.
    ❌ بد:

body div.main ul li a span { color: red; }

✅ بهتر:

.nav-link { color: red; }

  • چون مرورگر باید همه‌ی DOM رو بررسی کنه، استفاده از سلکتورهای پیچیده باعث کندی میشه.

🔹 ۳. ترکیب فایل‌ها

  • چند فایل CSS رو توی یک فایل bundle.css ادغام کن تا تعداد درخواست HTTP کمتر بشه.

  • در پروژه‌های مدرن، ابزارهایی مثل Webpack یا Vite این کارو انجام میدن.

🔹 ۴. بارگذاری بهینه CSS

  • CSS ضروری (Critical CSS) رو داخل <head> بذار تا سریع‌تر رندر بشه.

  • استایل‌های غیرضروری (مثلاً برای صفحات خاص) رو async یا lazy load کن.

مثال:

<link rel="stylesheet" href="styles.css" media="all">
<link rel="stylesheet" href="print.css" media="print">

🔹 ۵. استفاده از CSS متغیرها (CSS Variables)

به‌جای تکرار رنگ‌ها و مقادیر، متغیر تعریف کن. این کار هم کد رو سبک‌تر می‌کنه هم مدیریت آسون‌تر میشه.

:root {
  --main-color: #ff6347;
}

button {
  background: var(--main-color);
}

🔹 ۶. تصاویر و آیکون‌ها

  • به جای عکس‌های بزرگ، از SVG یا Icon Fonts استفاده کن.

  • برای آیکون‌ها به‌جای چندین تصویر، از CSS Sprites یا کتابخونه‌هایی مثل Font Awesome کمک بگیر.

🔹 ۷. اجتناب از Repaint و Reflow سنگین

  • تغییرات CSS سنگین (مثل width, height, top, left) رو زیاد تغییر نده.

  • برای انیمیشن‌ها از transform و opacity استفاده کن (چون GPU-accelerated هستن).

❌ بد:

div { top: 100px; }

✅ خوب:

div { transform: translateY(100px); }

🔹 ۸. استفاده از ابزارهای بهینه‌سازی

  • Lighthouse (ابزار گوگل کروم) → بررسی Performance.

  • DevTools Coverage Tab → پیدا کردن CSSهای بلااستفاده.

  • Autoprefixer → برای سازگاری مرورگرها.

🔹 ۹. CDN و Caching

  • برای فریم‌ورک‌ها (مثل Bootstrap, Tailwind) از CDN استفاده کن.

  • مطمئن شو که CSSها روی مرورگر کاربر Cache بشن.

🔹 ۱۰. معماری درست در CSS

  • از متدولوژی‌هایی مثل BEM (Block Element Modifier) استفاده کن تا کد تمیز و قابل نگهداری باشه.

  • از Utility-first framework‌ها مثل TailwindCSS استفاده کن که خیلی سریع و بهینه هست.

🔥 نتیجه:
اگه این اصول رو رعایت کنی، CSS سبک‌تر، سریع‌تر و قابل نگهداری‌تری خواهی داشت و سرعت سایتت هم خیلی بهتر میشه.