مفهوم Cascade

Cascade چیست و چرا اسم CSS از آن گرفته شده؟

حتماً برات جالبه بدونی که حرف اول CSS، یعنی همون Cascading، دقیقاً به مهم‌ترین مفهومی اشاره داره که تو این فصل قراره کامل یادش بگیریم. Cascade قلب تپنده CSS‌ه و بدون فهمیدنش، خیلی از رفتارهای به‌ظاهر عجیب CSS برات غیرقابل توضیح می‌مونه.

Cascade یعنی چی؟

Cascade (به معنای «آبشار») به فرایندی گفته می‌شه که مرورگر طی‌ش می‌کنه تا تصمیم بگیره، وقتی چند Rule مختلف روی یک عنصر یکسان اثر می‌ذارن، کدوم مقدار نهایی باید اعمال بشه.

فرض کن دو Rule جدا، هردو سعی دارن رنگ یک پاراگراف رو مشخص کنن:

p {
  color: blue;
}

p {
  color: red;
}

حالا این پاراگراف قراره چه رنگی بشه؟ آبی یا قرمز؟ اینجا دقیقاً همون‌جاییه که Cascade وارد عمل می‌شه و بر اساس یه سری قانون مشخص، تصمیم نهایی رو می‌گیره.

چرا اصلاً به Cascade نیاز داریم؟

تو یه پروژه واقعی، معمولاً چندین منبع مختلف روی ظاهر یک صفحه اثر می‌ذارن: استایل‌های پیش‌فرض مرورگر، فایل‌های CSS متعدد، و گاهی حتی استایل‌های Inline. طبیعیه که این منابع مختلف گاهی با هم تداخل پیدا کنن. Cascade دقیقاً همون مکانیزمیه که این تداخل‌ها رو به‌صورت قابل‌پیش‌بینی و منظم حل می‌کنه.

بدون وجود چنین سیستمی، رفتار مرورگرها در برابر تداخل استایل‌ها کاملاً غیرقابل‌پیش‌بینی می‌شد.

Cascade بر چه اساسی تصمیم می‌گیرد؟

مرورگر برای حل تداخل بین چند Rule، به‌ترتیب این عوامل رو بررسی می‌کنه:

1. Origin و Importance: اینکه این Rule از کجا اومده (مرورگر، توسعه‌دهنده، کاربر) و آیا با !important علامت‌گذاری شده یا نه
2. Specificity: اینکه Selector مورد استفاده چقدر «دقیق و اختصاصی» است
3. Source Order: اینکه کدوم Rule دیرتر در کد نوشته شده

این سه عامل دقیقاً به همین ترتیب اولویت‌بندی می‌شن؛ یعنی اول Origin و Importance بررسی می‌شه، اگه هنوز تساوی بود، Specificity حکم صادر می‌کنه، و اگه اونم برابر بود، نوبت به Source Order می‌رسه. هرکدوم از این سه مفهوم رو در درس‌های بعدی همین فصل به‌طور مستقل و کامل بررسی می‌کنیم.

مثال ساده از تأثیر Source Order

برگردیم به مثال اول:

p {
  color: blue;
}

p {
  color: red;
}

چون هر دو Selector دقیقاً یکسان هستن (هردو p)، Specificity‌شون هم برابره. در این حالت، Source Order تصمیم‌گیرنده است: چون Rule دوم (رنگ قرمز) پایین‌تر و دیرتر نوشته شده، همین مقدار نهایتاً روی پاراگراف اعمال می‌شه. یعنی متن پاراگراف قرمز خواهد شد.

مثالی که در آن Specificity نقش دارد

p {
  color: blue;
}

.highlight {
  color: green;
}

<p class="highlight">این یک متن نمونه است.</p>

در این مثال، Selector دوم (.highlight) یک Class Selector‌ه و از نظر Specificity قوی‌تر از یک Type Selector ساده مثل p محسوب می‌شه. به همین دلیل، حتی اگه ترتیب این دو Rule برعکس هم نوشته می‌شدن، باز هم رنگ نهایی سبز می‌شد؛ چون Specificity، مستقل از Source Order، تعیین‌کننده‌ست.

Cascade فقط درباره تداخل نیست

یه نکته مهم اینه که Cascade فقط زمانی فعال نمی‌شه که دو Rule دقیقاً باهم تداخل داشته باشن. در واقع Cascade، فرایند کلی‌ایه که مرورگر برای هر Property روی هر عنصر طی می‌کنه تا تصمیم بگیره مقدار نهایی چی باشه؛ حتی اگه فقط یک Rule هم روی اون Property اثر گذاشته باشه.

نکات مهم

• Cascade فرایندیه که مرورگر برای حل تداخل بین Ruleهای مختلف طی می‌کنه.
• اولویت‌بندی به این ترتیبه: Origin و Importance، سپس Specificity، و در آخر Source Order.
• Cascade فقط مخصوص حالت تداخل نیست؛ بلکه مکانیزم کلی تصمیم‌گیری برای مقدار نهایی هر Property‌ست.

اشتباهات رایج

• تصور اینکه فقط ترتیب نوشتن Ruleها (Source Order) تعیین‌کننده‌ست؛ در حالی که Specificity معمولاً اولویت بالاتری داره.
• فراموش کردن اینکه استایل‌های پیش‌فرض مرورگر (User Agent Styles) هم بخشی از فرایند Cascade هستن.

جمع‌بندی

Cascade مکانیزمی است که مرورگر برای حل تداخل بین Ruleهای مختلف CSS و تعیین مقدار نهایی هر Property به‌کار می‌گیره. این فرایند بر اساس سه عامل اصلی، یعنی Origin و Importance، Specificity، و Source Order، به‌ترتیب اولویت‌بندی می‌شه. در درس‌های بعدی همین فصل، هرکدوم از این عوامل رو با جزئیات کامل بررسی می‌کنیم.