Html / css आईडी और कक्षाओं के लिए मानक नामकरण सम्मेलन क्या है?


250

क्या यह आपके द्वारा उपयोग किए जा रहे प्लेटफ़ॉर्म पर निर्भर करता है, या क्या एक सामान्य सम्मेलन है जो अधिकांश डेवलपर्स सुझाव / अनुसरण करते हैं?

कई विकल्प हैं:

  1. id="someIdentifier"' - जावास्क्रिप्ट कोड के साथ बहुत सुसंगत लग रहा है।
  2. id="some-identifier" - HTML5 जैसी विशेषताओं और html में अन्य चीजों की तरह दिखता है।
  3. id="some_identifier" - रूबी कोड के साथ बहुत सुसंगत लग रहा है और अभी भी जावास्क्रिप्ट के अंदर एक वैध पहचानकर्ता है

मैं सोच रहा था कि # 1 और # 3 ऊपर सबसे अधिक समझ में आता है क्योंकि वे जावास्क्रिप्ट के साथ अच्छे से खेलते हैं।

क्या इसका कोई सही उत्तर है?



जवाबों:


256

एक नहीं है।

मैं अपने पाठ संपादक (गेडिट) के वाक्य विन्यास को उजागर करने वाले हाइफ़न को गड़बड़ करने के कारण हर समय अंडरस्कोर का उपयोग करता हूं, लेकिन यह व्यक्तिगत प्राथमिकता है।

मैंने इन सभी सम्मेलनों का उपयोग सभी जगह देखा है। आप जो सबसे अच्छा सोचते हैं, उसका उपयोग करें - वह जो आपके लिए पढ़ने में सबसे अच्छा / आसान लग रहा है, साथ ही टाइप करना सबसे आसान है क्योंकि आप इसे बहुत उपयोग कर रहे हैं। उदाहरण के लिए, यदि आपको कीबोर्ड के नीचे (बिना, लेकिन पूरी तरह से संभव है) पर अपनी अंडरस्कोर कुंजी मिल गई है, तो स्वच्छता के लिए चिपके रहें। बस अपने लिए जो सबसे अच्छा है, उसके साथ चलें। इसके अतिरिक्त, इन सम्मेलनों के सभी 3 आसानी से पठनीय हैं। यदि आप एक टीम में काम कर रहे हैं, तो टीम द्वारा निर्दिष्ट सम्मेलन (यदि कोई हो) के साथ रखना याद रखें।

अद्यतन 2012

मैंने समय के साथ कार्यक्रम कैसे बदला है। मैं अब thisIsASelectorहाइफ़न के बजाय अब ऊंट मामले ( ) का उपयोग करता हूं ; मैं बाद में बदसूरत लगता हूं। आप जो भी पसंद करते हैं उसका उपयोग करें , जो समय के साथ आसानी से बदल सकता है।

अद्यतन २०१३

ऐसा लगता है कि मुझे वार्षिक रूप से चीजों को मिलाना अच्छा लगता है ... उदात्त पाठ पर स्विच करने और थोड़ी देर के लिए बूटस्ट्रैप का उपयोग करने के बाद, मैं वापस डैश पर चला गया हूं। मेरे लिए अब वे un_der_scores या camelCase की तुलना में बहुत अधिक स्वच्छ दिखते हैं। मेरा मूल बिंदु अभी भी खड़ा है: कोई मानक नहीं है।

अद्यतन २०१५

यहाँ सम्मेलनों के साथ एक दिलचस्प कोने का मामला जंग है । मैं वास्तव में भाषा को पसंद करता हूं, लेकिन कंपाइलर आपको चेतावनी देगा यदि आप इसके अलावा किसी अन्य चीज का उपयोग करके सामान को परिभाषित करते हैं underscore_case। आप चेतावनी को बंद कर सकते हैं, लेकिन यह दिलचस्प है कि संकलक डिफ़ॉल्ट रूप से एक कन्वेंशन का दृढ़ता से सुझाव देता है। मुझे लगता है कि बड़ी परियोजनाओं में यह क्लीनर कोड की ओर जाता है जो कोई बुरी बात नहीं है।

अपडेट 2016 ( आपने इसके लिए पूछा था)

मैंने अपनी परियोजनाओं को आगे बढ़ाने के लिए BEM मानक को अपनाया है । वर्ग के नाम अंत में काफी क्रियात्मक हैं, लेकिन मुझे लगता है कि यह कक्षाओं और सीएसएस के साथ अच्छी संरचना और पुन: प्रयोज्य देता है जो उनके साथ जाता है। मुझे लगता है कि BEM वास्तव में एक मानक है (इसलिए मेरा noएक yesशायद बन जाता है ) लेकिन यह अभी भी आप पर निर्भर है कि आप किसी परियोजना में क्या उपयोग करने का निर्णय लेते हैं। सबसे महत्वपूर्ण: आप जो चुनते हैं, उसके अनुरूप होना चाहिए।

अपडेट 2019 ( आपने इसके लिए पूछा था)

काफी समय तक कोई सीएसएस नहीं लिखने के बाद, मैंने एक ऐसे स्थान पर काम करना शुरू किया, जो उनके किसी उत्पाद में OOCSS का उपयोग करता है । मुझे व्यक्तिगत रूप से हर जगह कूड़े के वर्ग के लिए यह बहुत अप्रिय लगता है, लेकिन हर समय एचटीएमएल और सीएसएस के बीच कूदने के लिए काफी उत्पादक लगता है।

मैं अभी भी BEM पर बसा हुआ हूं, हालांकि। यह क्रिया है, लेकिन नामस्थान रिएक्ट घटकों में इसके साथ काम करना बहुत स्वाभाविक है। ब्राउज़र परीक्षण के दौरान विशिष्ट तत्वों को चुनने के लिए भी यह बहुत अच्छा है।

OOCSS और BEM वहाँ से बाहर CSS मानकों में से कुछ हैं। वह चुनें जो आपके लिए काम करता है - वे सभी समझौते से भरे हुए हैं क्योंकि CSS सिर्फ इतना ही अच्छा नहीं है

अद्यतन 2020

इस साल एक उबाऊ अद्यतन। मैं अभी भी BEM का उपयोग कर रहा हूं। ऊपर सूचीबद्ध कारणों से 2019 के अपडेट से मेरी स्थिति वास्तव में नहीं बदली है। आपके लिए जो काम करता है उसका उपयोग अपनी टीम के आकार के साथ करें और अपनी पसंद के सीएसएस के खराब फीचर्स से जितना हो सके उतना कम छिपाएं।


10
मुझे लगता है कि आपके ऐप के बड़े होने के अनुसार आपकी आईडी लंबी और जटिल होने लगती है, तो उस क्षण में डैश अच्छे नहीं लगते हैं। मैं भी उदात्त और ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, और मैं बूटस्ट्रैप जैसी कक्षाओं के लिए डैश का उपयोग करने में समझौता कर रहा हूं। लेकिन आईडी जावास्क्रिप्ट के लिए अधिक है, इसलिए मैं उस मामले में कैमलकेस का उपयोग करना पसंद करता हूं।
ग्लोडासज

3
मेरे लिए मैं अभी भी अंडरस्कोर स्टाइल पसंद करता हूं। केवल इसलिए कि सभी HTML टैग और विशेषताएँ कम मामले हैं। मैं यहां किसी ऊपरी मामले से बच रहा हूं।
YaoXing

3
एक अर्ध-मानक जो मैंने देखा है (बूटस्ट्रैप इसमें से कुछ करता है) "js-" को किसी भी CSS कक्षाओं या आईडी के लिए प्रस्तुत करना है जो विशेष रूप से जावास्क्रिप्ट के लिए उपयोग किए जाते हैं। शायद यह 2016 के लिए कटौती कर देगा :)
Dolan Antenucci

1
@ बोजैंगल्स - बीईएम दिलचस्प लगता है, हालांकि विभिन्न प्रयोजनों के लिए डैश और अंडरस्कोर का उपयोग कुछ के लिए उपयोग हो रहा है; इसी तरह, डबल डैश / अंडरस्कोर भी होगा :) साझा करने के लिए धन्यवाद
Dolan Antenucci

7
एक कारण मुझे लगता है कि लोग सीएसएस आईडी में डैश पसंद करते हैं और कक्षाएं कार्यक्षमता के लिए हैं। का उपयोग करते हुए विकल्प + छोड़ दिया / सही तीर शब्द के द्वारा अपने कोड शब्द पार करने के लिए प्रत्येक पानी का छींटा पर रुक जाता है, आप आसानी से कीबोर्ड शॉर्टकट का उपयोग आईडी या वर्ग के नाम पार करने के लिए अनुमति देता है। अंडरस्कोर और कैमलकेस को उठाया नहीं जाता है और कर्सर उनके ऊपर ठीक से बह जाएगा जैसे कि यह सभी एक शब्द थे।
काइल वैसैला

42

Google द्वारा css & html शैली मार्गदर्शिका है, जो हमेशा एक हाइफ़न का उपयोग करने की सलाह देती है: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters


110
और फिर भी उस यूआरएल में आईडी अंडरस्कोर का उपयोग कर रहा है :)
टिम

33

मेरा सुझाव है कि आप हाइफ़न (-) के बजाय अंडरस्कोर का उपयोग करें, क्योंकि ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

आप इस तरह से आसानी से आईडी द्वारा मूल्य का उपयोग कर सकते हैं। लेकिन यदि आप एक हाइफ़न का उपयोग करते हैं तो यह एक वाक्यविन्यास त्रुटि का कारण होगा।

यह एक पुराना नमूना है, लेकिन यह jquery के बिना काम कर सकता है - :)

@jean_ralphio के लिए धन्यवाद, बचने के लिए रास्ते भर काम है

var x = document.myForm['my-Id'].value;

डैश-स्टाइल एक Google कोड शैली होगी, लेकिन मुझे यह वास्तव में पसंद नहीं है। मैं शीर्षक के लिए शीर्षक और श्रेणी के लिए ऊंट पसंद करूंगा।


5
किसी ने इसे हरी झंडी दिखाई। आपकी अंग्रेजी बेहतर हो सकती है, लेकिन यह मानते हुए कि यह सही है, यह ज्ञान के कोष के लिए एक उपयोगी जोड़ की तरह लगता है, इसलिए मैं इसे हटाने के खिलाफ मतदान करूंगा।
टॉम ज़िक

3
यह उत्तर रेखांकित है!
के - एसओ में विषाक्तता बढ़ रही है।

19
वर्कअराउंड होनेvar x = document.myForm['my-Id'].value;
एथान

मैं इन तरीकों में से किसी का उपयोग नहीं होता है, बल्कि getElementById('whatever-you-want_my_friend')। निर्भर करता है। यदि आपके कोड में HTML, कोडिंग रेंडरिंग HTML का बैकएंड (सर्वर-साइड) है, तो अपने नामकरण सम्मेलनों, या स्नेक_केस, जो भी आपकी कोडिंग भाषा का उपयोग करता है, से मेल खाने के लिए camelCase का उपयोग करना संभवत: सबसे अच्छा है ताकि आपके सामने और पीछे दोनों कोड के माध्यम से खोज हो सके।
ओलिवर विलियम्स

12

tl; डॉ;

इसका कोई सच्चा जवाब नहीं है। आप वहां से कई को चुन सकते हैं, या जो आप के साथ काम कर रहे हैं, उसके आधार पर अपने स्वयं के मानकों का निर्माण कर सकते हैं। और यह प्लेटफॉर्म पर 100% निर्भर है।


मूल पोस्ट

विचार करने के लिए बस एक और वैकल्पिक मानक:

<div id="id_name" class="class-name"></div>

और आपकी स्क्रिप्ट में:

var variableName = $("#id_name .class-name");

यह बस चर, आईडी, और कक्षाओं के लिए क्रमशः एक कैमसेल कैस, अंडरस्कोर और हाइफन-एटियन का उपयोग करता है। मैंने इस मानक के बारे में विभिन्न वेबसाइटों के एक जोड़े पर पढ़ा है। हालांकि css / jquery चयनकर्ताओं में थोड़ी सी अतिरेक, अतिरेक त्रुटियों को पकड़ना आसान बनाता है। उदाहरण: यदि आप सीएसएस फ़ाइल देखते हैं .unknown_nameया देखते हैं #unknownName, तो आपको पता है कि आपको वास्तव में किसका उल्लेख करना है।


अद्यतन 2019

(हाइफ़न को 'कबाब-केस' कहा जाता है, अंडरस्कोर को 'स्नेक_केस' कहा जाता है, और फिर आपके पास 'टाइटलकेस', 'पास्कलकेस')

मैं व्यक्तिगत रूप से हाइफ़न को नापसंद करता हूं। मैंने मूल रूप से इसे एक विकल्प के रूप में पोस्ट किया है (क्योंकि नियम सरल हैं)। हालाँकि, हाइफ़न चयन शॉर्टकट को बहुत कठिन बनाते हैं (डबल क्लिक, ctrl/ option+ left/ right, और ctrl/cmd + DvsCode में। इसके अलावा, वर्ग के नाम और फ़ाइल नाम ही जगह है जहाँ काम हाइफ़न, वे लगभग हमेशा रहे हैं क्योंकि उद्धरण में या सीएसएस में, आदि कर रहे हैं .पर शार्टकट बात फिर भी लागू होती है।

चर, वर्ग नाम और आईडी के अलावा, आप फ़ाइल नाम सम्मेलनों को भी देखना चाहते हैं। और गिट शाखाओं।

मेरे कार्यालय के कोडिंग समूह ने वास्तव में एक या दो महीने पहले एक बैठक की थी कि हम चीजों को कैसे नाम दें। Git शाखाओं के लिए, हम 321-the_issue_description या 321_the-जारी-विवरण के बीच फैसला नहीं कर सकते। (मैं चाहता था कि 321_theIssueDescription, लेकिन मेरे सहकर्मियों को यह पसंद नहीं आया।

एक उदाहरण, अन्य लोगों के मानकों के साथ काम करने के लिए ...

Vue.js का एक मानक होता है। वास्तव में उनके पास कई वस्तुओं के लिए दो वैकल्पिक मानक हैं। मैं फ़ाइल नाम के लिए उनके दोनों संस्करणों को नापसंद करता हूं। वे "/path/kebab-case.vue"या तो सलाह देते हैं "/path/TitleCase.Vue"। पूर्व का नाम बदलना कठिन है, जब तक कि आप विशेष रूप से इसका नाम बदलने का प्रयास नहीं कर रहे हैं। क्रॉस-प्लेटफॉर्म संगतता के लिए उत्तरार्द्ध अच्छा नहीं है। मैं पसंद करूंगा "/path/snake_case.vue"। हालांकि, जब अन्य लोगों या मौजूदा परियोजनाओं के साथ काम करते हैं, तो यह महत्वपूर्ण है कि जो भी मानक पहले से निर्धारित किया गया था उसका पालन करें। इसलिए मैं कूब-केस के साथ वीयू में फ़ाइलनाम के लिए जाता हूं, भले ही मैं इसके बारे में पूरी तरह से शिकायत करूंगा। क्योंकि इसका अनुसरण नहीं करने का मतलब है कि बहुत सारी फाइलें बदलना जो कि vue-cli सेट करती हैं।


मेरी प्राथमिकता के समान। आईडी के लिए वैरिएबल और अंडर_स्कोर के लिए कैमकेलेज़, हालांकि, मैं सामान्य रूप से दोनों वर्गों और नामों के लिए अंडर_कोर लागू करता हूं।
विंसेंट एडवर्ड गडरिया बिनुआ

मुझे पसंद आया क्योंकि यह वैसा ही है जैसा मैं उपयोग करना पसंद करता हूं। आईडी के लिए 'स्नेक_केस', सीएसएस के लिए 'कबाब-केस', फ़ंक्शंस और वेरिएबल्स के लिए 'कैमकेलकेस'।
एडुआर्डो पाज़

10

HTML और CSS के नामकरण सम्मेलन पर कोई सहमति नहीं है। लेकिन आप ऑब्जेक्ट डिज़ाइन के आसपास अपना नामकरण संरचना कर सकते हैं। अधिक विशेष रूप से जिसे मैं स्वामित्व और संबंध कहता हूं।

स्वामित्व

ऐसे कीवर्ड जो ऑब्जेक्ट का वर्णन करते हैं, उन्हें हाइफ़न द्वारा अलग किया जा सकता है।

कार-नए बने सही

ऑब्जेक्ट का वर्णन करने वाले कीवर्ड चार श्रेणियों में भी गिर सकते हैं (जिन्हें बाएं से दाएं ओर ऑर्डर किया जाना चाहिए): ऑब्जेक्ट, ऑब्जेक्ट-डेस्क्रिप्ट, एक्शन, और एक्शन-डिस्क्रिप्टर।

कार - एक संज्ञा, और एक वस्तु
नई - एक विशेषण, और एक वस्तु-विवरणक जो वस्तु का वर्णन करता है और अधिक विवरण में
बदल गया है - एक क्रिया, और एक क्रिया जो वस्तु के
अधिकार से संबंधित है - एक विशेषण, और एक कार्रवाई-वर्णनात्मक जो वर्णन करती है अधिक विस्तार से कार्रवाई

नोट: क्रिया (क्रियाएं) अतीत-काल (चालू, किया, भागा, आदि) में होनी चाहिए।

संबंध

वस्तुओं में माता-पिता और बच्चे जैसे रिश्ते भी हो सकते हैं। एक्शन और एक्शन-डिस्क्रिप्टर पैरेंट ऑब्जेक्ट से संबंधित है, वे चाइल्ड ऑब्जेक्ट से संबंधित नहीं हैं। वस्तुओं के बीच संबंधों के लिए आप एक अंडरस्कोर का उपयोग कर सकते हैं।

कार-नए बने right_wheel-बाएँ बने छोड़ दिया

  • कार-नया-मोड़-दायां (स्वामित्व नियम का अनुसरण करता है)
  • व्हील-लेफ्ट-टर्न-लेफ्ट (स्वामित्व नियम का अनुसरण करता है)
  • कार-नया-दायाँ-दाहिना-बाएँ-बाएँ-बाएँ (संबंध नियम का अनुसरण करता है)

अंतिम नोट:

  • क्योंकि CSS केस-असंवेदनशील है, इसलिए लोअर-केस (या अपर-केस) में सभी नामों को लिखना बेहतर है; ऊंट-मामले या पास्कल-मामले से बचें क्योंकि वे अस्पष्ट नाम पैदा कर सकते हैं।
  • जानिए कब इस्तेमाल करना है क्लास और कब इस्तेमाल करना है आईडी। यह केवल वेब पेज पर एक बार उपयोग की जा रही आईडी के बारे में नहीं है। ज्यादातर समय, आप एक वर्ग का उपयोग करना चाहते हैं और आईडी नहीं। वेब घटक जैसे (बटन, फॉर्म, पैनल, ... आदि) हमेशा एक वर्ग का उपयोग करना चाहिए। आईडी आसानी से नामकरण संघर्ष का कारण बन सकती है, और अपने मार्कअप को नाम देने के लिए संयम से इस्तेमाल किया जाना चाहिए। स्वामित्व और संबंध की उपरोक्त अवधारणाएं दोनों वर्गों और आईडी के नामकरण पर लागू होती हैं, और आपको नामकरण संघर्ष से बचने में मदद करेगी।
  • यदि आपको मेरा सीएसएस नामकरण सम्मेलन पसंद नहीं है, तो कई अन्य भी हैं: संरचनात्मक नामकरण सम्मेलन, प्रस्तुति नामकरण सम्मेलन, शब्दार्थ नामकरण सम्मेलन, बीईएम नामकरण सम्मेलन, ओसीएस नामकरण सम्मेलन, आदि।

4

एक और कारण है कि कई लोग सीएसएस आईडी और वर्ग नामों में हाइफ़न पसंद करते हैं।

वर्ड द्वारा कोड वर्ड को ट्रैवर्स करने के लिए option+ left/ right(या ctrl+ left/ / right) जैसे कीबोर्ड शॉर्टकट का उपयोग करना प्रत्येक डैश पर कर्सर को रोकता है, जिससे आप कीबोर्ड शॉर्टकट का उपयोग करके आईडी या क्लास के नाम को ठीक से पार कर सकते हैं। अंडरस्कोर और कैमलकेस का पता नहीं चलता है और कर्सर उनके ऊपर से सही बहाव करेगा जैसे कि यह सभी एक ही शब्द थे।


बस दूसरों को भ्रमित न करें: विंडोज के लिए यह CTRL + LEFT / RIGHT
गॉर्डन मोहरीन

यह वास्तव में जहाँ संभव हो वहाँ डैश के बजाय अंडरस्कोर या कैमलकेस का उपयोग करने का मेरा सबसे बड़ा कारण है। the-red-boxएक साधारण डबल क्लिक या दो प्रमुख प्रेस के साथ चयन करना असंभव है। साथ ही vsCode के लिए cmd / ctrl + D। इसके बजाय आपको कई बार जाना होगा या माउस से ड्रैग-सेलेक्ट करना होगा। लेकिन the_red_boxसभी तीन आसान-चयन शॉर्टकट का समर्थन करता है।
21

1

मैंने अभी हाल ही में XML सीखना शुरू किया। अंडरस्कोर संस्करण मुझे एक्सएमएल, जावास्क्रिप्ट (ऊंट मामले) जैसी प्रोग्रामिंग भाषाओं से एक्सएमएल-संबंधी (डोम, एक्सएसडी, आदि) सब कुछ अलग करने में मदद करता है। और मैं आपसे सहमत हूं कि पहचानकर्ता का उपयोग करना जो प्रोग्रामिंग भाषाओं में अनुमत हैं, बेहतर दिखता है।

संपादित करें: असंबंधित हो सकता है, लेकिन यहां XML तत्वों के नामकरण के नियमों और अनुशंसाओं के लिए एक लिंक है जो मैं आईडी (अनुभागों का नामकरण करते समय "XML नामकरण नियम" और "सर्वश्रेष्ठ नामकरण आचरण") करता हूं।

http://www.w3schools.com/xml/xml_elements.asp


1

मुझे लगता है कि यह प्लेटफॉर्म पर निर्भर है। जब .Net MVC का विकास हो रहा है, मैं बूटस्ट्रैप स्टाइल लोअर केस और हाइफ़न का उपयोग क्लास के नाम के लिए करता हूं, लेकिन आईडी के लिए मैं पास्कलकेस का उपयोग करता हूं।

इसका तर्क यह है कि मेरे विचार दृढ़ता से टाइप किए गए दृश्य मॉडल द्वारा समर्थित हैं। C # मॉडल के गुण पास्कल केस हैं। एमवीसी के साथ मॉडल बाइंडिंग के लिए यह समझ में आता है कि मॉडल से जुड़ने वाले HTML तत्वों के नाम दृश्य मॉडल गुणों के अनुरूप हैं जो पास्कल केस हैं। सादगी के लिए मेरी आईडी रेडियो बटन और चेक बॉक्स को छोड़कर तत्व नामों के समान ही नामकरण सम्मेलन का उपयोग करती हैं जिन्हें नामित इनपुट समूह में प्रत्येक तत्व के लिए अद्वितीय आईडी की आवश्यकता होती है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.