مواد
- 01. فائلوں میں آرڈر اور ڈھانچہ شامل کریں
- 02. ایک بیس سی ایس ایس فائل بنائیں
- 03. اپنے ترتیب کو دوسرے CSS سے الگ کریں
- 04. اپنے سی ایس ایس کو ماڈیولری لکھیں
- 05. طویل سلیکٹر زنجیروں سے پرہیز کریں
- 06. اپنے اصولوں کو مت بھولنا
ہم سب وہاں موجود ہیں۔ جب آپ آہستہ آہستہ اپنے تازہ ترین CSS تماشائیوں کی اسٹائلس سی ایس فائل کو کھولتے ہیں تو ، آپ دیکھیں گے کہ یہ 2،000 لائنوں کی لمبی ہے اور جس طبقے میں آپ کو تبدیل کرنے کی ضرورت ہے وہ وسط میں سمیک ہے۔
آپ تنہا ہیں ، خوفزدہ ہیں اور اس کلاس میں ترمیم کرنا ٹھیک ہے تو اس کا اندازہ نہیں ہے کیونکہ یہ بالکل مختلف صفحے پر کچھ گرا سکتا ہے۔ آخری حربے کے طور پر آپ فائل کے آخر میں جاتے ہیں اور عنصر سے نمٹنے کے لئے ایک نئی کلاس بناتے ہیں جس میں پہلے ہی سات کلاسز موجود ہیں۔ یہ کسی بھی ڈویلپر کے لئے ایک عام تجربہ ہے جو کافی عرصے سے سی ایس ایس کے ساتھ کام کر رہا ہے (سی ایس ایس انیمیشن کی ہماری پسندیدہ مثالوں کو کچھ سی ایس ایس پریرتا کے لئے دیکھیں)۔
تو ، آئیے اس بارے میں بات کرتے ہیں کہ اچھا سی ایس ایس لکھتے وقت مقصد کیا ہونا چاہئے۔ مقصد ہوشیار اور پیچیدہ قواعد پیدا کرنا نہیں ہے۔ کسی سلیکٹر تار کو انجینئر کرنے کی ضرورت نہیں ہے تاکہ یہ زیادہ سے زیادہ وسیع پیمانے پر قابل عمل ہو۔ اچھے سی ایس ایس کا ہدف آسان ، ماڈیولر اور سب سے اہم بات یہ ہے کہ آسانی سے برقرار رکھنے کے قواعد لکھنا چاہئے۔ یہاں ہم آپ کو صحت مند کوڈبیس بنانے اور برقرار رکھنے میں مدد کے ل some کچھ آسان اور سمارٹ قواعد دیتے ہیں۔
اگر آپ مزید ویب ڈیزائن کے مشوروں کے بعد ہیں تو ، ویب سائٹ لے آؤٹ ، ویب ہوسٹنگ خدمات اور آس پاس کے بہترین ویب ڈیزائن ٹولز پر ہمارے صفحات کو مت چھوڑیں۔ افق پر ایک نئی سائٹ ہے لیکن کوڈ نہیں کرنا چاہتے ہیں؟ کامل ویب سائٹ بلڈر کا انتخاب کریں۔
01. فائلوں میں آرڈر اور ڈھانچہ شامل کریں
پہلے ، ڈویلپرز کے مابین متفقہ ڈھانچے کی بنیاد پر ان کی اپنی سی ایس ایس فائلوں میں اسٹائل کو توڑنے پر غور کریں اور پھر اس پر قائم رہیں۔ غیر منظم انداز میں اسٹائلز کا فولڈر کھولنا ایک خوفناک تجربہ ہے۔ آپ کو اندازہ نہیں ہے کہ کون سی فائلیں کس فائل میں ہیں اور کس طرح ایک انداز کو تبدیل کرنے سے دوسرے پر اثر پڑے گا۔ یاد رکھنا کہ اگر آپ ہر اسٹائل کو اپنی فائل دیتے ہیں اور پھر ان سب کو منسلک کرتے ہیں یا آخر میں ان کو ایک ساتھ جوڑ دیتے ہیں تو آپ کا سرور کم پرواہ نہیں کرسکتا ہے۔
آپ کی سائٹ بہت آہستہ آہستہ لوڈ ہوگی لیکن سرور انہیں پڑھنے میں ٹھیک کام کرے گا۔ فائل کا ڈھانچہ صرف انسانوں کے لئے ہے اور اگر آپ کی فائل کا ڈھانچہ کوئی قیمت مہیا نہیں کررہا ہے تو پھر اس پر دوبارہ غور کرنا چاہئے۔
فائلوں کا ڈھانچہ بنانے کا ایک سب سے کم الجھا ہوا طریقہ پیج کے ذریعہ ہے۔اگر آپ کسی صفحے پر کام کر رہے ہیں اور کسی چیز کو ٹھیک کرنے کی ضرورت ہے تو ، آپ About.css فائل میں جائیں گے۔ اس کے بارے میں CSS سے باہر شیلیوں کو متاثر کرنے کے معاملے سے گریز کرتا ہے۔ پھر آپ کو بس css فائل میں ہونے والی تبدیلیوں کی جانچ پڑتال کرنے کی ضرورت ہے۔
اگرچہ اس سے فائل کی لمبائی کا مسئلہ حل نہیں ہوتا ہے۔ ایک نمایاں طور پر طویل صفحے پر سی ایس ایس کی ایک ہزار سے زیادہ لائنیں آسانی سے ہوسکتی ہیں۔ اپنی فائلوں کو داخلی طور پر تشکیل دینا اس کو کم کرنے کا ایک طریقہ ہے۔ فائل کے اندر حرف تہجی ترتیب دینے کا مطلب ہے کہ اگر آپ سی کے ساتھ شروع ہونے والی کوئی چیز تلاش کررہے ہیں اور وہ وہاں نہیں ہے تو آپ جانتے ہو کہ یہ شامل نہیں ہے۔
یہ ان شیلیوں کے لئے بھی کام کرتا ہے جو پہلے سے موجود ہیں۔ ہر چیز کو حرف تہجی طور پر گروپ کرکے آپ دیکھ سکتے ہیں کہ فائل میں تین یا چار بار کوئی اسٹائل لکھا گیا ہے یا نہیں۔
.boundingBox {بھرتی: 1rem؛ H / *. رابطہ ہیڈر یہاں موجود ہوتا اگر یہ موجود ہے کیوں کہ یہ موجود نہیں ہے کیونکہ ہم محفوظ طریقے سے یہ فرض نہیں کر سکتے ہیں کہ اس کا کوئی وجود نہیں ہے * /. ہیڈر چیلڈرین {بھرتی: 10px 5px؛ پس منظر: # سی سی سی؛ }
02. ایک بیس سی ایس ایس فائل بنائیں
تمام شیلیوں کا تعلق صرف ایک ہی صفحے سے نہیں ہوگا اور ایک سے زیادہ صفحات پر موجود اسلوب کا ہونا عام ہے۔ عام طور پر نہ صرف ویب سائٹ پر بلکہ پورے کاروبار پر لاگو ہونے والے طرزوں کا ہونا بھی عام ہے۔ یہیں سے آپ بہت عمومی اسلوب لکھیں گے جو واقعتا کسی بھی چیز سے تعلق نہیں رکھتے ہیں۔ مثال کے طور پر آپ استعمال کریں گے مختلف رنگ ، فونٹ ، نوع ٹائپ ، نیز کوئی بھی ری سیٹ جو آپ کی سائٹ سے مخصوص ہیں۔
آپ اس حصے میں بنیادی جزو نما شیلیوں کو بھی شامل کرنا چاہتے ہیں ، جیسے بٹن ، فارم عناصر اور الرٹ اسٹائل۔ اس حصے کو اپنی سائٹ کے لئے اسٹائل گائیڈ سمجھیں۔ نہ صرف یہ آپ کی سائٹ کو سی ایس ایس کو برقرار رکھنے کا آسان طریقہ فراہم کرے گا ، بلکہ یہ بھی یقینی بنائے گا کہ اسٹائل یکساں طور پر لاگو ہوں۔
یہ وہ جگہ ہے جہاں آپ ان اسٹائلوں کو شامل کرنا چاہتے ہیں جو سائٹ کے ان حصوں سے تعلق رکھتے ہوں جو خود کو متعدد صفحات پر دہراتے ہیں ، جیسے ہیڈر یا فوٹر۔ اگر آپ کے ان حصوں میں اسٹائل کی ایک خاصی مقدار موجود ہے تو ، یہ ان کو ان کی اپنی فائلوں جیسے ہیڈر سی ایس ایس اور فوٹر سی ایس ایس میں توڑنے میں مدد مل سکتی ہے۔
ذرا احتیاط کریں کہ آپ ان فائلوں میں اسٹائل شامل کرنا شروع نہ کریں جن کا اصل میں تعلق نہیں ہے۔ یاد رکھنا کہ گندا فولڈر کا ڈھانچہ سی ایس ایس کو برقرار رکھنے کو مشکل بنانے کا ایک بہت بڑا طریقہ ہے۔
03. اپنے ترتیب کو دوسرے CSS سے الگ کریں
آپ میں سے جو لوگ SMACSS سے واقف ہیں وہ اس خیال سے واقف ہوں گے کہ آپ اپنی سائٹ پر لاگو ہونے والے عام اسٹائل سے لے آؤٹ اسٹائلز کو الگ کرسکتے ہیں۔ ان شیلیوں کو اپنے بقیہ سی ایس ایس سے الگ کرکے ، اس کا مطلب یہ ہے کہ آپ زیادہ آسانی سے اس بات پر توجہ مرکوز کرسکتے ہیں کہ مختلف حصوں کو کس طرح نظر آنا چاہئے اور اس پر کم اس بات پر کہ وہ اپنے قریب والے حصوں کی نسبت کس طرح برتاؤ کریں۔
یہ ایک بوٹسٹریپ کی مشہور لائبریری جیسے گرڈ سسٹم کو شامل کرکے یا خود نافذ کرکے عمل میں لایا جاسکتا ہے۔ اس مقام پر سائٹ کے ڈیزائنر کے ساتھ بات کرنا ایک اچھا خیال ہے ، کیوں کہ بہت سارے ڈیزائنرز جب کوئی سائٹ بناتے ہیں تو وہ گرڈ سسٹم استعمال کریں گے اور آپ اس حد تک قریب تر جانا چاہیں گے۔
04. اپنے سی ایس ایس کو ماڈیولری لکھیں
اپنی ترتیب سی ایس ایس کو الگ کرنا آپ کے سی ایس ایس کو آسان بنانے کا ایک اور طریقہ ظاہر کرتا ہے۔ سی ایس ایس سے متعلق بہت سے مختلف طریقے ہیں۔ کچھ نام کے لئے SMACSS ، BEM ، OOCSS موجود ہے لیکن چاہے آپ انہیں حصے ، حصے ، ماڈیولز ، اجزاء یا بلاکس قرار دے رہے ہو ان سب میں ایک چیز مشترک ہے۔ یہی ہے کہ وہ آپ کے اسٹائل شیٹ میں دوبارہ پریوست اور خصوصی حصوں کو شامل کرنے کی کوشش کرتے ہیں۔
ایسا کرنے سے ہم اپنے انداز کو بطور DRY (خود سے اعادہ نہ کریں) رکھیں اور انکشیپولیشن بنائیں۔ سی ایس ایس میں ضمنی اثرات ایک بہت بڑی بات ہے۔ براؤزر سی ایس ایس کا استعمال صحیح یا غلط انداز میں کرتا ہے: اگر کسی انداز سے میل کھاتا ہے تو اس کا اطلاق ہوتا ہے ، اگر نہیں تو اسے چھوڑ دیا جاتا ہے۔ اس سے کسی ایسے انداز کی اجازت ملتی ہے جس کا مطلب مصنف کے ذریعہ اب بھی مطابقت پذیر نہیں ہوتا ہے اور ایسا لگتا ہے کہ صفحے کی طرح دکھائی دیتا ہے۔ جب ہم سی ایس ایس کو زیادہ معمولی طور پر لکھتے ہیں ، تو ہم ان ضمنی اثرات کو ان انداز میں گھٹا دیتے ہیں۔
ایک جز یا ماڈیول ایچ ٹی ایم ایل کا ایک ایسا حص isہ ہے جس کو ایک ساتھ جوڑا جاتا ہے اور جس کی طرزیں ایک دوسرے کو متاثر کرتی ہیں۔ ماڈیولر سی ایس ایس بنانا سب کچھ اس بات کی شناخت کے بارے میں ہے کہ جب کسی گروپ سے تعلق رکھتا ہے اور پھر اسے اپنے گردونواح سے الگ کرو۔ اس کا مطلب یہ ہے کہ باہر کی فکر کرنے کی ضرورت نہیں ہے اور اس کے اندر کسی ماڈیول کے بارے میں بھی فکر کرنے کی ضرورت نہیں ہے۔
ہم کلاسز لکھ سکتے ہیں جو اس کو تخلیق کرتے ہیں۔
.aboutHeader {} .aboutHeader_topMenu} ab .boutHeader_bottomMenu}
اصل میں ان شیلیوں میں جو کچھ ہوتا ہے وہ غیر اہم ہے لیکن یہ کیا کرتا ہے اس سے یہ کنٹرول حاصل ہوجاتا ہے کہ پورے ہیڈر میں کیا ہوتا ہے ، ہیڈر کی اوپری لائن اور نیچے لائن۔ ان کے ساتھ نام کی جگہ ڈال کر .aboutHeader کلاس اس بات کو یقینی بناتی ہے کہ ان پر کوئی اور اسٹائل لاگو نہیں ہوگا۔
ڈوی کلاس = "About ہیڈر"> ڈوی کلاس = "کے بارے میں ہیڈر_ٹاپ مینو"> </ ul> </ div> تقسیم کلاس = "کے بارے میں ہیڈر_بٹوم مینو"> ال </ ul> / تقسیم> / تقسیم>
05. طویل سلیکٹر زنجیروں سے پرہیز کریں
جب آپ اجزاء لکھتے ہیں تو ان کو نسبتا shall اتھرا رکھنا آسان ہوتا ہے ، کلاس سلیکٹرز میں دو سے تین پرتوں کی گہرائی میں نہیں جاتا ہے۔ تاہم ، کچھ اجزاء کو آپ جس عنصر کو نشانہ بنانا چاہتے ہو اس تک پہنچنے سے پہلے آپ پانچ ، چھ یا اس سے بھی زیادہ تہوں تک پہنچ سکتے ہیں۔
یاد رکھیں کہ CSS میں جاوا اسکرپٹ کی طرح خلاصہ مسائل کو دور کرنے کی صلاحیت نہیں ہے۔ اس میں کنٹرول کا کوئی بہاؤ یا عملی صلاحیت نہیں ہے۔ اگرچہ یہ اچھی بات ہے ، لہذا طویل سلیکٹر زنجیروں ، گہری گھونسلے والے انداز یا انتہائی عام طرز کے اسٹائل بنا کر اس کی نقالی کرنے کی کوشش نہ کریں۔
یہاں اس کی مثال نہیں ہے کہ اسے کیسے کریں۔
.homectA .titleContainer .title .Subheader. list {
آپ کو یہ کیسے لکھنا چاہئے یہ یہاں ہے:
سب ہیڈر کلاسوں کو ان کا اپنا جزو بنانے کے لئے نام تبدیل کریں
.subheaderCTA .list {
ایک سلیکٹر زنجیر جیسا کہ ’’ اسے کیسے نہ کریں ‘‘ مثال کے طور پر اشارہ کرتا ہے کہ آپ غلط انداز کو نشانہ بنا رہے ہیں۔ یہ اکثر ایسا سلسلہ نہیں ہوتا ہے جو در حقیقت ضروری ہوتا ہے۔ اس کے بجائے اس کا امکان ہے کہ آپ کے پاس کسی جزو کے اندر جزو ہے اور آپ کو اسے براہ راست نشانہ بنانا چاہئے۔ ماڈیولر سی ایس ایس انکسیپولیشن ٹوٹ جاتا ہے اگر آپ اس کے اندر زیادہ سے زیادہ انپلیسولیٹ کرنے کی کوشش کرتے ہیں ، اس کا مطلب ہے کہ آپ کو پھر سے ضمنی اثرات دیکھنا شروع ہوجائیں گے۔
06. اپنے اصولوں کو مت بھولنا
سی ایس ایس بنانے کے بہت سارے طریقے ہیں اور جس پروجیکٹ پر آپ کام کرتے ہیں وہ کچھ مختلف ہوگا۔ اگرچہ یہ قریب قریب ہی ناگزیر ہے کہ کسی بھی کوڈ بیس کو بالآخر ایک نظر ثانی کی ضرورت ہوگی ، لیکن آپ ان اصولوں کو اس سے نمٹنے کے ل slow استعمال کرسکتے ہیں۔ اور اگر آپ کسی ٹیم کے حصہ کے طور پر کام کر رہے ہیں تو ، یقینی بنائیں کہ آپ اپنی ڈیزائن فائلوں کو محفوظ کلاؤڈ اسٹوریج میں رکھتے ہیں ، جس تک ہر ایک تک رسائی حاصل ہوسکتی ہے۔
ہر وقت آپ کو یہ یقینی بنانا چاہئے کہ آپ کے اسٹائل خشک ، انکلیسولیٹڈ ، پڑھنے کے قابل اور قابل تلاش ہیں۔ تبادلہ خیال کردہ اصولوں کا آغاز کرنے سے یہ یقینی بنانے میں مدد ملے گی کہ آئندہ چیزوں کو زیادہ آسانی سے برقرار رکھا جاسکتا ہے۔
لہذا اپنے فائل سسٹم اور اپنی فائلوں کو کچھ حکم جاری رکھیں۔ نام کی جگہ اور اپنے انداز کو ماڈیولائز کریں۔ الگ الگ تشویشات برقرار رکھنے کے لئے بنیادی اسٹائل ، لے آؤٹ شیلیوں اور عام انداز کو الگ کریں۔
آخر میں ، اپنے انداز کو ہر ممکن حد تک آسان اور اتلی رکھیں۔ پہلی بار جب آپ نیا انداز لکھتے ہیں تو یہ مشکل نہیں ہونا چاہئے اور ، اگر آپ کو یہ معلوم ہوتا ہے تو ، غور کریں کہ کیا آپ اس حصے کو بہت پیچیدہ بنا رہے ہیں۔ کیونکہ اگر یہ پہلی بار مشکل ہے تو ذرا سوچیئے کہ سر درد کی نظر ثانی کیا ہوگی۔
یہ مضمون اصل میں شمارہ 323 میں شائع ہوا تھا نیٹ، ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کا سب سے زیادہ فروخت ہونے والا رسالہ۔ خریدنے شمارہ 323 یا سبسکرائب آج نیٹ میں
