‏لایه‌های Cascade در CSS: قوی ولی نه بی‌نقص!

لایه‌های Cascade در CSS (یعنی همون @layer) یکی از اون ابزارهاییه که قراره جنگ‌های specificity رو یه‌بار برای همیشه تموم کنه. نویسنده این مقاله توضیح می‌ده که برای پروژه‌های کوچیک، سه لایه کافیه:

@layer base, components, utility;

توی base استایل‌های پایه و reset قرار می‌گیره، توی components هسته اصلی سایت، و توی utility کلاس‌های کمکی (شبیه Tailwind) تعریف می‌شن. این ساختار باعث می‌شه نگران source order یا specificity نباشی.

ترفند جالب با custom properties

وقتی یه کلاس utility مثل .font-brand توی بالاترین لایه تعریف شده باشه، دیگه نمی‌شه از لایه‌های پایین‌تر اون رو override کرد — حتی با selector قوی‌تر هم نمیشه. راه‌حل نویسنده اینه که داخل کلاس utility از custom property fallback استفاده کنه:

@layer utility {
  .font-brand {
    font-family: "Garish Sans";
    letter-spacing: var(--letter-spacing, 20%);
    text-transform: uppercase;
  }
}

حالا اگه یه کامپوننت خاص نیاز به letter-spacing متفاوتی داشته باشه، کافیه توی لایه components اون custom property رو تعریف کنی:

@layer components {
  .Component {
    --letter-spacing: normal;
  }
}

این روش خیلی منطقیه چون custom properties از لایه‌های Cascade عبور می‌کنن و محدود به یه لایه خاص نیستن — و این رفتار کاملاً درسته.

بخش تاریک ماجرا: !important

اینجاست که چیز جالب‌تری پیدا میشه. نویسنده می‌خواسته نشون بده که حتی !important هم نمی‌تونه از لایه‌ها عبور کنه — ولی وقتی تست کرد، فهمید که می‌تونه! !important از مرز لایه‌ها رد می‌شه و اولویت رو به هم می‌ریزه. جالب‌تر اینکه رفتارش معکوسه: در حالت عادی لایه بالاتر اولویت داره، ولی با !important لایه پایین‌تر برنده می‌شه:

@layer one, two, three;

@layer one { p { color: blue !important; } }
@layer two { p { color: white !important; } }
@layer three { p { color: black; } }

جواب؟ رنگ پاراگراف‌ها آبی می‌شه — یعنی لایه اول که کمترین اولویت معمولی رو داره، با !important برنده میشه!

چرا این مشکل‌سازه؟

نویسنده این رفتار رو از نظر تئوری قابل توضیح می‌دونه (دادن کنترل نهایی به کاربر)، ولی در عمل خطرناکه. مخصوصاً توی اکوسیستم وردپرس و پلاگین‌ها که معمولاً پر از !important هستن. Cascade layers می‌تونستن یه راه‌حل عالی برای مهار CSS آشفته پلاگین‌ها باشن، ولی وقتی پلاگین از !important استفاده کنه، همه چیز دوباره به هم می‌ریزه.

نویسنده می‌گه که این رفتار، برخلاف custom properties که عبورشون از لایه‌ها درست به نظر می‌رسه، برای !important غلط احساس می‌شه — حتی اگه توضیح spec-based داشته باشه.

نکات کلیدی:

• سه لایه base، components و utility برای اکثر پروژه‌ها کافیه
• وقتی یه utility class توی لایه بالاتره، نمی‌شه از لایه‌های پایین‌تر override کرد
• ترفند custom property fallback یه راه‌حل منطقی و تمیز برای این محدودیته
• !important از مرز لایه‌های Cascade عبور می‌کنه و اولویت‌بندی رو معکوس می‌کنه
• این رفتار توی اکوسیستم‌هایی مثل وردپرس می‌تونه خیلی مشکل‌ساز بشه