@layer در CSS؛ مدیریت ترتیب استایل‌ها بدون جنگ با specificity

یکی از آزاردهنده‌ترین بخش‌های CSS در پروژه‌های بزرگ، تداخل اولویت (specificity) میان کتابخانه‌ها و استایل خودمان است. دستور @layer به شما می‌گوید کدام گروه از قواعد بر دیگری غلبه کند، صرف‌نظر از specificity.

تعریف ترتیب لایه‌ها

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; box-sizing: border-box; }
}

@layer components {
  .btn { padding: .5rem 1rem; background: #2563eb; }
}

@layer utilities {
  .p-0 { padding: 0; }
}

لایهٔ بعدی همیشه بر قبلی برتری دارد؛ پس .p-0 در لایهٔ utilities حتی اگر انتخابگرش ضعیف‌تر باشد، بر .btn غلبه می‌کند.

نکته‌های مهم

• استایل‌هایی که داخل هیچ لایه‌ای نیستند از همهٔ لایه‌ها قوی‌ترند.
• کتابخانه‌های خارجی را می‌توانید با @import url(...) layer(vendor) در یک لایهٔ پایین بیاورید تا به‌راحتی بازنویسی‌شان کنید.
• قواعد !important ترتیب را برعکس می‌کنند: در آن‌ها لایهٔ اول قوی‌تر است.