2009-10-29 8 views
15

मैं यह पता लगाने की कोशिश कर रहा हूं कि सीएसएस कक्षाओं और आईडी, विशेष रूप से एकाधिक शब्द नामों का नामकरण और आवरण के लिए सबसे अच्छा अभ्यास क्या है।बहु-शब्द सीएसएस वर्गों और आईडी के नामकरण और आवरण के लिए सबसे अच्छा अभ्यास क्या है?

तो उदाहरण के लिए, मेरे पास <div> है जिसे मैं "चरित्र कौशल" नाम देना चाहता हूं। ऐसा लगता है कि 3 विकल्प हैं: "अक्षरकिल्स", "character_skills", या "चरित्र-कौशल"।

इनमें से कौन सा सीएसएस कक्षाओं और आईडी के नाम के लिए उद्योग मानक है?

सीएसएस नामों में एकाधिक शब्दों को विभाजित करने के लिए सबसे अच्छा अभ्यास क्या है?

सीएसएस नामों के लिए हमेशा सभी लोअरकेस का उपयोग करने का यह सबसे अच्छा अभ्यास है, क्योंकि वे केस-असंवेदनशील हैं?

उत्तर

16

मैं भी हाइफेनेटेड शैली का उपयोग करता हूं। मैं मुख्य रूप से उस शैली का उपयोग करता हूं क्योंकि सीएसएस गुण एक ही आवरण का पालन करते हैं। इसी प्रकार, जावास्क्रिप्ट फ़ंक्शन और वेरिएबल कम ऊंट केस का उपयोग करते हैं। उदाहरण के लिए, जावास्क्रिप्ट में एक सीएसएस संपत्ति को बदलने के लिए, आप object.style.textDecoration टाइप करेंगे, लेकिन सीएसएस में, उस संपत्ति को text-decoration के साथ बदल दिया जाएगा।

3

मैं व्यक्तिगत रूप से हाइफेनेटेड शैली का उपयोग करता हूं (यानी some-class) लेकिन आपको बस यह चुनना चाहिए कि आप क्या महसूस करते हैं और लगातार बने रहें। यह पूरी तरह से सौंदर्यशास्त्र का मुद्दा है।

characterSkills, CharacterSkills

लेकिन दिन यह कोई बात नहीं जो शैली आप लेने के अंत में,:

+4

मुझे खेद है कि मुझे आपके उत्तर को अचयनित करना पड़ा, क्योंकि मुझे विश्वास नहीं था कि यह पूरी तरह से सौंदर्यशास्त्र का मुद्दा है। जब लोग सामान्य शैलियों को अपनाते हैं, तो कोड अधिक पठनीय हो जाता है और इस प्रकार अधिक मूल्यवान होता है। –

2

मैं निम्नलिखित आवरण शैलियों एक बहुत देखते हैं। बस अपने ऐप के भीतर सुसंगत रहें।

0

मैंने इस प्रश्न के कई अलग-अलग उत्तर देखे हैं, जो आप पूछते हैं इसके आधार पर। आपके द्वारा वर्णित सभी संभावनाओं और शायद अधिक के माध्यम से। जिसे मैं अक्सर संदर्भित करता हूं, हालांकि अंडरस्कोर (character_skills) और सभी लोअरकेस का उपयोग करना है।

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

0

मैं UpperCamel कक्षाओं के लिए lowerCamelCase उपयोग करें, और आईडी के लिए है, तो जैसे:

 
#HeaderLogo { ... } 
.pullQuote { ... } 

लेकिन यह वास्तव में इतने लंबे समय आप लगातार कर रहे हैं के रूप में :) ओह बिल्कुल कोई फर्क नहीं पड़ता, और एक- पर कायम करने की कोशिश शब्द वर्ग के नाम जहां संभव - आप हमेशा वर्गों को जोड़ सकते हैं, तो जैसे:

 
.boxout { border: 1px solid; padding: 10px; } 
.emphasised { font-weight: bold; } 
.subtle { font-size: small; } 

.boxout.emphasised { background: yellow; } 
.boxout.subtle { color: gray; } 

... जो मैं पसंद करते हैं, जैसा कि आप अपने "आधार" कक्षाएं, कोर परिभाषाओं पकड़ अपने सीएसएस रखने छोटे, और कम करने में हो सकता है पृष्ठों को डिजाइन करते समय आपको याद रखने के लिए कक्षाओं की कुल संख्या।

5

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

क्यों? क्योंकि हर दूसरी भाषा में अतिसंवेदनशील चर नाम नहीं हो सकते हैं। उदाहरण के लिए, आपका आईडीई ऑटो-पूर्णता ठीक से उठा सकता है या नहीं।(मेरा आईडीई नहीं कर सकता है, यह छठी है: पी)

सीएसएस जावास्क्रिप्ट से निकटता से संबंधित है, हाइफेनेटेड क्लासनाम भी जावास्क्रिप्ट के साथ इंटरऑप करना मुश्किल बनाता है। पर विचार करें निम्नलिखित (काल्पनिक) jQuery:

// For each of the following class, perform a function 
var funcs = 
{ 
    main: function(){ /* ... */}, 
    toolbar: function(){ /* ... */ }, 

    // Oops, need to use a quote because there's this hyphenated name 
    'customer-info': function(){ /* ... */ } 
}; 

// Woot, a O(n^2) function 
for(var className in funcs) 
{ 
    var func = funcs[className]; 
    // maybe if we named it $('#some-selector')? The hyphen suddenly feels 
    // like some kind of operator to me. Makes me nervous :/ 
    $('#SomeSelector div').each(function() 
    { 
     if($(this).hasClass(className)) func(); 
    }); 
} 

वहाँ हाइफन व्यक्तिपरक सौंदर्यशास्त्र के अलावा अन्य शैली का उपयोग करने के लिए कोई स्पष्ट लाभ है। नुकसान यह है कि यह हर दूसरे प्रोग्रामिंग भाषा से बाहर खड़ा है (ठीक है, सीएसएस प्रोग्रामिंग भाषा नहीं हो सकता है, ओह ठीक है ..) और यह तकनीकी रूप से गलत है।

अंतरिक्ष का प्रतिनिधित्व करने के लिए सही (हुह?) तरीका अंडरस्कोर है। इस वाक्यांश पर विचार करें "एक स्व-संबोधित पत्र," मैं रिक्त स्थान कैसे परिवर्तित कर सकता हूं?

  • a_self-addressed_letter
  • एक-आत्म संबोधित अक्षर (आउच! अगर हम इसे वापस कन्वर्ट करने पर हम पाते "एक आत्म पत्र संबोधित"!)
(सही, मूल अर्थ को बरकरार रखता है)

सीएसएस नामों के लिए हमेशा सभी लोअरकेस का उपयोग करने का यह सबसे अच्छा अभ्यास है, क्योंकि वे केस-असंवेदनशील हैं?

मुझे लगता है कि इस मामले में, यह हमेशा पास्कलकेसिंग का उपयोग करने का सबसे अच्छा अभ्यास है क्योंकि यह पठनीयता का समर्थन करता है।

+0

दिलचस्प उत्तर, कुछ विचार करने के लिए। मेरे पास एक मामूली आलोचना है, हालांकि, जेएसन को सिंटैक्टिक रूप से सही करने के लिए हमेशा बाईं तरफ उद्धरण (सिंगल या डबल) में एक स्ट्रिंग का उपयोग करना होता है, हालांकि इस वाक्यविन्यास का शायद ही कभी अजीब जेसन की व्याख्या करने के लिए अधिकांश जेसन पार्सर्स की क्षमता के कारण पालन किया जाता है। इसलिए, जेसन के ऊपर आपकी टिप्पणी: "// ओह, एक उद्धरण का उपयोग करने की आवश्यकता है क्योंकि यह हाइफेनेटेड नाम है", संदिग्ध मूल्य है। एक दिलचस्प दृष्टिकोण देखने के लिए +1। –

+0

हां, मुझे पता है कि तकनीकी रूप से जेएसओएन कुंजी हमेशा उद्धृत की जानी चाहिए, मैं अपने पॉइंट को लाने के लिए एक बेहतर वास्तविक जीवन उदाहरण के साथ नहीं आ सकता था: पी विचार यह था कि सभी मानक परिवर्तनीय नामों में हाइफ़न नहीं हैं । – kizzx2

+0

इस पर नकारात्मक गिरावट क्योंकि "हर दूसरी भाषा में अतिसंवेदनशील चर नाम नहीं हो सकते हैं" लिस्प को भूल जाता है। – pkh

0

उदाहरण पढ़ने और मेरी अपनी गलतियों के बाद, मैं खुद के लिए इस समाधान पर उतरा: पदानुक्रम दिखाने के लिए

  1. उपयोग हाइफ़न उदा #products-MainContent {} या #maincontent-Summary {}। मेरे लिए इसका मतलब है कि मेनकंटेंट उत्पाद div का एक बच्चा है।
  2. आईडी के लिए विरासत में पहले तत्व के बाद प्रत्येक शब्द को कैपिटल करें। कक्षाओं के लिए सभी लोअरकेस का प्रयोग करें उदा। #summary-Statistics (आईडी) या .summary-statistics (कक्षा)

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

संबंधित मुद्दे

 संबंधित मुद्दे