👫 🙁 👚 सीएसएस शैलियों को एनकैप्सुलेट करना

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

इन परिवर्तनों और पलायन की प्रक्रिया में, यह पता चला कि वेब इंटरफेस बनाने और बनाए रखने की जटिलता की वृद्धि ने इसकी जटिलता के विकास को काफी हद तक समाप्त कर दिया है। उन्होंने मॉड्यूल को तोड़कर, अमूर्त, एन्कैप्सुलेटिंग करके समस्या को हल करने के लिए (और अभी भी प्रयास कर रहे हैं)। इस उद्देश्य के लिए, बड़ी संख्या में जावास्क्रिप्ट चौखटे ( Backbone , Ember , Angular ), एचटीएमएल टेम्पलेट इंजन ( Jade , Handlebars ), निर्भरता प्रबंधन प्रणाली ( RequireJS ), आदि बनाए गए थे।

सीएसएस इस दृष्टिकोण से सबसे कठिन निकला, जहां भाषा के डिजाइन से किसी भी कनेक्टेड सीएसएस फ़ाइल या style टैग में घोषित की गई कोई भी संपत्ति DOM ट्री के किसी भी तत्व के प्रदर्शन को प्रभावित कर सकती है।

कार्य का औपचारिककरण।

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

ब्लॉक तत्वों के प्रदर्शन में किसी भी अनजाने परिवर्तन को शैलियों का रिसाव कहा जाएगा।

स्टाइल लीक दोनों अन्य ब्लॉकों ( संपत्ति लीक ) के तत्वों के गुणों में बदलाव के साथ हो सकता है, और डोम ट्री ( कैस्केडिंग लीक ) में परिवर्तन के साथ हो सकता है।

स्टाइल लीक के स्रोत

यदि हम किसी भी ब्लॉक को खुद से मानते हैं, तो शैलियों की लीक बाहर और बाहर दोनों से हो सकती है। इस तथ्य के कारण कि एक इकाई के लिए एक बाहरी रिसाव दूसरे के लिए एक बाहरी रिसाव होगा, लीक का वर्गीकरण बाहरी लीक के मामले तक सीमित हो सकता है।

1. गुणों का अनुरक्षण

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

उदाहरण के लिए

 .outer-block{ color: red; }

 <div class="outer-block">     <div class="current-block">   -   </div> </div>

jsfiddle.net पर देखें

2. गुणों का अनुरूपता

यदि सीएसएस संपत्ति में किसी तत्व के लिए स्पष्ट मूल्य नहीं है, तो डिफ़ॉल्ट मान का उपयोग किया जाता है। यदि यह संपत्ति मूल तत्व की संपत्ति (उदाहरण के लिए, auto की डिफ़ॉल्ट मान के साथ width और height गुण) या मिमिक (उदाहरण के लिए, transparent background-color के डिफ़ॉल्ट मान के साथ गुण के रूप में) के लिए समायोजित की जाती है, तो अंतिम उपयोगकर्ता को यह आभास होगा कि मूल तत्व शैलियाँ बाल तत्व शैलियों पर लीक हो गईं।

उदाहरण के लिए

 .outer-block{ background: red; }

 <div class="outer-block">     <div class="current-block">   -   </div> </div>

jsfiddle.net पर देखें

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

3. कैस्केडिंग अराजकता

चयनकर्ताओं के तत्वों को लक्षित करने के लिए शैलियों को लागू करना तीन चरणों में होता है।
पहले चरण में, लक्ष्य तत्व के चयनकर्ता से संबंधित सभी तत्व पूरे DOM ट्री से चुने गए हैं। उदाहरण के लिए, .current-block h3 चयनकर्ता के लिए, पहले चरण में, h3 टैग वाले सभी तत्वों का चयन किया जाएगा। DOM ट्री के किसी भी हिस्से में चयन स्थान को सीमित करने का कोई तरीका नहीं है।
दूसरे चरण में, चयनित तत्वों को लक्ष्य तत्व के मूल तत्वों का पता लगाकर चयनकर्ता के अनुपालन के लिए फ़िल्टर किया जाता है। एक वंशज कॉम्बीनेटर का उपयोग करते समय, एक मैच की खोज डोम ट्री के मूल तत्व तक जा सकती है। बहन कॉम्बीनेटर ~ (सामान्य सिबलिंग कॉम्बीनेटर) का उपयोग करते समय - बहुत पहले बहन तत्व तक।

उदाहरण के लिए

 .current-block h3 { background: blue; } .outer-block h3 { background: red; }

 <div class="outer-block"> <h3>   </h3> <div class="current-block"> <h3>  -  </h3> </div> </div>

jsfiddle.net पर देखें

खोज स्थान को सीमित करने का एकमात्र तरीका बाल कॉम्बिनेटर और निकटतम सिबलिंग कॉम्बिनेटर का उपयोग करना है। ऐसा करने के लिए, आपको DOM ट्री में लक्ष्य पथ से ब्लॉक के रूट तत्व तक सटीक पथ निर्दिष्ट करना होगा, जिससे सीएसएस और HTML कोड के सामंजस्य में वृद्धि होती है।

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

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

4. स्थितिगत कंडीशनिंग

चयनकर्ताओं में सिबलिंग कॉम्बीनेटर ( + और ~ ) या छद्म वर्ग ( :first-child , आदि) का उपयोग करते समय ब्लॉक तत्व डोम ट्री में ब्लॉक की स्थिति के आधार पर अपने प्रदर्शन को बदल सकते हैं।

उदाहरण के लिए

 .block { background: red; } .block + .block { background: blue; }

 <div class="block"> <h3> ,         </h3> </div> <div class="block"> <h3> </h3> </div>

jsfiddle.net पर देखें

जैसा कि गुणों के अनुरूपता के मामले में है, यह ध्यान देने योग्य है कि कई डेवलपर्स स्थितिगत कंडीशनिंग को बहुत उपयोगी पाते हैं। लेख के लेखक उनके साथ एकजुटता में हैं जब तक कि सशर्तता ब्लॉक की सीमाओं से परे फैली हुई है, क्योंकि इस मामले में शैलियों के एनकैप्सुलेशन का स्पष्ट उल्लंघन है।

जाहिर है, सीएसएस शैलियों के आदर्श इनकैप्सुलेशन को लीक की किसी भी क्षमता को समाप्त करना चाहिए।

लेख का दूसरा भाग ("सीएसएस स्टेप्स - भाग 2 समाधान") वर्तमान विश्लेषण (ओओसीएसएस, एसएमएसीएसएस, एसीएसएस, बीईएम, सीएसएस प्रीप्रोसेसर्स) आदर्श के अनुरूप होने के विश्लेषण के लिए समर्पित होगा, साथ ही साथ उनका वर्गीकरण भी।

मुझे उपयोगी सलाह और रचनात्मक आलोचना करने में खुशी होगी।

सीएसएस शैलियों को एनकैप्सुलेट करना - भाग 1: समस्या