क्या मुझे सबकुछ में कक्षा/आईडी जोड़ने का लक्ष्य रखना चाहिए, या अन्य चयनकर्ताओं का उपयोग करना चाहिए

Question

मुझे कभी भी यह सुनिश्चित नहीं है कि कोई तत्व चुनने का सबसे अच्छा (सबसे कुशल) तरीका क्या है।

चलें कहते हैं कि मैं निम्नलिखित लेआउट (अत्यंत सरल उदाहरण)

<div id="navigation"> 
    <ul> 
    <li>Link 1</li> 
    <li>Link 2</li> 
    <li>Link 3</li> 
    </ul> 
</div> 

1. मैं अपने बिना क्रम वाली सूची का चयन करना चाहते (सुनिश्चित मैं किसी अन्य यूएल के प्रभावित नहीं करते अपनी साइट भर में), मुझे क्या करना चाहिए #navigation ul {} या यूएल को कक्षा असाइन करें?
2. मैं अपनी सूची आइटम चुनना चाहता हूं, फिर भी यह सुनिश्चित करना कि मैं केवल उन पर प्रभाव डालूं। क्या मुझे navigation ul li{} करना चाहिए या कक्षा असाइन करना चाहिए?
3. और आखिरकार, अगर मैं अपना पहला लिंक चुनना चाहता हूं और इसे स्टाइल करना चाहता हूं, तो क्या मुझे #navigation ul li:first-child {} करना चाहिए या कक्षा असाइन करना चाहिए?

मैं इन सवालों की सराहना करता हूं, वे बहुत समान हैं, लेकिन मुझे उत्सुकता है जब आपको कक्षा का उपयोग करना चाहिए और कब नहीं करना चाहिए।

Answer 1

यहां कोई कठोर और तेज़ उत्तर नहीं है।

अंगूठे का एक सामान्य नियम कक्षाओं का उपयोग करना होगा जब आप कुछ तत्वों को एक साथ समूहबद्ध करना चाहते हैं, तो उनका इलाज करें और कक्षा का उपयोग करना ही ऐसा करने का एकमात्र माध्यम है।

उदाहरण के लिए आपके अंतिम उदाहरण में, कक्षा के लिए सख्ती से कोई आवश्यकता नहीं है।

लेकिन, उदाहरण के लिए कक्षा 3 का उपयोग करके बेहतर प्रदर्शन होगा, क्योंकि ब्राउज़र प्रासंगिक वस्तुओं को तेज़ी से स्थापित करेगा। इसके खिलाफ ट्रेडमार्क कोड-लेबिलिटी में मामूली कमी है .. यदि आपके पास सबकुछ पर क्लास नाम हैं तो बाकी मार्कअप को पढ़ना मुश्किल हो जाता है।

संक्षेप में, जो आपने ऊपर दिखाया है, जो आपने लिखा है वह ठीक इमो है।

आपको this आलेख पढ़ना चाहिए, हालांकि चयनकर्ता दक्षता को शामिल किया गया है।

ID, e.g. #header 
Class, e.g. .promo 
Type, e.g. div 
Adjacent sibling, e.g. h2 + p 
Child, e.g. li > ul 
Descendant, e.g. ul a 
Universal, i.e. * 
Attribute, e.g. [type="text"] 
Pseudo-classes/-elements, e.g. a:hover 

वर्गों और ईद के बीच प्रदर्शन अंतर आम तौर पर अप्रासंगिक है:

असल में दक्षता का क्रम इस प्रकार है।

हालांकि सूची में आगे बढ़ना, हालात काफी धीमे हो जाते हैं।

कक्षाओं और आईडी को हर जगह जोड़ने का कोई तर्क नहीं है - यह आपको प्रदर्शन और रखरखाव के बीच व्यापार-बंद का न्याय करने की अनुमति देता है।

Answer 2

#id अद्वितीय होना चाहिए और कक्षा नहीं होनी चाहिए।

इसलिए यदि आपको कुछ जेएस जोड़ने की आवश्यकता है - तो आपको #id की आवश्यकता है, अगर आप केवल अलग-अलग तत्वों को स्टाइल करना चाहते हैं, तो क्लास ठीक है।

Answer 3

मुझे लगता है कि यह वास्तव में इस बात पर निर्भर करता है कि # डेविगेशन तत्व के नीचे संरचना कितनी जटिल होगी। # डेविगेशन तत्व का उपयोग करके सबकुछ संदर्भित करना शायद ठीक है अगर यह एक सरल संरचना है जैसा आपने दिखाया है, लेकिन मेरे लिए यदि यह अधिक जटिल है या अलग-अलग उल होगा, तो ली तत्वों को अलग-अलग व्यवहार की आवश्यकता होगी, तो मैं नेस्टेड आईडी/क्लास तत्वों।

Answer 4

जावास्क्रिप्ट उपयोग के लिए, मुझे लगता है कि मूल चयनकर्ता, और कोई वर्ग या आईडी का उपयोग करने से अधिक तेज़ है।

अधिक जानकारी के लिए, मुझे लगता है कि जटिल सिद्धांत के साथ इस सिद्धांत का परीक्षण (अलग-अलग समय देखने के लिए)।

भूलें कि जावास्क्रिप्ट का तेज़ आपके ब्राउज़र पर निर्भर करता है।

सीएसएस के लिए, अधिक जानकारी के लिए एक अच्छा लेख here है।