بی ای ایم اور ماڈرن سی ایس ایس سلیکٹرز کے ساتھ کیسکیڈ کو ٹیمنگ

بی ای ایم سامنے کی ترقی کی دنیا میں بظاہر تمام تکنیکوں کی طرح، BEM فارمیٹ میں CSS لکھنا پولرائزنگ ہو سکتا ہے. لیکن یہ ہے – کم از کم میرے ٹویٹر کے بلبلے میں – سی ایس ایس کے بہتر طریقہ کار میں سے ایک ہے۔

ذاتی طور پر، مجھے لگتا ہے کہ BEM اچھا ہے، اور میرے خیال میں آپ کو اسے استعمال کرنا چاہیے۔ لیکن میں یہ بھی سمجھتا ہوں کہ آپ کیوں نہیں کرسکتے ہیں۔

بی ای ایم کے بارے میں آپ کی رائے سے قطع نظر، یہ بہت سے فوائد پیش کرتا ہے، سب سے بڑا یہ ہے کہ یہ CSS Cascade میں مخصوصیت کے جھڑپوں سے بچنے میں مدد کرتا ہے۔ اس کی وجہ یہ ہے کہ، اگر صحیح طریقے سے استعمال کیا جائے تو، BEM فارمیٹ میں لکھے گئے کسی بھی سلیکٹر کو ایک ہی مخصوص سکور ہونا چاہیے (0,1,0)۔ میں نے سی ایس ایس کو کئی سالوں میں بڑے پیمانے پر ویب سائٹس کے لیے آرکیٹیکٹ کیا ہے (سوچئے کہ حکومت، یونیورسٹیاں، اور بینک)، اور یہ ان بڑے پروجیکٹس پر ہے جہاں میں نے محسوس کیا ہے کہ بی ای ایم واقعی چمکتا ہے۔ CSS لکھنا اس وقت زیادہ مزہ آتا ہے جب آپ کو یقین ہو کہ آپ جو طرزیں لکھ رہے ہیں یا ترمیم کر رہے ہیں وہ سائٹ کے کسی دوسرے حصے کو متاثر نہیں کر رہے ہیں۔

اصل میں مستثنیات ہیں جہاں مخصوصیت کو شامل کرنا مکمل طور پر قابل قبول سمجھا جاتا ہے۔ مثال کے طور پر: the :hover اور :focus چھدم کلاسز. ان کا ایک مخصوص سکور ہے۔ 0,2,0. ایک اور چھدم عناصر ہیں - جیسے ::before اور ::after - جس کا ایک مخصوص سکور ہے۔ 0,1,1. اگرچہ اس مضمون کے باقی حصوں کے لیے، آئیے فرض کریں کہ ہم کوئی اور مخصوصیت نہیں چاہتے۔ 🤓

لیکن میں واقعی آپ کو BEM پر فروخت کرنے کے لیے نہیں ہوں۔ اس کے بجائے، میں اس بارے میں بات کرنا چاہتا ہوں کہ ہم اسے جدید CSS سلیکٹرز کے ساتھ کیسے استعمال کر سکتے ہیں — سوچیں۔ :is(), :has(), :where()وغیرہ - بھی حاصل کرنے کے لیے زیادہ کا کنٹرول جھرن.

جدید سی ایس ایس سلیکٹرز کے بارے میں یہ کیا ہے؟

۔ سی ایس ایس سلیکٹرز لیول 4 اسپیک عناصر کو منتخب کرنے کے لیے ہمیں کچھ طاقتور نئے (ish) طریقے فراہم کرتا ہے۔ میرے پسندیدہ میں سے کچھ شامل ہیں۔ :is(), :where()، اور :not()، جن میں سے ہر ایک کو تمام جدید براؤزرز کے ذریعہ تعاون حاصل ہے اور آج کل تقریبا کسی بھی پروجیکٹ پر استعمال کرنے کے لئے محفوظ ہے۔

:is() اور :where() بنیادی طور پر ایک ہی چیز ہیں سوائے اس کے کہ وہ کس طرح مخصوصیت کو متاثر کرتے ہیں۔ خاص طور پر، :where() کا ہمیشہ ایک مخصوص سکور ہوتا ہے۔ 0,0,0. ہاں، یہاں تک کہ :where(button#widget.some-class) کوئی خاصیت نہیں ہے. دریں اثنا، کی مخصوصیت :is() سب سے زیادہ خصوصیت کے ساتھ اس کی دلیل کی فہرست میں عنصر ہے۔ لہذا، ہمارے پاس پہلے سے ہی دو جدید سلیکٹرز کے درمیان ایک جھڑپ والا فرق ہے جس کے ساتھ ہم کام کر سکتے ہیں۔

ناقابل یقین حد تک طاقتور :has() رشتہ دار سیوڈو کلاس بھی ہے۔ تیزی سے براؤزر سپورٹ حاصل کرنا (اور اس کے بعد سے سی ایس ایس کی سب سے بڑی نئی خصوصیت ہے۔ گرڈ، میری ناقص رائے میں). تاہم، لکھنے کے وقت، کے لئے براؤزر کی حمایت :has() ابھی تک پیداوار میں استعمال کے لیے کافی اچھا نہیں ہے۔

لیمے اپنے بی ای ایم میں ان سیوڈو کلاسوں میں سے ایک کو اسٹک کریں اور…

/* ❌ specificity score: 0,2,0 */
.something:not(.something--special) {
  /* styles for all somethings, except for the special somethings */
}

افوہ! وہ مخصوص سکور دیکھیں؟ یاد رکھیں، بی ای ایم کے ساتھ ہم مثالی طور پر چاہتے ہیں کہ ہمارے سلیکٹرز کا ایک مخصوص سکور ہو۔ 0,1,0. کیوں ہے 0,2,0 برا اسی مثال پر غور کریں، توسیع شدہ:

.something:not(.something--special) {
  color: red;
}
.something--special {
  color: blue;
}

اگرچہ دوسرا سلیکٹر سورس آرڈر میں آخری ہے، پہلے سلیکٹر کی اعلیٰ خصوصیت (0,2,0) جیت، اور کا رنگ .something--special عناصر کو مقرر کیا جائے گا red. یعنی، فرض کریں کہ آپ کا BEM ٹھیک لکھا گیا ہے اور منتخب عنصر میں دونوں ہیں۔ .something بیس کلاس اور .something--special HTML میں اس پر modifier کلاس کا اطلاق ہوتا ہے۔

لاپرواہی سے استعمال کیا جاتا ہے، یہ سیوڈو کلاسز غیر متوقع طریقوں سے کاسکیڈ کو متاثر کر سکتی ہیں۔ اور یہ اس قسم کی متضادیاں ہیں جو سر درد پیدا کر سکتی ہیں، خاص طور پر بڑے اور زیادہ پیچیدہ کوڈ بیسز پر۔

ڈانگ تو اب کیا؟

یاد رکھیں میں کیا کہہ رہا تھا۔ :where() اور حقیقت یہ ہے کہ اس کی خصوصیت صفر ہے؟ ہم اسے اپنے فائدے کے لیے استعمال کر سکتے ہیں:

/* ✅ specificity score: 0,1,0 */
.something:where(:not(.something--special)) {
  /* etc. */
}

اس سلیکٹر کا پہلا حصہ (.something) اس کا معمول کی مخصوصیت کا سکور حاصل کرتا ہے۔ 0,1,0. لیکن :where() - اور اس کے اندر ہر چیز - کی ایک خاصیت ہے۔ 0، جو سلیکٹر کی خصوصیت میں مزید اضافہ نہیں کرتا ہے۔

:where() ہمیں گھوںسلا کرنے کی اجازت دیتا ہے۔

وہ لوگ جو مخصوصیت کے بارے میں مجھ سے زیادہ پرواہ نہیں کرتے ہیں (اور یہ شاید بہت سارے لوگ ہیں، منصفانہ طور پر) جب گھونسلے کی بات آتی ہے تو یہ بہت اچھا رہا ہے۔ کچھ لاپرواہ کی بورڈ اسٹروک کے ساتھ، ہم سی ایس ایس کو اس طرح ختم کر سکتے ہیں (نوٹ کریں کہ میں اختصار کے لیے Sass استعمال کر رہا ہوں):

.card { ... }

.card--featured {
  /* etc. */  
  .card__title { ... }
  .card__title { ... }
}

.card__title { ... }
.card__img { ... }

اس مثال میں، ہمارے پاس a .card جزو جب یہ ایک "نمایاں" کارڈ ہے (کا استعمال کرتے ہوئے .card--featured کلاس)، کارڈ کے ٹائٹل اور امیج کو مختلف انداز میں اسٹائل کرنے کی ضرورت ہے۔ لیکن، جیسا کہ ہم اب جانئے، اوپر والے کوڈ کے نتیجے میں ایک مخصوص سکور ہوتا ہے جو ہمارے باقی سسٹم سے مطابقت نہیں رکھتا۔

اس کے بجائے ایک ڈائی ہارڈ مخصوصیت والے بیوقوف نے یہ کیا ہوگا:

.card { ... }
.card--featured { ... }
.card__title { ... }
.card__title--featured { ... }
.card__img { ... }
.card__img--featured { ... }

یہ اتنا برا نہیں ہے، ٹھیک ہے؟ سچ کہوں تو یہ خوبصورت سی ایس ایس ہے۔

اگرچہ HTML میں ایک منفی پہلو ہے۔ تجربہ کار BEM مصنفین ممکنہ طور پر پیچیدہ ٹیمپلیٹ منطق سے بخوبی واقف ہیں جو مشروط طور پر متعدد عناصر پر ترمیم کرنے والے کلاسوں کو لاگو کرنے کی ضرورت ہے۔ اس مثال میں، HTML ٹیمپلیٹ کو مشروط طور پر شامل کرنے کی ضرورت ہے۔ --featured تین عناصر میں ترمیم کرنے والی کلاس (.card, .card__title، اور .card__img) اگرچہ شاید اس سے بھی زیادہ حقیقی دنیا کی مثال میں۔ یہ بہت کچھ ہے۔ if بیانات۔

۔ :where() سلیکٹر ہماری بہت کم ٹیمپلیٹ منطق لکھنے میں مدد کر سکتا ہے — اور بوٹ کے لیے کم BEM کلاسز — مخصوصیت کی سطح میں اضافہ کیے بغیر۔

.card { ... }
.card--featured { ... }

.card__title { ... }
:where(.card--featured) .card__title { ... }

.card__img { ... }
:where(.card--featured) .card__img { ... }

یہاں ایک ہی چیز ہے لیکن ساس میں (پچھلے کو نوٹ کریں۔ ایمپرسینڈ):

.card { ... }
.card--featured { ... }
.card__title { 
  /* etc. */ 
  :where(.card--featured) & { ... }
}
.card__img { 
  /* etc. */ 
  :where(.card--featured) & { ... }
}

آپ کو مختلف بچوں کے عناصر پر ترمیم کرنے والے کلاسوں کو لاگو کرنے کے لیے اس طریقہ کار کا انتخاب کرنا چاہیے یا نہیں، یہ ذاتی ترجیح کا معاملہ ہے۔ لیکن کم از کم :where() ہمیں اب انتخاب دیتا ہے!

غیر BEM HTML کے بارے میں کیا خیال ہے؟

ہم ایک کامل دنیا میں نہیں رہتے۔ کبھی کبھی آپ کو HTML سے نمٹنے کی ضرورت ہوتی ہے جو آپ کے قابو سے باہر ہے۔ مثال کے طور پر، ایک فریق ثالث کا اسکرپٹ جو HTML کو انجیکٹ کرتا ہے جسے آپ کو اسٹائل کرنے کی ضرورت ہے۔ وہ مارک اپ اکثر بی ای ایم کلاس کے ناموں کے ساتھ نہیں لکھا جاتا ہے۔ کچھ معاملات میں وہ طرزیں کلاسوں کو بالکل استعمال نہیں کرتی ہیں لیکن IDs!

ایک بار پھر، :where() ہماری پیٹھ ہے. یہ حل قدرے ہیکی ہے، کیوں کہ ہمیں کسی عنصر کی کلاس کا حوالہ DOM درخت کے اوپر کہیں اور کرنا ہوگا جس کے بارے میں ہم جانتے ہیں کہ موجود ہے۔

/* ❌ specificity score: 1,0,0 */
#widget {
  /* etc. */
}

/* ✅ specificity score: 0,1,0 */
.page-wrapper :where(#widget) {
  /* etc. */
}

والدین کے عنصر کا حوالہ دینا اگرچہ تھوڑا خطرناک اور محدود محسوس ہوتا ہے۔ کیا ہوگا اگر وہ پیرنٹ کلاس کسی وجہ سے تبدیل ہو جائے یا موجود نہ ہو؟ ایک بہتر (لیکن شاید اتنا ہی ہیکی) حل استعمال کرنا ہوگا۔ :is() اس کے بجائے یاد رکھیں، کی خصوصیت :is() اس کی سلیکٹر لسٹ میں سب سے مخصوص سلیکٹر کے برابر ہے۔

لہذا، اس کلاس کا حوالہ دینے کے بجائے جس کے ساتھ ہم جانتے ہیں (یا امید!) موجود ہے۔ :where()جیسا کہ اوپر کی مثال میں ہے، ہم ایک میک اپ کلاس کا حوالہ دے سکتے ہیں۔ ٹیگ

/* ✅ specificity score: 0,1,0 */
:is(.dummy-class, body) :where(#widget) {
  /* etc. */
}

ہمیشہ موجود body ہمارے انتخاب میں ہماری مدد کرے گا۔ #widget عنصر، اور کی موجودگی .dummy-class اسی کے اندر کلاس :is() دیتا ہے body سلیکٹر ایک کلاس کے طور پر ایک ہی مخصوص اسکور (0,1,0)… اور کا استعمال :where() اس بات کو یقینی بناتا ہے کہ سلیکٹر اس سے زیادہ مخصوص نہیں ہوتا ہے۔

یہی ہے!

اس طرح ہم جدید خصوصیت کے انتظام کی خصوصیات کا فائدہ اٹھا سکتے ہیں۔ :is() اور :where() سیوڈو کلاسز کے ساتھ مخصوص تصادم کی روک تھام جو ہمیں BEM فارمیٹ میں CSS لکھتے وقت حاصل ہوتی ہے۔ اور بہت دور مستقبل میں، ایک بار :has() فائر فاکس سپورٹ حاصل کرتا ہے۔ (یہ فی الحال لکھنے کے وقت ایک جھنڈے کے پیچھے سپورٹ کیا گیا ہے) ہم ممکنہ طور پر اس کے ساتھ جوڑنا چاہیں گے :where() اس کی مخصوصیت کو کالعدم کرنے کے لیے۔

چاہے آپ بی ای ایم کے نام دینے پر پوری طرح سے جائیں یا نہیں، مجھے امید ہے کہ ہم اس بات سے اتفاق کر سکتے ہیں کہ سلیکٹر کی مخصوصیت میں مستقل مزاجی ایک اچھی چیز ہے!