CSS Selector Strategy: (Prefix using a parent class: .widget .widget-item {}) or (Directly: .widget-item {}) -

इस सवाल का पहले से ही एक उत्तर है: < 8 उत्तरों

यहाँ एक बहुत ही आम स्थिति है। मान लें कि हमारे पास कुछ मार्कअप है:

  & lt; div class = "widget" & gt; & Lt; div वर्ग = "विजेट-आइटम" & gt; & lt; / div & gt; & Lt; / div & gt;   
 हम 2 विकल्प के साथ  .widget-item  शैली कर सकते हैं:  
  विकल्प 1: पैरेंट क्लास का उपयोग कर प्रीफ़िक्स   
 मजबूत>  
  .widget .widget-item {/ * शैलियां} /   
  विकल्प 2: सीधे क्लास तक पहुंच   
  .widget-item {/ * शैलियाँ} /   
 
 क्या कोई भी महत्वपूर्ण प्रदर्शन लाभ / उपसर्ग के हिट हैं?  
 अगर मुझे एक और कंटेनर में कक्षा का पुन: उपयोग करने की आवश्यकता नहीं है, तो  .other .widget-item  कहें, क्या उपसर्ग के लिए कोई वास्तविक लाभ है? (ज्यादातर समय, मुझे माता-पिता के बाहर कक्षा का पुन: उपयोग करने की ज़रूरत नहीं होगी, इसलिए कोई फ़र्क नहीं पड़ता है?)  
 मैं खुद को इन गहरी चयनकर्ताओं का इस्तेमाल कर रहा हूं, जब मुझे शायद नहीं चाहिए?  
 यह आदमी कहता है कि आपको गहरा घोंसला होना चाहिए:  
 यह आदमी कहता है कि आपको उन्हें सरल, अनावश्यक रखना चाहिए:  
 मुझे माफ़ कर दो अगर यह एक डुप्लिकेट है, एक को खोजने के लिए प्रतीत होता है।   
 
 
 यह जांचें मैं जितनी बार मैं कर सकता हूँ उतनी गहरी झंझरी से बचने के लिए, क्योंकि यह आपकी शैलियों को वास्तव में भंगुर बना देता है रखरखाव के पहलू से, सरल  .widget  वर्ग चयनकर्ता सड़क को ठीक करने और बदलने के लिए आसान है।  
 प्रदर्शन-वार, मुझे लगता है कि @ सही है। ब्राउज़र के लिए छोटा चयनकर्ता चेन कम काम हैं।