क्या प्रदर्शन के लिए महत्वपूर्ण बुरा है?

Question

मैं उनसे नफरत करता हूं, यह सीएसएस की कैस्केडिंग प्रकृति को परिभाषित करता है, और यदि आप उन्हें देखभाल के साथ उपयोग नहीं करते हैं तो आप और अधिक जोड़ने के पाश में समाप्त हो जाते हैं !important ।

लेकिन मैं जानना चाहता हूं कि क्या वे प्रदर्शन के लिए खराब हैं?

संपादित करें
से (तेज़) उत्तर मैं यह निष्कर्ष निकाल सकता हूं कि प्रदर्शन पर इसका (महत्वपूर्ण) प्रभाव नहीं होगा। लेकिन यह जानना अच्छा है, भले ही यह दूसरों को हतोत्साहित करने के लिए एक अतिरिक्त तर्क के रूप में हो;)।

EDIT 2
बोल्टकॉक ने बताया कि अगर 2 !importantघोषणाएं हैं तो चश्मा कहता है कि यह सबसे विशिष्ट को चुन लेगा।

Comments

जिज्ञासा से बाहर, आप सीएसएस स्टाइलशीट के प्रदर्शन का मूल्यांकन कैसे करते हैं? बेहतर सीएसएस तेजी से या कुछ और प्रस्तुत करना?

— जियाओई

@ योशी को अभी भी अन्य !importantनियमों की तलाश करनी है।

— जॉन ड्वोरक

@ भजन: मैंने सिर्फ स्पष्ट किया है कि यह सबसे विशिष्ट है ... मैंने भ्रामक टिप्पणी को हटा दिया है।

— BoltClock

यादृच्छिक विचार: यदि यह पढ़ा जाए तो शीर्षक बहुत मजेदार होगा : "क्या यह महत्वपूर्ण है?"

— निक बुगालिस

मैं हमेशा 'महत्वपूर्ण नहीं' के रूप में

— पढ़ता हूं

Answer 1

इसका वास्तव में प्रदर्शन पर कोई प्रभाव नहीं होना चाहिए। फ़ायरफ़ॉक्स के सीएसएस पार्सर को/source/layout/style/nsCSSDataBlock.cpp#572 देखकर और मुझे लगता है कि यह प्रासंगिक दिनचर्या है, सीएसएस नियमों की ओवरराइटिंग से निपटना।

यह सिर्फ "महत्वपूर्ण" के लिए एक सरल जांच प्रतीत होती है।

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

इसके अलावा, टिप्पणी source/layout/style/nsCSSDataBlock.h#219

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

---

1. फ़ायरफ़ॉक्स मैन्युअल रूप से लिखे गए टॉप डाउन पार्सर का उपयोग करता है। दोनों ही मामलों में प्रत्येक CSS फ़ाइल को स्टाइलशीट ऑब्जेक्ट में पार्स किया गया है, प्रत्येक ऑब्जेक्ट में CSS नियम हैं।

2. फ़ायरफ़ॉक्स तब शैली संदर्भ पेड़ बनाता है जिसमें अंत मान होते हैं (सही क्रम में सभी नियमों को लागू करने के बाद)

से: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

अब, आप आसानी से देख सकते हैं, जैसे कि ऊपर बताए गए ऑब्जेक्ट मॉडल के मामले में, पार्सर !importantबाद में बहुत अधिक लागत के बिना, आसानी से प्रभावित नियमों को चिह्नित कर सकता है । प्रदर्शन में गिरावट के खिलाफ एक अच्छा तर्क नहीं है !important।

हालांकि, स्थिरता एक हिट (उल्लेखित अन्य उत्तरों के रूप में) लेती है, जो कि उनके खिलाफ आपका एकमात्र तर्क हो सकता है।

Comments

मुझे पसंद है कि आप केवल एक ही हैं, जिन्होंने मानने के बजाय जाँच को परेशान किया है। बड़ा काम है साहब!

— Moox

यह ऑब्जेक्ट मॉडल DOM नहीं है, वैसे ... यह CSSOM है। बस किसी की सोच में।

— BoltClock

इसका उत्तर होना चाहिए। मुझे शर्म आती है कि मेरी प्रतिक्रिया से आपके अंक दोगुने हो गए हैं। हे प्यारे ओह प्यारे। कोई इस आदमी को श्रेय देता है जहाँ यह होने वाला है!

— माइकल जियोवानी पुमो

यह पोस्ट पार्सिंग के बारे में है, और मुझे उम्मीद है कि प्रदर्शन प्रभाव शून्य होगा। परसर्स तेज हैं। सवाल यह है कि प्रतिपादन के दौरान क्या होगा, जब ब्राउज़र किसी विशेष तत्व से मेल खाते सीएसएस घोषणाओं की खोज करता है? क्या सामान्य मामला है जहाँ कोई !importantनियम विशेष रूप से अनुकूलित नहीं हैं? मुझे ऐसा नहीं लगता, लेकिन यह सुनिश्चित करना मुश्किल है; फ़ायरफ़ॉक्स में लेआउट / शैली निर्देशिका कोड की 80,000 लाइनें हैं।

— जेसन ओरेंडोर्फ

सटीक स्रोत की जाँच करने और ज्ञान के इस उच्च स्तर को साझा करने के आपके प्रयास केवल असाधारण और आश्चर्यजनक हैं। आप जैसे लोग ही हैं जो StackOverflow को इतना लोकप्रिय और विश्वसनीय बनाते हैं। इस जवाब देने और साझा करने के लिए बहुत बहुत धन्यवाद।

— अनमोल सराफ

Answer 2

मुझे नहीं लगता कि !importantब्राउज़र नियमों से कितनी जल्दी खराब होता है (यह चयनकर्ता का हिस्सा नहीं बनता है, केवल घोषणा का हिस्सा है)

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

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

बस मेरे विचार, दुर्भाग्य से मैं किसी भी बेंचमार्क को नहीं पा !importantसका कि प्रदर्शन को कैसे प्रभावित किया जा सकता है।

Comments

"11 अतिरिक्त बाइट्स" खाली स्थान के दे या ले वैकल्पिक खाली स्थान के लिए कुछ बाइट्स हे भगवान

— BoltClock

मुझे पता है ... मैं सिर्फ इस बात का मज़ाक बना रहा हूं कि जब प्रदर्शन के लिए अगले स्तर पर उस पिकनेस को ले कर लोगों को कितना अच्छा लगता है।

— BoltClock

यदि आप वास्तव में चुस्त-दुरुस्त हो रहे हैं , तो इसे और सही तरीके से करने के लिए आवश्यक विशिष्टता को अक्सर 11 बाइट्स से अधिक होना चाहिए।

— ब्लेकग्रू

@BG_Insight: सीएसएस में विशिष्टता से बचने के तरीके के बारे में इस लिंक को देखें

— ब्रेंडन रॉबर्टो

@DisgruntledGoat: एक स्तर-प्रधान व्यक्ति को यह एहसास होगा कि यह बाइट्स नहीं हैं जो बर्बाद हो रहे हैं, लेकिन सेकंड, मिनट, घंटे, दिन और न्यूरॉन्स हैं। (क्यों मैं अभी भी यहाँ हूँ?)

— BoltClock

Answer 3

!importantइसकी जगह है। उसके बारे में मुझ पर भरोसा करें। यह मुझे कई बार बचाया गया है और अक्सर एक अल्पकालिक समाधान के रूप में अधिक उपयोगी होता है, इससे पहले कि आपकी समस्या का एक लंबा और अधिक सुरुचिपूर्ण तरीका पाया जा सके।

हालांकि, ज्यादातर चीजों की तरह, इसका दुरुपयोग किया गया है, लेकिन 'प्रदर्शन' के बारे में चिंता करने की कोई आवश्यकता नहीं है। मैं शर्त लगाता हूँ कि एक छोटे से 1x1 GIF का प्रदर्शन वेब पेज पर हिट होने से ज्यादा होता है।

यदि आप अपने पृष्ठों को अनुकूलित करना चाहते हैं, तो लेने के कई और महत्वपूर्ण मार्ग हैं;);)

Comments

यह बस एक मजेदार अंत था, चलो सब मुस्कुराओ और बस ... आराम करो!

— माइकल जियोवानी पुमो

क्या गधा? मुझे जानना है!

— ऑस्कर ब्रोमन

@ ऑस्कर ब्रोमन मुझे लगता है कि उनका मतलब है कि :) :) मानव शरीर रचना विज्ञान के एक विशेष भाग की तरह दिखता है जो अंग्रेजी भाषा में गधे के लिए दूसरे नाम के साथ एक सामान्य नाम साझा करता है। "गधा या गधा," - यह गधा, क्षमा, गधा के बारे में विकिपीडिया लेख की शुरुआत है। मुझे लगता है कि श्री जान ड्वोरक और दो upvoters उन लोगों में से हैं जो सचमुच हर शब्द (या स्माइली) से नाराज हैं जो दूर से भी (या इस मामले में) काल्पनिक है। हालांकि, गधा कहने का मतलब है कि गधा बहुत बेवकूफ है और कुछ गैर अंग्रेजी बोलने वाले लोग इसे समझ नहीं पाएंगे।

— दिमित्र स्लावचेव

@DimitarSlavchev जनवरी स्माइली के बारे में बात नहीं कर रहा था। माइकल के पोस्ट के शुरुआती संस्करण (संशोधन 2) देखें।

— और्युटा

@andytuba tbh, यह दिमितर्स तर्क को अमान्य करता है, लेकिन उनकी बात को नहीं :) :)

— निराशा का

Answer 4

पर्दे के पीछे यहां क्या चल रहा है, जैसा कि आपके सीएसएस द्वारा संसाधित किया जा रहा है, ब्राउज़र इसे पढ़ता है, एक !importantविशेषता का सामना करता है, और ब्राउज़र द्वारा परिभाषित शैलियों को लागू करने के लिए वापस चला जाता है !important। यह अतिरिक्त प्रक्रिया एक छोटे से अतिरिक्त कदम की तरह लग सकती है, लेकिन यदि आप कई अनुरोधों को पूरा कर रहे हैं, तो आप प्रदर्शन में सफल होंगे। (स्रोत)

अपने CSS में महत्वपूर्ण का उपयोग करना आमतौर पर डेवलपर narcissistic और स्वार्थी या आलसी का मतलब है। आने वाले देवों का सम्मान करें ...

उपयोग करते समय एक डेवलपर की सोच !important:

1. मेरा रॉकिंग CSS काम नहीं कर रहा है ... grrrr।
2. अब मुझे क्या करना चाहिए??
3. और फिर !importantहाँ .... अब यह ठीक काम कर रहा है।

हालाँकि इसका उपयोग करने के लिए एक अच्छा तरीका नहीं है !importantक्योंकि हमने CSS को अच्छी तरह से प्रबंधित नहीं किया है। यह बहुत सारे डिज़ाइन मुद्दों को बनाता है - जो प्रदर्शन के मुद्दों से भी बदतर हैं - लेकिन यह हमें कोड की कई अतिरिक्त लाइनों का उपयोग करने के लिए भी मजबूर करता है क्योंकि हम अन्य गुणों के साथ ओवरराइड कर रहे हैं !importantऔर हमारा CSS बेकार कोड के साथ बंद हो जाता है। इसके बजाय हमें क्या करना चाहिए पहले सीएसएस को अच्छी तरह से प्रबंधित करें, और गुणों को एक दूसरे से अधिक न होने दें।

हम उपयोग कर सकते हैं !important। लेकिन इसका इस्तेमाल संयम से करें और तभी करें जब कोई दूसरा रास्ता न हो।

Comments

कौन सा तरीका बेहतर है? तत्व को सुनिश्चित करने के लिए सीएसएस में विशिष्टता लागू होती है यह उचित शैली है (जिसका अर्थ हो सकता है कि एक विशाल सीएसएस बयान; उदाहरण #news .article- शीर्षक h3 a {}) या सिर्फ महत्वपूर्ण टैग को जोड़ना?

— डेनिस मार्टिनेज

@DennisMartinez यह बेहतर होगा कि शीर्षक लिंक के लिए एक वर्ग बनाएं और बस इसे जोड़ें ..

— NullPoiиteя

नहीं, सिर्फ आलसी। छड़ी ले आओ। मारो।

— एरिक रेपेने

मैं casperOne चित्रों को निकालने का सिर्फ इसलिए कि वे लोड करने के लिए धीमी गति से थे नहीं लगता कि ...

— BoltClock

Answer 5

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

लेकिन प्रदर्शन के सवाल पर: नहीं, यह ध्यान देने योग्य नहीं होना चाहिए। इसका कुछ प्रभाव हो सकता है, लेकिन यह इतना छोटा होना चाहिए कि आपको कभी भी इस पर ध्यान नहीं देना चाहिए और न ही आपको इसकी चिंता करनी चाहिए ।

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

मुझे बदले में एक सेवानिवृत्त प्रश्न के साथ अपने प्रश्न का उत्तर दें; एक कोण जिसे आप शायद नहीं मानते थे: आपका कौन सा ब्राउज़र मतलब है?

प्रत्येक ब्राउज़र में स्पष्ट रूप से अपना स्वयं का रेंडरिंग इंजन होता है, अपने स्वयं के अनुकूलन के साथ। तो अब सवाल यह हो जाता है: प्रत्येक ब्राउज़र में प्रदर्शन के निहितार्थ क्या हैं? शायद !importantएक ब्राउज़र में बुरी तरह से प्रदर्शन करता है लेकिन वास्तव में दूसरे में अच्छा है? और शायद अगले संस्करणों में, यह दूसरे तरीके से गोल होगा?

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

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

Comments

अच्छा तर्क। मुझे पता है कि यह अनुकूलन के लायक नहीं है, लेकिन मैं सिर्फ उत्सुक हूं।

— १६

Answer 6

यह प्रदर्शन को विशेष रूप से प्रभावित नहीं करता है। हालांकि यह आपके कोड की स्थिरता को कम करता है, और इसलिए लंबे समय में प्रदर्शन को कम करने की संभावना है।

Comments

@ जान ड्वोरक आपकी समस्या क्या है?

— एन्वे करें

@BoltClock मैं पहले वाक्य का उल्लेख कर रहा हूं।

— जॉन ड्वोरक

@ मेरी समस्या यह है कि मैं एक बेंचमार्क देखना चाहूंगा, न कि तथ्यों के रूप में प्रस्तुत अप्रीरी धारणाएं। मुझे नहीं पता कि यह कौन सा है।

— जॉन ड्वोरक

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

— हेनरिक

Answer 7

!importantपहले कई बार उपयोग करने के बाद , मैंने व्यक्तिगत रूप से देखा है कि इसका उपयोग करते समय कोई प्रदर्शन प्रदर्शन हिट नहीं हुआ।

एक नोट के रूप में इस स्टैक प्रश्न का उत्तर एक कारण के लिए देखें जिसे आप उपयोग करना चाहते हैं !important।

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

Answer 8

हम्म ... महत्वपूर्ण या !! महत्वपूर्ण?

आइए इस चरण को चरण दर चरण देखें:

1. Parser को प्रत्येक संपत्ति के लिए महत्वपूर्ण जाँच करनी है, चाहे आप इसका उपयोग करें या न करें - यहाँ प्रदर्शन का अंतर 0 है
2. जब एक संपत्ति को अधिलेखित किया जाता है, तो पार्सर को यह जांचना पड़ता है कि क्या संपत्ति का अधिलेखित होना महत्वपूर्ण है या नहीं - इसलिए यहां प्रदर्शन का अंतर फिर से है 1
3. यदि संपत्ति अधिलेखित की जा रही है !! महत्वपूर्ण है, तो उसे संपत्ति का अधिलेखित करना पड़ता है - महत्वपूर्ण का उपयोग न करने के लिए -1 का प्रदर्शन हिट
4. यदि संपत्ति अधिलेखित की जा रही है, तो यह महत्वपूर्ण है, यह संपत्ति को अधिलेखित करने में मदद करता है - महत्वपूर्ण प्रदर्शन का उपयोग करने के लिए +1
5. यदि नई संपत्ति महत्वपूर्ण है, तो संपत्ति को अधिलेखित होने की परवाह किए बिना, पार्स को इसे अधिलेखित करना होगा! महत्वपूर्ण या !! महत्वपूर्ण - प्रदर्शन अंतर 0 फिर से!

इसलिए मुझे लगता है! महत्वपूर्ण वास्तव में बेहतर प्रदर्शन है क्योंकि यह पार्सर को कई गुणों को छोड़ने में मदद कर सकता है जो इसे अन्यथा नहीं छोड़ेंगे।

और जैसा कि @ आर्यन नीचे उल्लेख करते हैं, इनलाइन सीएसएस को ओवरराइड करने और जावास्क्रिप्ट का उपयोग करने से बचने का एकमात्र तरीका है ... इसलिए अनावश्यक प्रदर्शन से बचने का एक और तरीका

हम्म ... पता चला कि महत्वपूर्ण महत्वपूर्ण है

और भी,

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

इसलिए मैं अनुमान लगाता हूं कि महत्वपूर्ण डेवलपर्स को खुश कर सकते हैं, और मुझे लगता है कि यह बहुत महत्वपूर्ण है : डी

Comments

"इसलिए मुझे लगता है! महत्वपूर्ण वास्तव में बेहतर प्रदर्शन है क्योंकि यह पार्सर को कई गुणों को छोड़ने में मदद कर सकता है जो इसे अन्यथा नहीं छोड़ेंगे।" एक बार कई !importantघोषणाएँ करने के बाद इस कथन को तुरंत रद्द कर दिया जाता है । ब्राउज़र को उन सभी की जांच करनी होगी। तो यह वास्तव में चरण 1 पर वापस आ गया है।

— BoltClock

@BoltClock पार्सर को संपत्ति के लिए जांचना होगा कि आप कितनी बार इसका उपयोग करते हैं ... इसलिए यदि आपके पास 10 गुण हैं, तो पार्सर को 10 बार यह जांचना होगा कि उन संपत्तियों की परवाह किए बिना वह महत्वपूर्ण है या नहीं। इसलिए यदि आपके पास 10-महत्वपूर्ण गुण हैं, तो पार्सर चेक को 10 बार बनाता है, और यदि आपके पास 10 नहीं है! तो महत्वपूर्ण गुण हैं, पार्सर अभी भी 10 बार चेक बनाता है ... समझ में आता है?

— xtrahelp.com

अभी भी अनिश्चित है कि क्या महत्वपूर्ण प्रदर्शन में वृद्धि है या नहीं, वास्तव में ... लेकिन मैं सभी टिप्पणियों और चर्चाओं का अच्छी तरह से आनंद ले रहा हूं। मेरा ज्ञान अपने अगले कदमों को आगे ले जा रहा है। StackOverflow सिर्फ अद्भुत है: डी

— अनमोल सराफ

Answer 9

मैं !importantप्रदर्शन को बाधित नहीं कर सकता , स्वाभाविक रूप से वैसे भी नहीं। यदि, हालांकि, आपके सीएसएस के साथ छेड़छाड़ की गई है !important, तो यह इंगित करता है कि आप चयनकर्ताओं से अधिक योग्यता प्राप्त कर रहे हैं और बहुत विशिष्ट हैं और आप विशिष्टता जोड़ने के लिए माता-पिता या क्वालीफायर से बाहर हैं। नतीजतन, आपका सीएसएस फूला हुआ हो जाएगा (जो प्रदर्शन को बाधित करेगा ) और बनाए रखना मुश्किल है।

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

#सीएसएस के साथ उपसर्ग किए गए आईडी शातिर रूप से विशिष्ट हैं, उस बिंदु पर जहां 255 कक्षाएं एक आईडी (द्वारा फेल्ड : @Faust ) को ओवरराइड नहीं करेंगी । आईडी की एक गहरी मार्ग समस्या है, हालांकि, उन्हें अद्वितीय होना है, इसका मतलब है कि आप उन्हें डुप्लिकेट शैलियों के लिए फिर से उपयोग नहीं कर सकते हैं, इसलिए आप दोहराई जाने वाली शैलियों के साथ रैखिक सीएसएस लिखना समाप्त करते हैं। ऐसा करने का नतीजा परियोजना को अलग-अलग करने के लिए अलग-अलग होगा, जो कि पैमाने पर निर्भर करता है, लेकिन स्थिरता को बहुत नुकसान होगा और किनारे के मामलों में, प्रदर्शन भी।

कैसे आप बिना विशिष्टता जोड़ सकते हैं !important,, चेनिंग योग्यता, या आईडी (अर्थात् #)

एचटीएमएल

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

सीएसएस

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

ठीक है, तो यह कैसे काम करता है?

पहला और दूसरा उदाहरण समान काम करते हैं, पहला शाब्दिक रूप से एक वर्ग है, और दूसरा विशेषता चयनकर्ता है। वर्गों और गुण चयनकर्ताओं में समान विशिष्टता है। .eg1/2-barइसका रंग विरासत में नहीं मिला .eg1/2-fooक्योंकि इसका अपना नियम है।

तीसरा उदाहरण चयनकर्ताओं को अर्हता प्राप्त करने या उनका पीछा करने जैसा लगता है, लेकिन ऐसा नहीं है। जब आप माता-पिता, पूर्वजों, और इसी तरह से चयनकर्ताओं के साथ उपसर्ग कर रहे हों; यह विशिष्टता जोड़ता है। योग्यता समान है, लेकिन आप चयनकर्ता के आवेदन के तत्व को परिभाषित करते हैं। योग्यता ul.class:ul .class

मुझे यकीन नहीं है कि आप इस तकनीक को क्या कहेंगे, लेकिन व्यवहार जानबूझकर है और है W3C द्वारा प्रलेखित है

एक ही सरल चयनकर्ता के बार-बार होने की अनुमति है और विशिष्टता को बढ़ाते हैं।

क्या होता है जब दो नियमों के बीच विशिष्टता समान होती है?

जैसा कि @BttClock ने बताया , यदि कई महत्वपूर्ण घोषणाएँ हैं, तो कल्पना यह निर्धारित करती है कि सबसे विशिष्ट व्यक्ति को पूर्वता लेना चाहिए।

नीचे दिए गए उदाहरण में, दोनों में .fooऔर .barसमान विशिष्टता है, इसलिए व्यवहार सीएसएस के कैस्केडिंग प्रकृति में वापस आ जाता है, जिससे सीएसएस में घोषित अंतिम नियम पूर्वता का दावा करता है .foo।

एचटीएमएल

<div>
    <p class="foo bar">foobar</p>
</div>

सीएसएस

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle