𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: یوٹیلیٹی اسٹائلز بہتر طریقے سے کیوں اسکیل ہوتے ہیں
بہت سے ڈویلپرز HTML میں یوٹیلیٹی کلاسز دیکھنا ناپسند کرتے ہیں۔ یہ بکھرا ہوا (messy) لگتا ہے۔ یہ ان پرانے ان لائن اسٹائلز کی طرح لگتا ہے جن سے بچنا آپ نے سیکھا تھا۔ آپ کو لگ سکتا ہے کہ ہم پیچھے کی طرف جا رہے ہیں۔
لیکن روایتی CSS ایک مختلف مسئلہ پیدا کرتی ہے۔
ایک ایسی اسٹائل شیٹ کا تصور کریں جس میں 5,000 لائنیں ہوں۔ ڈویلپر A نے دو سال پہلے ایک کلاس لکھی تھی۔ ڈویلپر B ایک چھوٹی سی چیز تبدیل کرنا چاہتا ہے۔ ڈویلپر B اصل کلاس کو چھونے سے ڈرتا ہے۔ وہ نہیں جانتے کہ آیا اس سے کسی چھپے ہوئے صفحے پر اثر پڑے گا۔ اس لیے، وہ اس کے بجائے ایک نئی کلاس بنا دیتے ہیں۔
اس سے دو بڑے مسائل پیدا ہوتے ہیں:
- جب بھی آپ کوئی فیچر شامل کرتے ہیں، آپ کا CSS بنڈل بڑھ جاتا ہے۔
- آپ .card-body-flex-inner جیسی چیزوں کے نام رکھنے میں گھنٹوں ضائع کرتے ہیں۔
Tailwind CSS اس طریقہ کار کو بدل دیتا ہے۔ یہ bg-mint-500 یا p-4 جیسی یوٹیلیٹی کلاسز استعمال کرتا ہے۔ یہ طریقہ دو اہم فوائد فراہم کرتا ہے:
چھوٹے بنڈل سائز آپ اپنی پوری ایپ میں انہی کلاسز کو دوبارہ استعمال کرتے ہیں۔ آپ کی CSS فائل آپ کے پروجیکٹ کے ساتھ ساتھ خطی طور پر (linearly) نہیں بڑھتی۔ چاہے آپ کے پاس دس صفحات ہوں یا دس ہزار، آپ کی CSS چھوٹی رہتی ہے۔
محفوظ ریفیکٹرنگ (Safer Refactoring) کسی بھی ایلیمنٹ کے تمام اسٹائلز اسی کمپوننٹ کے اندر ہوتے ہیں۔ اگر آپ کمپوننٹ کو ڈیلیٹ کرتے ہیں، تو اسٹائلز بھی اس کے ساتھ چلے جاتے ہیں۔ آپ غلطی سے کسی دوسرے صفحے پر سائیڈ بار کو خراب نہیں کریں گے۔
آپ ریڈیبلٹی (readability) کے بارے میں پوچھ سکتے ہیں۔
جدید ویب ڈویلپمنٹ میں، آپ React یا Vue جیسے کمپوننٹس استعمال کرتے ہیں۔ آپ سارا دن بکھرے ہوئے HTML کو نہیں دیکھتے۔ آپ کمپوننٹ کو ایک بار اسٹائل کرتے ہیں۔ پھر، آپ اپنے مین لے آؤٹ میں
بکھری ہوئی تفصیلات کمپوننٹ فائل کے اندر ہی رہتی ہیں۔ آپ کا مین آرکیٹیکچر صاف ستھرا اور قابلِ پیش گوئی (predictable) رہتا ہے۔
ہم نے بہتر مینٹیننس کے لیے خوبصورت مارک اپ کا تبادلہ کیا۔ ہم ایک مستحکم پروڈکشن سسٹم کو یقینی بنانے کے لیے ڈویلپمنٹ کے دوران بکھرے ہوئے کوڈ کو قبول کرتے ہیں۔
آپ اپنی CSS کو کیسے مینیج کرتے ہیں؟ کیا آپ کو یوٹیلیٹی کلاسز پسند ہیں؟