CSS चयनकर्ताओं / HTML विशेषताओं के लिए डैश को क्यों पसंद किया जाता है?

213

अतीत में मैंने हमेशा HTML में वर्ग और आईडी विशेषताओं को परिभाषित करने के लिए अंडरस्कोर का उपयोग किया है । पिछले कुछ वर्षों में मैं डैश में बदल गया, ज्यादातर समुदाय में खुद को प्रवृत्ति के साथ संरेखित करने के लिए , जरूरी नहीं कि क्योंकि यह मेरे लिए समझ में आता है।

मैंने हमेशा सोचा है कि डैश में अधिक कमियां हैं, और मुझे इसके लाभ नहीं मिलते हैं:

कोड पूरा करना और संपादन करना

अधिकांश संपादक डैश को शब्द विभाजक के रूप में मानते हैं, इसलिए मैं अपने इच्छित प्रतीक के माध्यम से टैब नहीं कर सकता। कहो कि कक्षा " featured-product" है, मुझे ऑटो-पूर्ण करना है " featured", एक हाइफ़न दर्ज करें, और " product" पूरा करें ।

अंडरस्कोर के साथ " featured_product" एक शब्द के रूप में माना जाता है, इसलिए इसे एक चरण में भरा जा सकता है।

दस्तावेज़ के माध्यम से नेविगेट करने के लिए भी यही बात लागू होती है। शब्दों से कूदना या हाइफ़न द्वारा वर्ग के नामों पर डबल-क्लिक करना।

(आम तौर पर, मैं टोकन के रूप में कक्षाओं और आईडी के बारे में सोचता हूं , इसलिए मेरे लिए यह समझ में नहीं आता है कि टोकन पर आसानी से एक टोकन होना चाहिए।)

अंकगणित ऑपरेटर के साथ अस्पष्टता

डैश का उपयोग जावास्क्रिप्ट में तत्वों को बनाने के लिए ऑब्जेक्ट-प्रॉपर्टी एक्सेस को तोड़ता है । यह केवल अंडरस्कोर के साथ संभव है:

form.first_name.value='Stormageddon';

(निश्चित रूप से मैं स्वयं इस तरह से फार्म तत्वों का उपयोग नहीं करता हूं, लेकिन जब डैश बनाम अंडरस्कोर पर एक सार्वभौमिक नियम के रूप में निर्णय लेते हैं, तो विचार करें कि कोई व्यक्ति हो सकता है।)

Sass जैसी भाषाएँ (विशेषकर कम्पास फ्रेमवर्क में) एक मानक के रूप में डैश पर बस गई हैं, यहां तक कि चर नामों के लिए भी। वे मूल रूप से शुरुआत में अंडरस्कोर का इस्तेमाल करते थे। तथ्य यह है कि यह अलग तरह से पार्स किया जाता है मुझे अजीब लगता है:

$list-item-10
$list-item - 10

भाषाओं में परिवर्तनशील नामकरण के साथ असंगति

दिन में वापस, मैं underscored_namesPHP, रूबी, एचटीएमएल / सीएसएस, और जावास्क्रिप्ट में चर के लिए लिखता था । यह सुविधाजनक और सुसंगत था, लेकिन फिर से "में फिट होने के लिए" अब मैं उपयोग करता हूं:

dash-case HTML / CSS में
camelCase जावास्क्रिप्ट में
underscore_case PHP और रूबी में

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

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

अंतर उन स्थितियों को बनाते हैं जहां हमें अनावश्यक रूप से स्ट्रिंग्स का अनुवाद करना पड़ता है , साथ ही बग्स की क्षमता भी।

तो मैं पूछता हूं: समुदाय लगभग सार्वभौमिक रूप से डैश पर क्यों बस गया, और क्या कोई कारण हैं जो अंडरवॉटर को पछाड़ते हैं?

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

— एंड्रयू विट
स्रोत

50

मैं डैश का उपयोग करता हूं क्योंकि मुझे शिफ्ट कुंजी को हिट करने की आवश्यकता नहीं है।

— जर्द

12

जिज्ञासु यह बंद क्यों था ... क्या इसे बंद करने के लिए वोट थे? मैं इस प्रश्न में राय का आग्रह नहीं कर रहा हूँ। मैंने डैश का उपयोग करने के खिलाफ विशेष कारण दिए, लेकिन हर किसी को इस प्रवृत्ति पर सहमति होने पर उनके लिए अच्छे कारण होने चाहिए। यहाँ कुछ अच्छे उत्तर और अच्छी जानकारी दी गई है। क्या मैं सवाल सुधार सकता हूं?

— एंड्रयू विट

9

मैं अपने प्रश्न को फिर से खोलने के लिए नामांकित कर रहा हूं: नीचे दिए गए सभी उत्तरों में "तथ्य, संदर्भ, या विशिष्ट विशेषज्ञता" शामिल हैं ... इसलिए मैं नहीं देखता कि यह "रचनात्मक नहीं" कैसे था।

— एंड्रयू विट

12

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

— जेक विल्सन

8

@AndrewVit: यह एक बहुत अच्छा सवाल है, अच्छी तरह से प्रारूपित, सूचनात्मक और कई पहलुओं पर प्रकाश डालता है। उसके लिए +1। Btw।, मैं मानता हूं कि इस विषय को "रचनात्मक नहीं" के रूप में बंद करना समझदारी थी । वास्तव में यह रचनात्मक है।

— Sk8erPeter

130

कोड पूरा हो रहा है

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

इसके अलावा, हाइफ़न का उपयोग करने से आप = = विशेषता चयनकर्ता का लाभ उठा सकते हैं , जो पाठ के किसी भी तत्व का चयन करता है, वैकल्पिक रूप से एक डैश के बाद:

span[class|="em"] { font-style: italic; }

यह निम्न HTML तत्वों को इटैलिक फ़ॉन्ट-शैली बना देगा:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

अंकगणित ऑपरेटर के साथ अस्पष्टता

मैं कहूंगा कि जावास्क्रिप्ट में डॉट नोटेशन के माध्यम से HTML तत्वों तक पहुंच एक सुविधा के बजाय एक बग है। यह भयानक जावास्क्रिप्ट कार्यान्वयन के शुरुआती दिनों से एक भयानक निर्माण है और वास्तव में एक महान अभ्यास नहीं है। इन दिनों आपके द्वारा जावास्क्रिप्ट के साथ किए जाने वाले अधिकांश सामानों के लिए, आप वैसे भी DOM से तत्वों को लाने के लिए CSS चयनकर्ताओं का उपयोग करना चाहते हैं , जो पूरे डॉट नोटेशन को बेकार बनाता है। आप किसे पसंद करेंगे?

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

मुझे दो पहले विकल्प बहुत अधिक पसंद हैं, खासकर जब से '#first-name'एक जावास्क्रिप्ट चर के साथ प्रतिस्थापित किया जा सकता है और गतिशील रूप से बनाया गया है। मैं भी उन्हें आँखों पर अधिक सुखद लगता हूँ।

तथ्य यह है कि एसएसएस सीएसएस को अपने एक्सटेंशन में अंकगणित सक्षम करता है, वास्तव में सीएसएस पर ही लागू नहीं होता है, लेकिन मैं इस तथ्य को समझता हूं (और गले लगाता हूं) कि एसएसएस सीएसएस की भाषा शैली का अनुसरण करता है ( $चर के उपसर्ग को छोड़कर , जो निश्चित रूप से होना चाहिए हो गया है @)। यदि Sass दस्तावेज़ों को CSS दस्तावेज़ों की तरह देखना और महसूस करना है, तो उन्हें CSS के समान शैली का पालन करने की आवश्यकता होती है, जो एक सीमांकक के रूप में डैश का उपयोग करता है। CSS3 में, अंकगणित calcफ़ंक्शन तक सीमित है , जो सीएसएस में ही यह दिखाने के लिए जाता है कि यह कोई समस्या नहीं है।

भाषाओं में परिवर्तनशील नामकरण के साथ असंगति

सभी भाषाएँ, मार्कअप लैंग्वेज, प्रोग्रामिंग लैंग्वेज, स्टाइलिंग लैंग्वेज या स्क्रिप्टिंग लैंग्वेज, की अपनी शैली है। यह आपको XML जैसे भाषा समूहों की उप-भाषाओं में मिलेगा, जहाँ उदाहरण के लिए XSLT हाइफ़न डेलिमर के साथ लोअर-केस का उपयोग करता है और XML स्कीमा ऊँट-आवरण का उपयोग करता है।

सामान्य तौर पर, आप पाएंगे कि जिस शैली को आप महसूस कर रहे हैं, उस भाषा को सबसे अधिक "मूल" को अपनाना और अपनी खुद की शैली को हर अलग भाषा में ढालने की कोशिश करने से बेहतर है। चूंकि आप मूल पुस्तकालयों और भाषा निर्माण का उपयोग करने से बच नहीं सकते हैं, आपकी शैली देशी शैली द्वारा "प्रदूषित" हो जाएगी चाहे आप इसे पसंद करें या न करें, इसलिए यह कोशिश करने के लिए बहुत अधिक व्यर्थ है।

मेरी सलाह है कि भाषाओं के बीच एक पसंदीदा शैली न ढूंढें, बल्कि प्रत्येक भाषा के भीतर अपने आप को घर पर बनायें और इसके सभी उद्धरणों से प्यार करना सीखें। CSS 'quirks में से एक यह है कि कीवर्ड और पहचानकर्ता लोअरकेस में लिखे गए हैं और हाइफ़न द्वारा अलग किए गए हैं। निजी तौर पर, मुझे यह बहुत ही आकर्षक लगता है और लगता है कि यह सभी-लोअरकेस (हालांकि नो-हाइफ़न) HTML के साथ फिट बैठता है ।

— असबजोरन उलसबर्ग
स्रोत

4

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

— एंड्रयू विट

13

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

— एंड्रयू विट

1

@AndrewVit, CLI आधारित संपादक हैं जहां डबल-क्लिकिंग प्रासंगिक नहीं है (क्योंकि आमतौर पर कोई माउस नहीं है) और इसे इस तरह के व्यवहार के लिए कॉन्फ़िगर किया जा सकता है। लेकिन सामान्य तौर पर, आप सही हैं। |=विशेषता चयनकर्ता के लिए विशेष रूप से बना है langविशेषता है, लेकिन इसके उपयोग बढ़ाया जा सकता है। मैंने अपने सीएसएस में हमेशा हाइफ़न का उपयोग किया है, इसलिए मैं आम जनता के लिए नहीं बोल सकता, लेकिन पास्कल केस, ऊँट केस और अंडरस्कोर से हाइफ़ंड की ओर एक अभिसरण ज़रूर हुआ है। |=चयनकर्ता और परिसीमक के रूप में हाइफन जहाँ तक मैं, असंबंधित बता सकते हैं, हालांकि कर रहे हैं।

— Asbjørn Ulsberg

3

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

— विवेक

2

@ KamilKiełczewski यह उपयोगी है, लेकिन यह थोड़ा अलग तरीके से काम करता है।

— gcampbell

68

शायद एक महत्वपूर्ण कारण है कि HTML / CSS समुदाय ने अंडरस्कोर के बजाय डैश के साथ खुद को संरेखित किया है, जो ऐनक और ब्राउज़र कार्यान्वयन में ऐतिहासिक कमियों के कारण है।

मार्च 2001 से प्रकाशित मोज़िला डॉक से @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

CSS1 विनिर्देश, 1996 में अपने अंतिम रूप में प्रकाशित हुआ, जब तक कि वे "बच गए" तब तक वर्ग और आईडी नामों में अंडरस्कोर के उपयोग की अनुमति नहीं दी। एक बच गए अंडरस्कोर कुछ इस तरह दिखेंगे:
    p.urgent\_note {color: maroon;}
यह उस समय ब्राउज़र द्वारा अच्छी तरह से समर्थित नहीं था, हालांकि, और अभ्यास कभी नहीं पकड़ा गया। CSS2, 1998 में प्रकाशित, वर्ग और आईडी नामों में अंडरस्कोर के उपयोग को भी मना किया। हालाँकि, 2001 की शुरुआत में प्रकाशित विनिर्देश के लिए इरेटा ने पहली बार अंडरस्कोर को कानूनी बना दिया। यह दुर्भाग्य से एक पहले से ही जटिल परिदृश्य को जटिल करता है।

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

— user193130
स्रोत

6

धन्यवाद! मुझे इस तरह के एक सम्मेलन की 'व्युत्पत्ति' का पता लगाना पसंद है। यह मुझे इस सम्मेलन का उपयोग करने के लिए याद रखने में मदद करता है क्योंकि मैं इसके साथ भाषा को जोड़ सकता हूं। संघ होने के परिणामस्वरूप मुझे अपने अवचेतन को अधिवेशन का उपयोग करने में मदद मिलती है।

— एपे-इनैगो

39

मुझे नहीं लगता कि कोई भी इसका उत्तर निश्चित रूप से दे सकता है, लेकिन यहां मेरे शिक्षित अनुमान हैं:

अंडरस्कोर को शिफ्ट कुंजी को मारने की आवश्यकता होती है, और इसलिए टाइप करना कठिन होता है।
सीएसएस चयनकर्ता जो आधिकारिक सीएसएस विशिष्टताओं का हिस्सा हैं, डैश (जैसे कि छद्म वर्ग जैसे: पहले-बच्चे और छद्म तत्व: पहली पंक्ति) का उपयोग करते हैं, अंडरस्कोर नहीं। गुणों के लिए एक ही बात, जैसे पाठ-सजावट, पृष्ठभूमि-रंग, आदि। प्रोग्रामर आदत के प्राणी हैं। यह समझ में आता है कि अगर कोई अच्छा कारण नहीं है तो वे मानक शैली का पालन करेंगे।
यह आगे की ओर बढ़ा हुआ है, लेकिन ... चाहे वह मिथक हो या तथ्य, एक पुराना विचार है कि Google एक शब्द के रूप में अंडरस्कोर द्वारा अलग किए गए शब्दों को मानता है, और डैश को अलग-अलग शब्दों के रूप में अलग किए गए शब्द। (मैट कट्स अंडरस्कोर बनाम डैश पर।) इस कारण से, मुझे पता है कि पेज URL बनाने के लिए मेरी प्राथमिकता अब शब्दों-शब्दों के साथ उपयोग करना है, और मेरे लिए कम से कम, यह अन्य चीजों के लिए मेरे नामकरण सम्मेलनों में धब्बा है। , सीएसएस चयनकर्ताओं की तरह।

— मेसन जी
स्रोत

2

URL में डैश के संबंध में और अर्थ मार्कअप के लिए एसईओ के बारे में अच्छी बात (यह वास्तव में सच है या नहीं) ... क्या आप स्पष्ट कर सकते हैं कि "सीएसएस चयनकर्ता जो आधिकारिक सीएसएस विनिर्देशों का हिस्सा हैं डैश का उपयोग करते हैं"?

— एंड्रयू विट

मैंने कुछ उदाहरण देने के लिए अपने उत्तर में बिंदु 2 पर विस्तार किया, हालांकि मैं "चयनकर्ताओं" के बजाय पाठ-सजावट जैसे सीएसएस गुणों के बारे में अधिक सोच रहा था, इसलिए यह कुछ हद तक एक टाइपो था, हालांकि कुछ चयनकर्ता हैं जो, जैसा कि करते हैं ऊपर नोट किया हुआ।

— मेसन जी। ज़्विती

1

धन्यवाद @ अल्बर्ट, जो अपने आप में एक अच्छा जवाब देगा ... कम से कम ऐतिहासिक संदर्भ के लिए। मुझे नहीं पता था कि मूल कल्पना अंडरस्कोर की अनुमति नहीं थी! (लेकिन इसका कोई मतलब नहीं है कि उन्हें क्यों छोड़ दिया जाना चाहिए।)

— एंड्रयू विट

4

बिंदु # 2 ने मुझे आश्वस्त किया, विशेष रूप से पृष्ठभूमि-रंग, पाठ-सजावट, आदि जैसे गुण दिए गए

— बिग मैक्लेरजैग

2

FYI करें उत्सुक के लिए, डेवएज-अस्थायी यूआरएल में @ (ऊपर अल्बर्ट की टिप्पणी संदर्भित devedge-temp.mozilla.org/viewsource/2001/css-underscores ) में है developer.mozilla.org/en-US/docs/...

— अपोंज़नी

14

कई कारण हैं, लेकिन सबसे महत्वपूर्ण चीज में से एक है स्थिरता बनाए रखना ।

मुझे लगता है कि यह लेख इसे बड़े पैमाने पर समझाता है।

CSS एक हाइफ़न-सीमांकित सिंटैक्स है। इस से मेरा मतलब है हम जैसी चीजों के बारे में font-size, line-height, border-bottomआदि

इसलिए:

आपको सिंटैक्स नहीं मिलाना चाहिए: यह असंगत है ।

— simhumileco
स्रोत

11

हाल के वर्षों में URL के हाइफ़न-अलग, पूरे-शब्द सेगमेंट में एक स्पष्ट वृद्धि हुई है। यह एसईओ सर्वोत्तम प्रथाओं द्वारा प्रोत्साहित किया जाता है। Google स्पष्ट रूप से "अनुशंसा करता है कि आप अपने URL में अंडरस्कोर (_) के बजाय हाइफ़न (-) का उपयोग करें": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 ।

जैसा कि उल्लेख किया गया है, विभिन्न संदर्भों में अलग-अलग समय पर अलग-अलग परंपराएं प्रबल हुई हैं, लेकिन वे आम तौर पर किसी भी प्रोटोकॉल या ढांचे का औपचारिक हिस्सा नहीं हैं।

मेरी परिकल्पना, तब यह है कि Google की स्थिति इस पैटर्न को एक प्रमुख संदर्भ (SEO) के भीतर एंकर करती है, और क्लास, आईडी और विशेषता नामों में इस पैटर्न का उपयोग करने की प्रवृत्ति बस इस सामान्य दिशा में धीरे-धीरे बढ़ने वाला झुंड है।

— Faust
स्रोत

5

मुझे लगता है कि यह एक प्रोग्रामर पर निर्भर बात है। किसी को डैश का उपयोग करना पसंद है, तो अन्य अंडरस्कोर का उपयोग करते हैं।
मैं व्यक्तिगत रूप से अंडरस्कोर ( _) का उपयोग करता हूं क्योंकि मैं इसे अन्य स्थानों पर भी उपयोग करता हूं। जैसे:
- जावास्क्रिप्ट चर ( var my_name);
- मेरे नियंत्रक कार्य ( public function view_detail)
एक और कारण जो मैं अंडरस्कोर का उपयोग करता हूं, वह यह है कि ज्यादातर आईडीई में अंडरस्कोर द्वारा अलग किए गए दो शब्दों को 1 शब्द माना जाता है। (और double_click के साथ चयन करना संभव है)।

— अली फरहौदी
स्रोत