وقتی همه‌چیز برابر است: نقش Source Order

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

Source Order چیست؟

Source Order (ترتیب منبع) یعنی ترتیبی که Ruleهای مختلف در کد نوشته یا بارگذاری شدن. وقتی دو یا چند Rule، از نظر Origin، Importance و Specificity کاملاً برابر باشن، مرورگر به سراغ آخرین راه‌حل می‌ره: هر Ruleای که دیرتر (پایین‌تر) اومده، برنده می‌شه.

مثال ساده

p {
  color: blue;
}

p {
  color: green;
}

هر دو Selector دقیقاً یکسانن (p)، پس Specificity‌شون هم برابره: (0,0,0,1) برای هردو. چون هیچ تفاوتی در Origin، Importance یا Specificity وجود نداره، مرورگر به Source Order نگاه می‌کنه. Rule دوم پایین‌تر نوشته شده، پس همین مقدار (سبز) نهایتاً اعمال می‌شه.

Source Order بین چند فایل CSS

این مفهوم فقط داخل یک فایل معنا نداره؛ وقتی چند فایل CSS به یک صفحه HTML متصل می‌شن، ترتیب اتصال‌شون هم دقیقاً به همین شکل روی نتیجه نهایی اثر می‌ذاره:

<head>
  <link rel="stylesheet" href="base.css">
  <link rel="stylesheet" href="theme.css">
</head>
/* base.css */
h1 {
  color: gray;
}
/* theme.css */
h1 {
  color: navy;
}

چون theme.css بعد از base.css بارگذاری می‌شه، و هر دو Rule Specificity برابر دارن، مقدار نهایی رنگ h1 برابر navy خواهد بود؛ یعنی فایلی که دیرتر لینک شده، حرف آخر رو می‌زنه.

Source Order در کنار Specificity: کدام برنده است؟

نکته‌ای که نباید فراموش بشه: Source Order فقط وقتی وارد عمل می‌شه که تمام لایه‌های قبلی (Origin، Importance، Specificity) کاملاً برابر باشن. اگه Specificity برابر نباشه، Specificity حرف آخر رو می‌زنه، حتی اگه Rule با Specificity کمتر، پایین‌تر نوشته شده باشه.

.title {
  color: purple;
}

h1 {
  color: orange;
}
<h1 class="title">عنوان نمونه</h1>

با اینکه Rule مربوط به h1 پایین‌تر نوشته شده، ولی چون .title یک Class Selector‌ه (Specificity: 0,0,1,0) و از Type Selector h1 (Specificity: 0,0,0,1) قوی‌تره، رنگ نهایی بنفش خواهد بود، نه نارنجی. یعنی Source Order اینجا اصلاً وارد بازی نمی‌شه.

Source Order در Internal، External و ترتیب ترکیبی

وقتی یک صفحه هم External CSS داره و هم Internal CSS، ترتیب فیزیکی این دو در HTML هم مهمه:

<head>
  <link rel="stylesheet" href="style.css">
  <style>
    p {
      color: crimson;
    }
  </style>
</head>
/* style.css */
p {
  color: teal;
}

چون بلوک style داخلی، بعد از تگ link نوشته شده، و Specificity هر دو Rule برابره، رنگ نهایی پاراگراف‌ها Crimson خواهد بود؛ صرف‌نظر از اینکه یکی External بوده و دیگری Internal.

چرا نظم و ترتیب منطقی در نوشتن CSS مهمه؟

از اونجایی که Source Order می‌تونه نتیجه نهایی رو تغییر بده، رعایت یه ترتیب منطقی در نوشتن Ruleها اهمیت زیادی داره. روش رایج و توصیه‌شده اینه:

  1. ابتدا استایل‌های پایه و عمومی (مثل Reset یا تنظیمات کلی body)
  2. سپس استایل‌های ساختاری و Layout
  3. در نهایت استایل‌های اختصاصی‌تر و override‌کننده (مثل Utility Classes یا استثناهای خاص)

این نظم باعث می‌شه رفتار Source Order، به‌جای اینکه تصادفی و گیج‌کننده باشه، کاملاً قابل‌پیش‌بینی و هدفمند عمل کنه.

نکات مهم

  • Source Order آخرین لایه تصمیم‌گیری در Cascade است و فقط وقتی وارد عمل می‌شه که Origin، Importance و Specificity کاملاً برابر باشن.
  • در بین چند فایل CSS، فایلی که دیرتر لینک شده، در تساوی Specificity برنده می‌شه.
  • Source Order هرگز نمی‌تونه بر Specificity بالاتر غلبه کنه.

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

  • تصور اینکه صرفاً نوشتن یک Rule در پایین‌تر فایل، همیشه تضمین‌کننده اولویته؛ در حالی که Specificity بالاتر می‌تونه این فرض رو کاملاً نقض کنه.
  • بی‌نظمی در ترتیب فایل‌های CSS یا بلوک‌های Internal، که باعث رفتارهای غیرمنتظره و سخت برای دیباگ می‌شه.

جمع‌بندی

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