तो जब यह अभी भी उपयोग करना संभव है!

"कुटिल" हाथों में कोई भी विशेषता खराब हो जाती है। आयातक कोई अपवाद नहीं है। बुरी बात वह नहीं है जो वह जानता है, बल्कि जिस तरह से उसका उपयोग किया जाता है।

यह कैसे काम करता है!

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

उदाहरण के लिए:

.content .title { color: red; } .title { color: blue; } 

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

इसलिए, एक ही उदाहरण का उपयोग करते हुए, लेकिन महत्वपूर्ण है, हमें अचानक पता चलता है कि वह आपकी विशिष्टता की परवाह नहीं करता है।

 .content .title { color: red; } .title { color: blue !important; } 

शीर्षक होगा नीला! यह संपत्ति हमारे द्वारा लिखे गए नियमों के प्राकृतिक प्रवाह का उल्लंघन करती है और निचली प्राथमिकता वाली शैलियों को सर्वोच्च प्राथमिकता देती है।

खैर, हालांकि, कैसे "थूक" करने के लिए ... वास्तव में नहीं, और थूक। चलो एक और आयातक जोड़ते हैं।

 .content .title { color: red !important; } .title { color: blue !important; } 

और शीर्षक फिर से लाल है। क्योंकि हमारे पास दो महत्वपूर्ण संघर्ष हैं, और यह संघर्ष चयनकर्ताओं के वजन की तुलना करके हल किया गया है।

जब यह होता है तो एक आयातक बुरा होता है:

 .title { color: red; } 

"हम्म, मैंने लाल लिखा है, मेरा शीर्षक लाल क्यों नहीं है? और अगर ऐसा है? ”

 .title { color: red !important; } 

"बहुत बढ़िया! लाल! ” लेकिन क्या यह वास्तव में अच्छा है?

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

हॉटफिक्स के लिए उपकरण

बहुत बार, जब मैं किसी को आयातकों के बारे में सवाल पूछता हूं, तो मैं इस शैली में एक उत्तर सुनता हूं: "मैं महत्वपूर्ण का उपयोग करता हूं जब मुझे समस्या को जल्दी से ठीक करने की आवश्यकता होती है और कोड को समझने का समय नहीं होता है जो मैंने नहीं लिखा था और जो बहुत खराब तरीके से लिखा गया है । "

हां, लेकिन केवल कार्य हमेशा "जरूरी" होते हैं, ऐसे कार्य, एक नियम के रूप में, कोई भी कभी भी खत्म नहीं होगा, इसलिए इसे छोड़ दें। आपने स्वयं ध्यान नहीं दिया कि आपने "खराब एलियन कोड" को और भी बदतर कैसे बना दिया।

उपवास का क्या अर्थ है? क्या पुनर्वितरण के लिए चयनकर्ता के आवश्यक वजन का पता लगाना इतना कठिन और लंबा है? हम विकास में DevTools का बहुत सक्रिय रूप से उपयोग कर रहे हैं, और इस समस्या को हल करने के लिए हमारे पास इसका उत्तर है।

हम उस तत्व का निरीक्षण करते हैं जिसे हम बदलना चाहते हैं। इसका वर्तमान रंग काला है। हम देखते हैं कि इस रंग को किस चयनकर्ता को सौंपा गया था?



नए रंग को असाइन करने या वजन बढ़ाने के लिए हम एक ही चयनकर्ता का उपयोग करते हैं, और यह बिंदु टोपी में है, चाहे यह चयनकर्ता कितना भी मुश्किल क्यों न हो।



क्या यह लंबा है? मुझे लगता है कि यह लेखन से समय में बहुत कम है! महत्वपूर्ण है, लेकिन यह बहुत अधिक सही और सुरक्षित है।

तृतीय-पक्ष समाधान और किसी और का कोड

आयातकों का उपयोग करने की आवश्यकता के बारे में सवाल का दूसरा सबसे लोकप्रिय जवाब: "मैं उपयोग करता हूं! जब मैं तीसरे पक्ष के पुस्तकालयों और प्लगइन्स या सीएमएस-ओके की शैलियों को फिर से परिभाषित करता हूं तो महत्वपूर्ण है । "

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

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



और किसी कारण से आपको इन गुणों को ओवरराइड करने की आवश्यकता है, प्लगइन में परिवर्तन की अनदेखी करना।

JS केवल इनलाइन शैलियों का उपयोग करके संपत्ति मूल्यों को पुन: असाइन कर सकता है। यही है, वास्तव में, जावास्क्रिप्ट का उपयोग करने वाले एक तत्व के लिए किसी भी गुण को केवल शैली विशेषता के लिए लिखा जाएगा। विशिष्टता तंत्र के दृष्टिकोण से, ये शैली अधिक प्राथमिकता हैं, और इससे कोई फर्क नहीं पड़ता कि आप चयनकर्ता का वजन कैसे बढ़ाते हैं, आप उन्हें अधिलेखित नहीं कर सकते।

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

अच्छे के लिए महत्वपूर्ण है

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

यदि आप बूटस्ट्रैप लाइब्रेरी के CSS स्रोत कोड को खोलते हैं, तो आप देखेंगे कि वहां पुस्तकालय डेवलपर्स अक्सर आयातकों के उपयोग का सहारा लेते हैं। शायद उन्हें भी जल्दी ठीक करने की जरूरत थी, और उन्होंने ऐसा किया (व्यंग्य), लेकिन सामान्य तौर पर एक अधिक उपयुक्त स्पष्टीकरण है। इस मामले में, महत्वपूर्ण एस का उपयोग "अच्छे के लिए" किया जाता है। इस तरह, बूटस्ट्रैप डेवलपर्स अपने कोड को "सुरक्षित" करते हैं।

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

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

इसलिए यह कहना गलत है: "मैं आयातकों का उपयोग करता हूं जब मुझे तीसरे पक्ष के पुस्तकालयों की शैलियों को फिर से परिभाषित करने की आवश्यकता होती है," यह कहना अधिक सही होगा: "जब मैं इनलाइन शैलियों या अन्य को फिर से परिभाषित करने की आवश्यकता होती है तो मैं आयातकों का उपयोग करता हूं!" और इससे कोई फर्क नहीं पड़ता कि ये शैलियाँ कहाँ से आती हैं: आपकी फ़ाइलों से या तीसरे पक्ष के लोगों से।

सहायकों

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

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

 .warning { color: red; } 

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

यह अभी भी संभव है

जब आप इनलाइन शैलियों या अन्य को ओवरराइड करने की आवश्यकता होती है, तो इसका उपयोग करना सही और सामान्य है!

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

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

आपको एक आयातक की ज़रूरत नहीं है, इसलिए नहीं कि वह किसी तरह रहस्यमय और भयानक है, बल्कि सिर्फ इसलिए कि ज्यादातर मामलों में आप उसके बिना कर सकते हैं।

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