सीएसएस में बेहतर क्या है: div.something या just .sethingething

Question

सीएसएस में, जब एक div (उदाहरण के लिए) पर शैली सेट करते हैं तो मिलान के लिए इसे अधिक सटीक देने के अलावा 'div' सहित कोई लाभ होता है। ब्राउज़र के लिए शायद यह तेजी से प्रस्तुत करना तेज है?

यानी है:

div.something { font-size: 1em; } 

केवल divs करने के लिए इसे नीचे संकीर्ण करने के लिए की तुलना में किसी अन्य कारण से की तुलना में

.something { font-size: 1em; } 

बेहतर है?

(कारण मैं पूछ है कि मैं हाल ही में एक प्रमुख साइट है कि 'div के शामिल पार हुआ लेकिन सबसे परेशान नहीं करते हैं)

अद्यतन:

सभी प्रश्नों के उत्तर के लिए धन्यवाद। निष्कर्ष यह है कि गति एक कारक है लेकिन ध्यान देने योग्य नहीं है। और सर्वोत्तम अभ्यास पर सर्वसम्मति यह है कि टैग सहित क्लीनर है - सामान्य नियम सीएसएस को आवश्यक शैली के लिए जितना संभव हो उतना 'तंग' रखना चाहिए।

Answer 1

दोनों चयनकर्ताओं के विभिन्न अर्थ विज्ञान के अलावा, इस पढ़ें: Speed of CSS

Answer 2

ठीक है अगर आप एक ही कक्षा के नाम के साथ अन्य टैग करना चाहते हैं तो एक और उपस्थिति है तो यह करना एक अच्छा विचार हो सकता है।

मैं हमेशा बेहतर पठनीयता के लिए टैग नाम शामिल करता हूं और मुझे यकीन है कि यदि वे कक्षा नाम साझा करते हैं तो मैं अन्य नियमों को ओवरराइड नहीं करूँगा।

Answer 3

ठीक है मुझे लगता है कि एकमात्र उद्देश्य यह है कि "इसे केवल divs तक सीमित करने के लिए" कहा जाता है। तो <p class="something"> को div के रूप में व्यवहार करना चाहिए या नहीं ...

Answer 4

मुझे लगता है कि यह समस्या स्कोप सीमा की आम तौर पर जाने-माने प्रोग्रामिंग अवधारणा के समान ही है: आप अपने चर और अन्य संसाधनों के दायरे को न्यूनतम तक सीमित करते हैं ।

इसी तरह, यदि आप जानते हैं कि एक शैली का उपयोग केवल उस वर्ग के साथ divs के साथ किया जाएगा, तो यह "वर्ग के दायरे" को विभाजित करने के लिए समझ में आता है। यह कम गड़बड़ करता है और आपकी स्टाइलशीट को कुछ हद तक अधिक बनाए रखने योग्य बनाता है।

Answer 5

आप अधिक से अधिक सिर्फ divs पर एक वर्ग उपयोग करना चाहते हैं, तो आप सिर्फ तरह

.something{} 

लेकिन सामान्य वर्ग का उपयोग कर सकते हैं अधिक विशिष्ट एक वर्ग है, और अधिक महत्वपूर्ण यह आदेश की परवाह किए बिना है, अर्थात:

#someID div.something { background: green; } 
div.something { background: blue;} 
.something { background: red; } 

के बाद से पहले एक सबसे विशिष्ट है:

<div class="something"> this will be blue </div> 
<div id="someID"> 
    <div class="something"> 
    this will be green 
    </div> 
</div> 
<p class="something">this will be red</div> 

Answer 6

चयनकर्ता की शुरुआत में div जोड़ना सीएसएस नियम और एचटीएमएल दस्तावेज़ के बीच अतिरिक्त निर्भरता बनाता है। तत्व प्रकार को अचानक बदलना भी आवश्यक है कि आप किसी भी अच्छे कारण के लिए सीएसएस को बदल दें।

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

असीमित निर्भरताओं से बचें।

कम विशिष्टता सीएसएस नियम एक समस्या है, लेकिन तत्व-प्रकार जोड़ना समाधान नहीं है। अगर मेरा .price div.price में बदल दिया गया था, तो अनपेक्षित मैचों की संभावना केवल मामूली कम हो गई है। आप बाहरी # आईडी के साथ इसे नाम देने से बेहतर होगा।

Answer 7

नियम के तत्व चयनकर्ता (div) जोड़ना शासन के specificity बढ़ जाती है, एक सामान्य वर्ग चयनकर्ता (.something)

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

ऊपर बताए अनुसार, तत्व नामों का उपयोग करके एक गति व्यापार बंद है, लेकिन यह शायद ही ध्यान देने योग्य है।

Answer 8

कक्षाओं को अच्छी तरह से संरचित, कार्यात्मक और परमाणु होना चाहिए। कभी कभी यह element.name के लिए नीचे संकीर्ण करने के लिए अच्छा है अगर आपको लगता है कि आप की तरह

div.highlight { 
    background: #FF00FF; 
} 

span.highlight, p.highlight { 
    color: #FF00FF; 
} 

अन्यथा स्थितियों होगा आप की तरह

.highlight { 
    color: #FF00FF; 
} 

div.highlight { 
    background; #FF00FF; 
    color: inherit; 
} 

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

तुम भी बाहर काम करने की तरह

div#main div.section h1.title span.link { } 

अपने चयनकर्ताओं पर इस तरह के संरचनात्मक निर्भरता से बचने के लिए जब, होगा लेकिन यह सिर्फ लिखने के लिए

div#main span.link {} 

Answer 9

यह नहीं होगा बेहतर होगा जब तक आप कक्षा something कक्षा का पुन: उपयोग नहीं करते हैं, तब तक एक फर्क पड़ता है, और निश्चित रूप से आपके पास कोई संघर्ष नहीं है जिसे सीएसएस प्राथमिकता स्कीमा का उपयोग करके हल किया जाना चाहिए। यदि ऐसा है, div.something की उच्च प्राथमिकता है कि .something क्योंकि यह अधिक विशिष्ट है। CSS2 Specification से Calculating a selector's specificity पर एक नज़र डालें।