چرا @scope مهم است؟
یکی از قدیمیترین مشکلات CSS این بود که:
- استایلها global هستند
- هر تغییری میتواند روی بخشهای ناخواستهتر اثر بگذارد
- مدیریت پروژههای بزرگ سخت میشود
- نیاز به معماریهایی مثل BEM، OOCSS، ITCSS
- نیاز به راهحلهای پیچیده مثل CSS Modules، Tailwind، یا Shadow DOM
حالا CSS بهصورت Native اسکوپبندی واقعی را اضافه کرده است.
@scope چیست؟
دستور جدیدی در CSS است که اجازه میدهد:
- مجموعهای از قوانین CSS فقط روی یک بخش خاص اعمال شوند
- یا حتی بر اساس یک عنصر ورودی (root) یا خروجی (scope boundary) محدود شوند
ساختار پایه:
@scope (.card) {
h3 {
color: red;
}
}
در این مثال، فقط h3هایی که در داخل .card قرار دارند قرمز میشوند.
قابلیتهای کلیدی @scope
۱. اسکوپبندی واقعی بدون نیاز به کلاسهای اضافی
دیگر لازم نیست برای جلوگیری از تداخل استایلها نامگذاریهای عجیب استفاده کنید:
بدون BEM:
@scope (.form-section) {
label { font-weight: 600; }
}
۲. تعریف Root و Boundary
میتوانید بگویید استایلها از کجا شروع و کجا تمام شوند.
@scope (.container to .stop-here) {
p { color: blue; }
}
استایلها روی های داخل .container اعمال میشوند
اما فقط تا قبل از .stop-here.
چند مثال کاربردی
۱. اسکوپ مخصوص کامپوننتها (بدون JS!)
@scope (.product-card) {
.price { color: green; }
.title { font-size: 1.4rem; }
}
۲. جلوگیری از نشت استایل یک بخش به کل صفحه
@scope (.admin-panel) {
button { padding: 12px; }
}
دیگر این دکمهها بیرون از .admin-panel تغییر نمیکنند.
۳. استایلدهی فرمها با اسکوپ مستقل
@scope (form.login) {
input { border-color: #007aff; }
}
تفاوت @scope با Shadow DOM
@scope قرار نیست جایگزین Shadow DOM شود، بلکه سطح میانگینی ارائه میدهد:
- سادهتر
- قابل فهمتر
- بدون نیاز به ساختار جدید DOM
پشتیبانی مرورگرها (۲۰۲۶)
پشتیبانی تقریباً کامل در:
- Chrome
- Edge
- Safari 17+
- Firefox (فعال بهصورت پیشفرض از ۲۰۲۵)
بنابراین امروز کاملاً قابل استفاده در پروژههای واقعی است.
بهترین کاربردهای @scope
- طراحی کامپوننتها در HTML/CSS خام
- پروژههای بدون فریمورک
- معماری CSS مقیاسپذیر
- صفحات بزرگ با کامپوننتهای تکراری
- جلوگیری از تداخل استایلهای لایههای مختلف
- جایگزینی طبیعی برای BEM یا CSS Modules در برخی سناریوها
مزایای @scope نسبت به روشهای قدیمی
مزیتها
- ساده
- طبیعی و استاندارد
- بدون تنظیمات Build
- خوانایی بالا
- کاهش نیاز به پیشپردازندهها و معماریهای پیچیده
- بهبود مدیریت پروژههای بزرگ
محدودیتها
- مثل Shadow DOM کاملاً ایزوله نیست
- نیاز به توجه دقیق در انتخاب root/boundary
جمعبندی
CSS @scope یکی از مهمترین پیشرفتهای CSS در یک دهه اخیر است.
برای اولین بار میتوانیم:
- استایلها را بدون hack
- بدون naming convention سخت
- بدون CSS-in-JS
- بدون Shadow DOM
به یک محدودهی مشخص محدود کنیم.
این قابلیت طراحی کامپوننتها را بسیار سادهتر، تمیزتر و قابلپیشبینیتر میکند.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر میدهد!