‏نگاه افقی به CSS @layer

نویسنده، کریس کوییر، می‌گه ما عادت داریم به CSS @layer عمودی نگاه کنیم. لایه‌ها روی هم چیده می‌شن و استایل تو لایه‌ی بالاتر، مستقل از specificity، از لایه‌ی پایین‌تر قوی‌تره. حتی می‌تونی ترتیبشون رو صریح تعیین کنی، مثلاً @layer reset, defaults, patterns, components, utilities, overrides;. یه قابلیت جالب دیگه هم زیرلایه‌هاست که با نقطه نوشته می‌شن، مثل components.button و components.card.

نکته‌ی اصلی مقاله اینجاست: وقتی یه معماری فرانت‌اند داری که هر کامپوننت فایل CSS خودشو داره و تعدادشون به ده‌ها یا صدتا می‌رسه، دیگه مهم نیست استایل کدوم کامپوننت از اون یکی قوی‌تره. پس ترتیب عمودی لایه‌ها عملاً بی‌معنی می‌شه و نویسنده می‌گه بهتره بهش «افقی» نگاه کنی: یه ساختار کوتاه و پهن به‌جای یه برج بلند.

به گفته‌ی نویسنده کلید ماجرا اینه که فقط توکن‌ها (همون custom propertyها) رو داخل لایه بذاری و استایل‌های scope‌شده رو بیرون لایه نگه داری. چون هر چیزی که تو لایه باشه ضعیف می‌شه، این‌جوری هر استایلِ لایه‌نشده‌ای می‌تونه راحت مقدار توکن رو override کنه، بدون اینکه مجبور شی سر specificity بجنگی:

@layer components.card {
  .card {
    --card-bg: black;
    --card-color: white;
  }
}

@scope (.card) {
  background: var(--card-bg);
  color: var(--card-color);
}

نویسنده می‌گه برای scope‌کردن هم روش‌های مختلفی جواب می‌ده: nest‌کردن زیر کلاس اصلی، قرارداد اسم‌گذاری مثل BEM، خود @scope، یا حتی یه container query فقط با اسم. مهم اینه که توکن‌ها لایه‌بندی بشن و بقیه‌ی استایل‌ها نه.

مزیتش اینه که دیگه لازم نیست از ترفندهای زشتی مثل نوشتن .root.root برای بالا بردن specificity استفاده کنی. وقتی توکن‌ها اون‌قدر ضعیف باشن، حتی یه سلکتور ساده و لایه‌نشده هم می‌تونه اونا رو ببره. به گفته‌ی نویسنده این دقیقاً همون کاریه که تو CodePen با کامپوننت‌هاشون می‌کنن؛ اونجا هم همه‌ی custom propertyها رو @layer می‌کنن تا هر وقت لازم شد راحت override بشن.

نکات کلیدی:

• تو CSS @layer، لایه‌ی بالاتر مستقل از specificity از لایه‌ی پایین‌تر قوی‌تره
• با ده‌ها کامپوننت، ترتیب عمودی لایه‌ها بی‌اهمیت می‌شه؛ نگاه افقی ساده‌ترش می‌کنه
• ترفند اصلی: فقط توکن‌ها (custom property) رو داخل لایه بذار تا عمداً ضعیف بشن
• استایل‌های scope‌شده رو بیرون لایه نگه دار تا قدرت‌شون حفظ شه
• این‌جوری override کردن توکن‌ها بدون جنگ specificity راحت می‌شه