डेवलपर्स अक्सर सीएसएस कक्षाओं और आईडी के नामकरण के साथ संघर्ष करते हैं। कुशल नामकरण के लिए इन सर्वोत्तम प्रथाओं का पालन करें।
जावास्क्रिप्ट प्रोजेक्ट में कोड को समझने और बनाए रखने में सीएसएस कक्षाओं और आईडी के नामकरण सम्मेलनों की महत्वपूर्ण भूमिका है। उपयोग किए गए नाम कोडबेस की स्पष्टता, पुन: प्रयोज्यता और लचीलेपन को बढ़ा सकते हैं। किसी JavaScript प्रोजेक्ट में CSS कक्षाओं और ID का नामकरण करते समय सर्वोत्तम अभ्यासों का पालन करना महत्वपूर्ण है।
1. सिमेंटिक नामों का प्रयोग करें
तत्वों के कार्य या उद्देश्य को स्पष्ट रूप से समझाने वाले नामों का चयन करना महत्वपूर्ण है। सिमेंटिक नाम अर्थपूर्ण संदर्भ प्रदान करते हैं और कोड को समझने में आसान बनाते हैं।
उदाहरण के लिए, जैसे पारंपरिक नामों का उपयोग करने के बजाय डिब्बा या धारक, जैसे नामों का उपयोग करने का प्रयास करें हैडर या साइड बार जो घटक की विशिष्ट भूमिका को दर्शाता है।
/* सिमेंटिक नाम का उदाहरण */
.शीर्षक {}
साइडबार {}
2. लगातार नामकरण सम्मेलनों का प्रयोग करें
सीएसएस कक्षाओं और आईडी का नामकरण करते समय संगति महत्वपूर्ण है। बोर्ड भर में समान नामकरण मानक का उपयोग करने से कोडबेस की संरचना को बनाए रखना आसान हो जाता है।
BEM (ब्लॉक एलिमेंट मॉडिफायर) और OOCSS (ऑब्जेक्ट-ओरिएंटेड CSS) नामकरण परंपराएँ सबसे पसंदीदा नामकरण परंपराएँ हैं।
आप मॉड्यूलर, प्रबंधनीय और स्केलेबल CSS कोड लिखने के लिए OOCSS नामकरण सम्मेलन का उपयोग कर सकते हैं। आप कैसे कर सकते हैं इसका एक उदाहरण यहां दिया गया है एक नेविगेशन मेनू बनाएँ ओओसीएसएस का उपयोग करना:
/* संरचना */नव {
दिखाना: मोड़ना;
सूची-शैली: कोई नहीं;
}.nav__item {
मार्जिन-सही: 1रेम;
}.नव__लिंक {
text-decoration: कोई नहीं;
रंग: #333;
}/* उपस्थिति */
.नव__लिंक: होवर {
text-decoration: रेखांकन;
}
आपके पास इस उदाहरण में नेविगेशन मेनू के लिए कोड के दो अलग-अलग हिस्से हैं, एक संरचना के लिए और दूसरा दिखावट के लिए। दिखावट भाग रंगों और अन्य शैलियों का वर्णन करता है जो इसे एक आकर्षक रूप देते हैं, जबकि संरचना अनुभाग बताता है कि मेनू आइटम कैसे और कहाँ स्थित होंगे।
3. नामस्थान से बचें
CSS में, नामस्थान सिमेंटिक संरचनाएं हैं जो आपको उनके चयन के लिए एक नामस्थान उपसर्ग प्रदान करने की अनुमति देती हैं। मॉड्यूल, पुस्तकालयों, या कोडबेस के अन्य भागों के बीच अंतर करने के लिए जिसमें परस्पर विरोधी वर्ग नाम हो सकते हैं, नामस्थान उपसर्ग का उपयोग किया जाता है।
हालांकि यह सुविधा उपयोगी है, इससे विशिष्टता और रख-रखाव संबंधी समस्याएं हो सकती हैं।
नाम स्थान का सबसे बड़ा नुकसान चयनकर्ता विशिष्टता को संभालने में कठिनाई है। एक नामस्थान उपसर्ग चयन को अधिक विशिष्ट बना सकता है, जिससे भविष्य में शैलियों को ओवरराइड करना अधिक कठिन हो जाता है।
यह सीएसएस कोड ब्लोट की ओर जाता है, जो समय के साथ बनाए रखने के लिए भ्रामक और चुनौतीपूर्ण है।
उदाहरण के लिए लें:
/* नाम स्थान के साथ */.my-मॉड्यूल।संतुष्ट {
पृष्ठभूमि का रंग: नीला;
}/* नाम स्थान के बिना */
.मॉड्यूल-हेडर {
पृष्ठभूमि का रंग: लाल;
}.मॉड्यूल-सामग्री {
पृष्ठभूमि का रंग: पीला;
}
नामस्थान उपसर्ग .my-मॉड्यूल और ।संतुष्ट दोनों कोड के मुख्य ब्लॉक में उपयोग किए जाते हैं। परिणाम के रूप में चयन अधिक सटीक हो जाता है, जिससे भविष्य की शैली अधिक चुनौतीपूर्ण हो जाती है।
दूसरे भाग में, नामस्थान को वर्णनात्मक वर्ग नामों से बदल दिया जाता है .मॉड्यूल-हेडर और .मॉड्यूल-सामग्री. कोड को समझने में आसान बनाने के अलावा, यह इसे बनाए रखना भी आसान बनाता है।
नेमस्पेस का उपयोग करने से आपके प्रोग्राम में अनावश्यक जटिलता आती है, खासकर जब कई लोग एक ही प्रोजेक्ट के विभिन्न हिस्सों पर काम कर रहे हों। आपको एक दूसरे के कोड को समझने और बदलने में मुश्किल हो सकती है क्योंकि अलग-अलग टीमें अलग-अलग नामस्थान उपसर्गों का उपयोग कर सकती हैं।
उदाहरण के लिए वर्णनात्मक वर्ग के नामों का उपयोग करें:
.शीर्षक {पृष्ठभूमि का रंग: लाल;
}
।संतुष्ट {
पृष्ठभूमि का रंग: पीला;
}
वर्णनात्मक वर्ग नामों का उपयोग करके, आप नामस्थानों की आवश्यकता को दूर कर सकते हैं, और आप अपने कोडबेस को अच्छी तरह से संरचित और समझने में आसान रख सकते हैं।
4. वैश्विक नामों से बचें
जावास्क्रिप्ट परियोजनाओं में, सीएसएस कक्षाओं और आईडी के लिए वैश्विक नामों से बचना महत्वपूर्ण है। वैश्विक नाम कोड रखरखाव को जटिल बनाते हैं और नामकरण जोखिम की संभावना को बढ़ाते हैं। अधिक स्थायी और स्केलेबल कोडबेस सुनिश्चित करने के लिए, यह अच्छा है कि आप किसी घटक या मॉड्यूल के दायरे में अधिक सटीक नामों का उपयोग करें।
नीचे दिए गए उदाहरण पर विचार करें:
वैश्विक नामों का गलत उपयोग<डिवकक्षा="कंटेनर">
<डिवकक्षा="साइडबार">सामग्री यहाँ
डिव>
डिव>
सामान्य वर्ग के नाम साइड बार और CONTAINER उपरोक्त उदाहरण में परियोजना के अंदर अन्य स्टाइल शीट या जावास्क्रिप्ट कोड के साथ टकराव की आशंका है। उदाहरण के लिए, यदि दो स्टाइल शीट समान निर्दिष्ट करती हैं साइडबार class, एक नीले रंग की पृष्ठभूमि के साथ और दूसरा लाल पृष्ठभूमि के साथ, साइडबार का रंग इस बात पर निर्भर करेगा कि कौन सी स्टाइल शीट आखिरी बार लोड होती है। इसके अप्रत्याशित और अप्रत्याशित परिणाम हो सकते हैं।
इन समस्याओं को कम करने के लिए प्रासंगिक घटक या मॉड्यूल के दायरे में आने वाले अधिक सटीक नामों का उपयोग करना बेहतर है।
उन्नत संस्करण देखें।
विशिष्ट नामों के साथ सुधार किया गया<डिवकक्षा="हेडर__कंटेनर">
<डिवकक्षा="साइडबार__सामग्री">सामग्री यहाँ
डिव>
डिव>
बदले हुए संस्करण में, वर्ग के नाम हैडर__कंटेनर और साइडबार__सामग्री यह स्पष्ट करें कि प्रत्येक तत्व क्या है और यह क्या करता है।
विशिष्ट नामों का उपयोग करने से विवादों के नामकरण का जोखिम कम हो जाता है और यह सुनिश्चित होता है कि शैलियाँ केवल उनके संबंधित घटकों या मॉड्यूल के भीतर प्रत्याशित घटकों को प्रभावित करती हैं।
5. बीईएम नामकरण सम्मेलन का प्रयोग करें
बीईएम (ब्लॉक एलिमेंट मॉडिफायर) नामकरण सम्मेलन जावास्क्रिप्ट परियोजनाओं में सीएसएस कक्षाओं और आईडी के नामकरण के लिए लोकप्रिय है। BEM नामकरण तत्वों का एक संरचित और मॉड्यूलर तरीका प्रदान करता है, पुन: प्रयोज्यता को प्रोत्साहित करता है, और कोडबेस को बनाए रखना आसान बनाता है।
बीईएम सम्मेलनों में ब्लॉक, तत्व और संशोधक शामिल हैं। एक उच्च-स्तरीय तत्व या स्टैंड-अलोन घटक को ब्लॉक कहा जाता है। तत्व ब्लॉक के घटक भाग हैं जो ब्लॉक के संदर्भ पर निर्भर करते हैं। संशोधक किसी ब्लॉक या तत्व के स्वरूप या व्यवहार को बदल सकते हैं।
यहाँ BEM नामकरण परिपाटी का उपयोग करते हुए एक उदाहरण दिया गया है:
/* बीईएम नामकरण परंपरा का उदाहरण *//* अवरोध पैदा करना */
.शीर्षक {}/ * ब्लॉक का तत्व * /
।शीर्षलेख का लोगो {}
.header__menu {}
/ * तत्व का संशोधक * /
.header__menu--active {}
उपरोक्त चित्रण एक प्रदर्शित करता है हैडर ए के साथ ब्लॉक करें प्रतीक चिन्ह और ए मेन्यू तत्व। मेन्यू आइटम प्राप्त करता है सक्रिय यह दिखाने के लिए बदलें कि यह सक्रिय हो गया है।
आप कोडबेस की संरचना और पदानुक्रम को स्पष्ट करते हुए, विभिन्न भागों के बीच मूलभूत घटकों और कनेक्शनों की तेजी से पहचान कर सकते हैं।
6. उपसर्ग या प्रत्यय का प्रयोग करें
आप विशेष रूप से बड़ी परियोजनाओं में सीएसएस वर्ग और आईडी नामों में अतिरिक्त सेटिंग्स जोड़ सकते हैं या उन्हें उपसर्ग कर सकते हैं। आप जैसे उपसर्ग का उपयोग कर सकते हैं जे एस- यह इंगित करने के लिए कि एक वर्ग या आईडी जावास्क्रिप्ट क्षमताओं की पेशकश करता है। जावास्क्रिप्ट नामकरण सम्मेलन इन सीएसएस नामकरण परंपराओं के साथ मिलकर आप लंबे समय में समय और प्रयास बचा सकते हैं।
जावास्क्रिप्ट उपसर्ग के साथ एचटीएमएल<बटनकक्षा="जेएस-टॉगल">टॉगलबटन>
<डिवपहचान="जेएस-मोडल">मॉडलडिव>
7. वर्णनात्मक नामों का प्रयोग करें
आप वर्णनात्मक नामों के माध्यम से किसी तत्व के उद्देश्य, कार्य या सामग्री को बेहतर ढंग से समझ सकते हैं।
नीचे दिए गए उदाहरण पर विचार करें:
/* गैर-वर्णनात्मक नाम */।नीला बॉक्स {
/* शैलियाँ यहाँ */
}
ए {
/* शैलियाँ यहाँ */
}
वर्ग के नाम नीला बॉक्स और ए उपरोक्त उदाहरण में वे संदर्भित घटकों पर कोई प्रासंगिक जानकारी प्रेषित नहीं करते हैं। वर्णनात्मक नामकरण की अनुपस्थिति आपके लिए कार्यक्रम के भीतर कुछ घटकों के उद्देश्यों या भूमिकाओं को शीघ्रता से समझना कठिन बना सकती है।
वर्णनात्मक नामों का प्रयोग करें जो तत्व की भूमिका को सटीक रूप से समझाते हैं कोड की पठनीयता और रखरखाव में सुधार.
नीचे दिए गए बेहतर उदाहरण पर विचार करें:
/* वर्णनात्मक नाम */उत्पाद कार्ड {
/* शैलियाँ यहाँ */
}
.नेविगेशन-लिंक {
/* शैलियाँ यहाँ */
}
वर्ग के नाम उत्पाद कार्ड और नेविगेशन-लिंक अद्यतन संस्करण में यह स्पष्ट करें कि प्रत्येक तत्व किस उद्देश्य से कार्य करता है। आप इन वर्णनात्मक नामों के साथ कोड को एक्सप्लोर करना और संपादित करना आसान पाएंगे।
वर्णनात्मक नामों का उपयोग करने से कोडबेस पर काम करने वाले वर्तमान और संभावित भविष्य के डेवलपर्स को लाभ होता है। कुछ समय बाद कोड पर दोबारा गौर करने पर, आप टुकड़ों की संरचना और संचालन को आसानी से समझ सकते हैं।
8. छोटे और संक्षिप्त नामों का प्रयोग करें
जबकि विशिष्ट नाम आवश्यक हैं, उन्हें संक्षिप्त रखना भी महत्वपूर्ण है। लंबी कक्षा और आईडी नाम कोड को पढ़ने और बनाए रखने में अधिक कठिन बना सकते हैं। संक्षिप्त होने और विस्तृत होने के बीच संतुलन बनाने का प्रयास करें। इसके अतिरिक्त, परियोजना के संदर्भ में जाने-माने परिवर्णी शब्दों या संक्षिप्त रूपों का उपयोग करने पर विचार करें।
उस मामले पर विचार करें जहां आप अपनी वेबसाइट पर नेविगेशन मेनू को कस्टमाइज़ करने के लिए CSS का उपयोग करना चाहते हैं। आप छोटे, अधिक विशिष्ट नामों का उपयोग कर सकते हैं जैसे नव-आइटम या नव-लिंक लंबे जैसे के बजाय नव-इंटरफ़ेस या मुख्य-नेविगेशन-लिंक.
नव-आइटम {
/* नेविगेशन मेनू आइटम के लिए शैलियाँ */
}
एनएवी-लिंक {
/* नेविगेशन लिंक के लिए शैलियाँ */
}
परियोजना के संदर्भ में परिवर्णी शब्द या लोकप्रिय संक्षिप्त रूपों का उपयोग करना, जैसे एनएवी के लिए मार्गदर्शन, अन्य प्रोग्रामरों के लिए कोड को समझने में बहुत आसान बना सकता है।
सीएसएस कक्षाओं और आईडी के नामकरण के लिए सर्वोत्तम अभ्यास
एक जावास्क्रिप्ट परियोजना में, कोड पठनीयता, रखरखाव और मापनीयता के लिए उचित रूप से सीएसएस कक्षाओं और आईडी का नाम देना महत्वपूर्ण है।
आप स्टाइल शीट को सरल बना सकते हैं और कोड की गुणवत्ता में सुधार कर सकते हैं। अच्छे नामकरण सम्मेलनों को निर्धारित करने के लिए समय निकालने से आपके और दूसरों के लिए कोडबेस को समझना और बनाए रखना आसान हो जाएगा।
