بنیادی CSS کے اصول سیکھتے وقت، کسی کو ماڈیولر، دوبارہ قابل استعمال، اور وضاحتی طرزیں لکھنا سکھایا جاتا ہے تاکہ برقراری کو یقینی بنایا جا سکے۔ لیکن جب ڈویلپرز حقیقی دنیا کی ایپلی کیشنز میں شامل ہو جاتے ہیں، تو اکثر غیر ارادی علاقوں میں سٹائل کے لیک ہونے کے بغیر UI کی خصوصیات شامل کرنا ناممکن محسوس ہوتا ہے۔ یہ مسئلہ اکثر خود کو پورا کرنے والے لوپ میں snowballs; وہ طرزیں جو نظریاتی طور پر ایک عنصر یا طبقے تک محدود ہیں وہ ظاہر ہونا شروع ہو جاتی ہیں جہاں سے ان کا تعلق نہیں ہے۔ یہ ڈویلپر کو لیک شدہ اسٹائلز کو اوور رائیڈ کرنے کے لیے اور بھی زیادہ مخصوص سلیکٹرز بنانے پر مجبور کرتا ہے، جو پھر غلطی سے عالمی اسٹائلز کو اوور رائیڈ کر دیتے ہیں، وغیرہ۔ سخت طبقاتی نام کنونشنز، جیسے BEM، اس مسئلے کا ایک نظریاتی حل ہیں۔ BEM (بلاک، عنصر، موڈیفائر) طریقہ کار CSS کلاسز کو نام دینے کا ایک منظم طریقہ ہے تاکہ CSS فائلوں کے اندر دوبارہ استعمال اور ساخت کو یقینی بنایا جا سکے۔ اس طرح کے نام دینے والے کنونشن عناصر اور ان کی حالت کو بیان کرنے کے لیے ڈومین لینگویج کا فائدہ اٹھا کر علمی بوجھ کو کم کر سکتے ہیں، اور اگر صحیح طریقے سے لاگو کیا جائے تو بڑی ایپلی کیشنز کے لیے اسٹائل کو برقرار رکھنا آسان بنا سکتا ہے۔ حقیقی دنیا میں، تاہم، یہ ہمیشہ اس طرح کام نہیں کرتا ہے۔ ترجیحات بدل سکتی ہیں، اور تبدیلی کے ساتھ عمل درآمد متضاد ہو جاتا ہے۔ ایچ ٹی ایم ایل ڈھانچے میں چھوٹی تبدیلیوں کے لیے بہت سی سی ایس ایس کلاس کے نام پر نظر ثانی کی ضرورت پڑ سکتی ہے۔ انتہائی انٹرایکٹو فرنٹ اینڈ ایپلی کیشنز کے ساتھ، BEM پیٹرن کی پیروی کرنے والے کلاس کے نام طویل اور غیر مؤثر ہو سکتے ہیں (مثال کے طور پر، app-user-overview__status--is-authenticating)، اور نام دینے کے اصولوں پر پوری طرح عمل نہ کرنے سے سسٹم کا ڈھانچہ ٹوٹ جاتا ہے، اس طرح اس کے فوائد کی نفی ہوتی ہے۔ ان چیلنجوں کو دیکھتے ہوئے، یہ کوئی تعجب کی بات نہیں ہے کہ ڈویلپرز نے فریم ورک کی طرف رجوع کیا ہے، Tailwind سب سے زیادہ مقبول CSS فریم ورک ہے۔ سٹائل کے درمیان ایک ناقابل شکست مخصوص جنگ کی طرح لڑنے کی کوشش کرنے کے بجائے، CSS Cascade کو ترک کرنا اور ایسے ٹولز کا استعمال کرنا آسان ہے جو مکمل تنہائی کی ضمانت دیتے ہیں۔ ڈویلپرز افادیت پر زیادہ جھکاؤ رکھتے ہیں۔ ہم کیسے جانتے ہیں کہ کچھ ڈویلپرز جھرنے والی طرزوں سے بچنے کے خواہشمند ہیں؟ یہ "جدید" فرنٹ اینڈ ٹولنگ کا عروج ہے — جیسے CSS-in-JS فریم ورک — جو خاص طور پر اس مقصد کے لیے ڈیزائن کیا گیا ہے۔ الگ تھلگ طرزوں کے ساتھ کام کرنا جو مخصوص اجزاء تک مضبوطی سے دائرے میں ہیں تازہ ہوا کی سانس کی طرح لگ سکتے ہیں۔ یہ چیزوں کو نام دینے کی ضرورت کو دور کرتا ہے - جو اب بھی سب سے زیادہ نفرت انگیز اور وقت خرچ کرنے والے فرنٹ اینڈ کاموں میں سے ایک ہے - اور ڈیولپرز کو CSS وراثت کے فوائد کو مکمل طور پر سمجھے یا فائدہ اٹھائے بغیر نتیجہ خیز بننے کی اجازت دیتا ہے۔ لیکن سی ایس ایس کیسکیڈ کو کھودنا اس کے اپنے مسائل کے ساتھ آتا ہے۔ مثال کے طور پر، جاوا اسکرپٹ میں کمپوزنگ اسٹائلز کے لیے بھاری تعمیراتی کنفیگریشنز کی ضرورت ہوتی ہے اور یہ اکثر اسٹائلز کو اجزا کے مارک اپ یا ایچ ٹی ایم ایل کے ساتھ گھل مل جانے کی طرف لے جاتا ہے۔ نام دینے کے کنونشنوں پر غور سے غور کرنے کے بجائے، ہم اپنے لیے سلیکٹرز اور شناخت کنندگان کو خود کار طریقے سے تخلیق کرنے کی اجازت دیتے ہیں (مثال کے طور پر، .jsx-3130221066)، جس کے لیے ڈویلپرز کو اپنے اندر ایک اور سیوڈو زبان کو برقرار رکھنے کی ضرورت ہوتی ہے۔ (گویا یہ سمجھنے کا علمی بوجھ کہ آپ کے تمام اجزاء کے استعمال کے اثرات پہلے ہی کافی نہیں تھے!) کلاسوں کو ٹولنگ کے نام دینے کے کام کو مزید خلاصہ کرنے کا مطلب یہ ہے کہ بنیادی ڈیبگنگ اکثر ترقی کے لیے مرتب کردہ مخصوص ایپلیکیشن ورژنز تک محدود ہوتی ہے، بجائے اس کے کہ براؤزر کی مقامی خصوصیات جو لائیو ڈیبگنگ کو سپورٹ کرتی ہوں، جیسے ڈیولپر ٹولز۔ یہ تقریباً ایسا ہی ہے کہ ہمیں ان ٹولز کو ڈیبگ کرنے کے لیے ٹولز تیار کرنے کی ضرورت ہے جو ہم ویب پہلے سے فراہم کردہ چیزوں کو خلاصہ کرنے کے لیے استعمال کر رہے ہیں — یہ سب کچھ معیاری CSS لکھنے کے "درد" سے بچنے کی خاطر۔ خوش قسمتی سے، جدید CSS خصوصیات نہ صرف معیاری CSS لکھنے کو مزید لچکدار بناتی ہیں بلکہ ہم جیسے ڈویلپرز کو جھرن کو منظم کرنے اور اسے ہمارے لیے کام کرنے کے لیے بہت زیادہ طاقت فراہم کرتی ہیں۔ CSS Cascade Layers ایک بہترین مثال ہیں، لیکن ایک اور خصوصیت ہے جس پر توجہ کی حیرت انگیز کمی ہوتی ہے - حالانکہ یہ اب تبدیل ہو رہا ہے کہ یہ حال ہی میں بیس لائن سے مطابقت رکھتا ہے۔ CSS @scope At-Rule میں CSS @scope at-rule کو اس طرز کے لیک سے متاثر ہونے والی پریشانی کا ایک ممکنہ علاج سمجھتا ہوں جس کا ہم نے احاطہ کیا ہے، جو ہمیں تجریدات اور اضافی تعمیراتی ٹولنگ کے لیے مقامی ویب فوائد سے سمجھوتہ کرنے پر مجبور نہیں کرتا ہے۔ "@scope CSS at-rule آپ کو مخصوص DOM ذیلی درختوں میں عناصر کو منتخب کرنے کے قابل بناتا ہے، عناصر کو خاص طور پر ہدف بناتے ہوئے بغیر ضرورت سے زیادہ مخصوص سلیکٹرز لکھے جن کو اوور رائڈ کرنا مشکل ہے، اور آپ کے سلیکٹرز کو DOM ڈھانچے کے ساتھ بہت مضبوطی سے جوڑے بغیر۔"- MDN
دوسرے لفظوں میں، ہم وراثت، جھرن، یا یہاں تک کہ خدشات کی بنیادی علیحدگی کی قربانی کے بغیر مخصوص صورتوں میں الگ تھلگ طرزوں کے ساتھ کام کر سکتے ہیں۔یہ فرنٹ اینڈ ڈویلپمنٹ کا ایک طویل عرصے سے چلنے والا رہنما اصول رہا ہے۔ اس کے علاوہ، اس میں بہترین براؤزر کوریج ہے۔ درحقیقت، Firefox 146 نے دسمبر میں @scope کے لیے تعاون شامل کیا، جس سے یہ پہلی بار بیس لائن سے مطابقت رکھتا ہے۔ بی ای ایم پیٹرن بمقابلہ @ اسکوپ اصول کا استعمال کرتے ہوئے بٹن کے درمیان ایک سادہ موازنہ یہ ہے:
@scope کا اصول کم پیچیدگی کے ساتھ درستگی کی اجازت دیتا ہے۔ ڈویلپر کو اب کلاس کے ناموں کا استعمال کرتے ہوئے حدود بنانے کی ضرورت نہیں ہے، جس کے نتیجے میں، وہ مقامی HTML عناصر پر مبنی سلیکٹرز کو لکھنے کی اجازت دیتا ہے، اس طرح CSS کلاس کے نام کے نسخوں کی ضرورت کو ختم کرتا ہے۔ صرف کلاس کے نام کے انتظام کی ضرورت کو دور کرنے سے، @scope بڑے پروجیکٹس میں CSS سے وابستہ خوف کو دور کر سکتا ہے۔
بنیادی استعمال
شروع کرنے کے لیے، اپنے CSS میں @scope کا قاعدہ شامل کریں اور ایک روٹ سلیکٹر داخل کریں جس میں اسٹائل کا دائرہ کار کیا جائے گا:
@scope (
لہٰذا، مثال کے طور پر، اگر ہم کسی
@scope (nav) { ایک { /* نیوی کے دائرہ کار میں لنک اسٹائل */ }
a:ایکٹو { /* ایکٹو لنک اسٹائل */ }
a:active::before { /* اضافی اسٹائل کے لیے pseudo-element کے ساتھ ایکٹو لنک */ }
@media (زیادہ سے زیادہ چوڑائی: 768px) { ایک { /* جوابی ایڈجسٹمنٹ */ } } }
یہ، اپنے طور پر، ایک اہم خصوصیت نہیں ہے. تاہم، دائرہ کار میں ایک دوسری دلیل شامل کی جا سکتی ہے تاکہ دائرہ کار کے آغاز اور اختتامی پوائنٹس کی مؤثر طریقے سے وضاحت کی جا سکے۔
/* ul کے اندر کسی بھی عنصر پر طرزیں لاگو نہیں ہوں گی */ @scope (nav) سے (ul) { ایک { فونٹ سائز: 14px؛ } }
اس پریکٹس کو ڈونٹ اسکوپنگ کہا جاتا ہے، اور ایسے کئی طریقے ہیں جن کا استعمال کیا جا سکتا ہے، جس میں DOM ڈھانچے کے ساتھ ملتے جلتے انتہائی مخصوص سلیکٹرز کی ایک سیریز، a :not pseudo-selector، یا مختلف CSS کو سنبھالنے کے لیے عناصر کو مخصوص کلاس کے نام تفویض کرنا۔ ان دیگر طریقوں سے قطع نظر، @scope کا طریقہ بہت زیادہ جامع ہے۔ زیادہ اہم بات یہ ہے کہ اگر کلاس کے نام تبدیل ہوتے ہیں یا غلط استعمال ہوتے ہیں یا ایچ ٹی ایم ایل کے ڈھانچے میں ترمیم کی جاتی ہے تو یہ ٹوٹے ہوئے انداز کے خطرے کو روکتا ہے۔ اب جب کہ @ اسکوپ بیس لائن سے مطابقت رکھتا ہے، ہمیں مزید کام کرنے کی ضرورت نہیں ہے! ہم اس خیال کو "اسٹائل فگر ایٹ" بنانے کے لیے متعدد اختتامی حدود کے ساتھ آگے لے جا سکتے ہیں:
/*
نتیجہ Utility-first CSS فریم ورک، جیسے Tailwind، پروٹوٹائپنگ اور چھوٹے پروجیکٹس کے لیے اچھا کام کرتے ہیں۔ ان کے فوائد تیزی سے کم ہو جاتے ہیں، تاہم، جب بڑے منصوبوں میں استعمال کیا جاتا ہے جس میں ایک دو سے زیادہ ڈویلپر شامل ہوتے ہیں۔ پچھلے کچھ سالوں میں فرنٹ اینڈ ڈیولپمنٹ تیزی سے پیچیدہ ہو گئی ہے، اور CSS بھی اس سے مستثنیٰ نہیں ہے۔ اگرچہ @ اسکوپ اصول ایک علاج نہیں ہے، یہ پیچیدہ ٹولنگ کی ضرورت کو کم کر سکتا ہے۔ جب اسٹرٹیجک کلاس کے نام کی جگہ، یا اس کے ساتھ استعمال کیا جاتا ہے، @scope برقرار رکھنے کے قابل CSS لکھنے کو آسان اور زیادہ پرلطف بنا سکتا ہے۔ مزید پڑھنا
CSS @scope (MDN) "CSS @scope"، Juan Diego Rodríguez (CSS-Tricks) فائر فاکس 146 ریلیز نوٹس (فائر فاکس) براؤزر سپورٹ (CanIUse) مقبول سی ایس ایس فریم ورک (سی ایس ایس 2024 کی حالت) CSS میں "C": Cascade، Thomas Yip (CSS-Tricks) بی ای ایم کا تعارف (بی ای ایم حاصل کریں)
