नाम "वर्ग" और "आईडी" HTML विशेषताएँ - डैश बनाम रेखांकित [बंद]

113

बंद हो गया । यह सवाल राय आधारित है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? प्रश्न को अपडेट करें ताकि इस पोस्ट को संपादित करके तथ्यों और उद्धरणों के साथ उत्तर दिया जा सके ।

5 साल पहले बंद हुआ ।

इस प्रश्न को सुधारें

<div id="example-value">या <div id="example_value">?

यह साइट और ट्विटर पहली शैली का उपयोग करते हैं। फेसबुक और वीमो - दूसरा।

आप किसका उपयोग करते हैं और क्यों?

html coding-style naming-conventions

— एमानुएल रूसेव
स्रोत

11

वे दोनों लिंक अब टूट गए हैं

— स्टीव

135

अपने HTML और जावास्क्रिप्ट के बीच अलगाव सुनिश्चित करने के लिए Hyphens का उपयोग करें।

क्यों? निचे देखो।

हाइफ़न CSS और HTML में उपयोग करने के लिए मान्य हैं, लेकिन जावास्क्रिप्ट ऑब्जेक्ट्स के लिए नहीं।

बहुत सारे ब्राउज़र HTML Ids को विंडो / डॉक्यूमेंट ऑब्जेक्ट पर वैश्विक ऑब्जेक्ट के रूप में पंजीकृत करते हैं, बड़ी परियोजनाओं में, यह एक वास्तविक दर्द बन सकता है।

इस कारण से, मैं हाइफ़न के साथ नामों का उपयोग करता हूं इस तरह से HTML आईडी मेरे जावास्क्रिप्ट के साथ कभी भी संघर्ष नहीं करेंगे।

निम्नलिखित को धयान मे रखते हुए:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

एचटीएमएल

<body>
    <span id='message'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message'));
        objectContainer.messageClass.write('loaded');
    }
</script>

यदि ब्राउज़र HTML आईडी को पंजीकृत करता है तो वैश्विक ऑब्जेक्ट के रूप में उपरोक्त विफल हो जाएगा क्योंकि संदेश 'अपरिभाषित' नहीं है और यह HTML ऑब्जेक्ट का एक उदाहरण बनाने की कोशिश करेगा। यह सुनिश्चित करके कि HTML आईडी में नाम में एक हाइफ़न है, नीचे दिए गए जैसे संघर्षों को रोकता है:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

एचटीएमएल

<body>
    <span id='message-text'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message-text'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message-text'));
        objectContainer.messageClass.write('loaded');
    }
</script>

बेशक, आप messageText या message_text का उपयोग कर सकते हैं, लेकिन इससे समस्या का समाधान नहीं होता है और आप बाद में उसी समस्या में भाग सकते हैं, जहाँ आप गलती से एक जावास्क्रिप्ट ऑब्जेक्ट के बजाय HTML ऑब्जेक्ट का उपयोग कर सकते हैं

एक टिप्पणी, आप अभी भी (उदाहरण के लिए) विंडो ऑब्जेक्ट का उपयोग करके विंडो ऑब्जेक्ट्स का उपयोग कर सकते हैं (उदाहरण के लिए) 'संदेश-पाठ'];

— Raatje
स्रोत

मुझे यहाँ आपके पोस्ट के बारे में कुछ समझ नहीं आ रहा है, शायद आप स्पष्ट कर सकते हैं। तो आप कहते हैं कि कुछ ब्राउज़र HTML आईडी को वैश्विक ऑब्जेक्ट के रूप में पंजीकृत करते हैं और यदि आप आईडी में एक हाइफ़न डालते हैं, तो आप गारंटी देंगे कि इन ऑटो-जेनरेट की गई वस्तुओं और आपके द्वारा बनाए गए लोगों के बीच कोई संघर्ष नहीं होगा क्योंकि हाइफ़न की अनुमति नहीं है । लेकिन फिर कैसे ब्राउज़र इन हाइफ़न वस्तुओं को बनाता है यदि हाइफ़न की अनुमति नहीं है? ऐसा लगता है कि यह उन्हें अलग करना होगा, इस प्रकार आपको नामकरण संघर्ष की क्षमता के साथ छोड़ना होगा।

— डलास कैले

@ डलास कैली अगर आपने नहीं देखा, तो यह जवाब अपडेट कॉलिंग आउट थाwindow['message-text'];

— क्रिस मैरिसिक

आह, मुझे लगता है कि मैं समझ गया। अजीब बात है कि जावास्क्रिप्ट आपको स्टैंड-अलोन ऑब्जेक्ट के रूप में नाम में डैश के साथ एक ऑब्जेक्ट बनाने की अनुमति नहीं देता है, लेकिन यह आपको नाम में एक डैश के साथ ऑब्जेक्ट बनाने की अनुमति देगा यदि इसे किसी अन्य ऑब्जेक्ट की संपत्ति के रूप में बनाया जाता है इसके नाम में पानी का छींटा नहीं है।

— डलास कैली

इस पोस्ट ने वास्तव में मुझे मूर्खतापूर्ण स्थिति से आपके साथ लगभग 100% समझौते में अपनी स्थिति पर फिर से विचार करने के लिए प्रेरित किया, मेरे एकमात्र आरक्षण को इस मुद्दे पर आपकी स्थिति दी गई है जिससे यह स्पष्ट होता है कि हर आईडी में एक - इसे रोकने के लिए होना चाहिए एक ही मुद्दा जब तक आप विशेष रूप से यह कुछ विशेष आईडी के लिए काम करना चाहते हैं।

— user254694

87

मैं Google HTML / CSS स्टाइल गाइड की सिफारिश करूंगा

यह विशेष रूप से बताता है :

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

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}

— क्लास मेलबर्न
स्रोत

1

BEMसंकेतन के बारे में क्या ?

— इलियन ओनोफ्रेई जूल

1

@IulianOnofrei आप बेशक बीईएम का उपयोग करने के लिए स्वतंत्र हैं, लेकिन यह स्पष्ट रूप से Google स्टाइल गाइड का कड़ाई से पालन नहीं करता है।

— क्लस मेलबोरन

हम्म, बहुत अजीब है। Google का GWT फ्रेमवर्क कैमलकेस का उपयोग करता है। इस कोड की कोड की जाँच करें <h1 id = "appTitle"> </ h1> निम्न मुद्राओं में। gwtproject.org/doc/latest/tutorial/i18n.html

— karlihnos

4

Google! = स्वचालित रूप से सही। वे अक्सर होते हैं, लेकिन सिर्फ Google का होना ही एक औचित्य नहीं है।

— क्रेग ब्रेट

2

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

— तम्मम्म्

5

यह वास्तव में वरीयता के लिए नीचे आता है, लेकिन एक विशेष दिशा में आपको जो बोलना होगा वह वह संपादक हो सकता है जिसके साथ आप कोड करते हैं। उदाहरण के लिए, TextMate की ऑटो-पूर्ण सुविधा एक हाइफ़न पर रुकती है, लेकिन एक एकल शब्द के रूप में अंडरस्कोर द्वारा अलग किए गए शब्दों को देखता है। इसलिए अपने ऑटो-पूर्ण सुविधा ( ) का उपयोग the_postकरने से बेहतर काम के साथ वर्ग के नाम और आईडी ।the-postEsc

— डग नेिनर
स्रोत

आप सही हैं, लेकिन यह आसपास के "html जंगल" में ज्यादा

— गन्दा लगेगा

4

मेरा मानना है कि यह पूरी तरह से प्रोग्रामर पर निर्भर है। आप चाहें तो कैमलकेस का उपयोग भी कर सकते हैं (लेकिन मुझे लगता है कि यह बहुत अजीब लगेगा।)

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

— adamse
स्रोत

3

यह प्रश्न समान है और इस उत्तर को सत्यापित करता है stackoverflow.com/questions/70579/…

— मैट स्मिथ

2

या तो उदाहरण पूरी तरह से मान्य है, आप मिश्रण में भी फेंक सकते हैं ":" या "।" w3c कल्पना के अनुसार विभाजक के रूप में । मैं व्यक्तिगत रूप से "_" का उपयोग करता हूं अगर यह अंतरिक्ष के लिए समानता के कारण सिर्फ दो शब्द का नाम है।

— माइल्स
स्रोत

14

हां, आप Ids के लिए कॉलन और पीरियड्स का उपयोग कर सकते हैं, लेकिन यह एक अच्छा तरीका है कि आप सीएसएस फाइल लिखने वाले व्यक्ति से नफरत करें।

— डेव मार्कले

5

एक HTML पहचानकर्ता ZZ:ZZको ZZ\00003AZZ(CSS2 और ऊपर) के रूप में बचना होगा।

— मैकडॉवेल

1

मैंने यह नहीं कहा कि यह अच्छा अभ्यास था, मैंने कहा कि यह मान्य था।

— मायल्स

5

JQuery विस्फोट करने के लिए एक मजेदार तरीके की तरह लगता है

— माइक रॉबिन्सन

0

मैं पहले एक (एक-दो) का उपयोग करता हूं क्योंकि इसकी अधिक पठनीय है। छवियों के लिए हालांकि मैं अंडरस्कोर (btn_more.png) को पसंद करता हूं। कैमल केस (oneTwo) एक और विकल्प है।

— eozzy
स्रोत

0

वास्तव में कुछ बाहरी चौखटे (जावास्क्रिप्ट, php) में आईडी नामों में हाइपेन का उपयोग करने के साथ कठिनाइयाँ (बग?) हैं। मैं अंडरस्कोर (इसलिए 960grid) का उपयोग करता हूं और सभी बढ़िया काम करते हैं।

— DavidHavl
स्रोत

3

कौन सा? वैसे भी, कोड-पठनीयता अधिक महत्वपूर्ण बात है।

— कामिल तोमिक

-1

मैं मुख्य रूप से एक जावास्क्रिप्ट साइड-इफेक्ट का सामना कर रहा हूं, जिसके कारण मैं अंडरस्कोर का सुझाव दूंगा।

यदि आप नीचे दिए गए कोड को अपने स्थान बार में लिखते हैं, तो आपको एक त्रुटि मिलेगी: 'उदाहरण-मूल्य' अपरिभाषित है। यदि अंडरस्कोर के साथ डिव नाम दिया गया था, तो यह काम करेगा।

javascript:alert(example-value.currentStyle.hasLayout);

— jgreep
स्रोत

5

वह होना चाहिए document.getElementById("example-value"), जो ठीक काम करेगा।

— १।

Html सहायक कार्यों के HtmlAttributes पैरामीटर में एक विशेषता के लिए एक मूल्य निर्दिष्ट करते समय मुझे ASP.NET MVC के साथ एक समान समस्या हो रही है।

— मथिज्स वेसल्स