आप अप्रयुक्त सीएसएस कोड से कैसे छुटकारा पा सकते हैं? भाग २

आज हम अप्रयुक्त सीएसएस कोड के खिलाफ लड़ाई पर सामग्री के अनुवाद का दूसरा हिस्सा प्रकाशित करते हैं।



→ पहला भाग

सीएसएस पोस्टप्रोसेसिंग

मान लीजिए कि किसी प्रोजेक्ट में CSS कम या सैस का उपयोग करके लिखा गया है, और फिर एक पोस्टप्रोसेसर का उपयोग मौजूदा कोड को नियमित CSS में संकलित करने के लिए किया जाता है। ऐसी परियोजना में, शायद, अप्रयुक्त सीएसएस से छुटकारा पाने के लिए एक स्वचालित प्रणाली है, जो सीएसएस प्रीप्रोसेसिंग के बाद शुरू होती है। यह इस तरह लग सकता है:

1. सास।
2. पोस्टसीएसएस / स्वचालित उपसर्ग प्रणाली।
3. अप्रयुक्त सीएसएस को हटाना।
4. सीएसएस कोड उत्पादन के लिए तैयार।

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

PurgeCSS

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

PurgeCSS प्रोजेक्ट अब CSS कोड सफाई बाजार में एक प्रमुख खिलाड़ी की तरह दिखता है। कई इसका उपयोग करते हैं, कई इसके बारे में लिखते हैं।

• यहाँ सामग्री है कि कैसे PurgeCSS का उपयोग करें, विशेष रूप से बूटस्ट्रैप के साथ काम करते समय।
• इस लेख से, आप सीख सकते हैं कि PurgeCSS श्वेतसूची का उपयोग करके असामान्य परिस्थितियों में चयनकर्ताओं को नहीं हटाएगा।
• यहाँ आप जान सकते हैं कि कैसे PurgeCSS का उपयोग npm लिपियों के साथ और PostCSS के साथ किया जाता है।
• यह बात करता है कि PurgeCSS टेलविंड के साथ कैसे काम करता है।

इस तथ्य के बावजूद कि PurgeCSS को टेलविंड के साथ काम करने के लिए विशेष ट्यूनिंग की आवश्यकता है, ऐसा लगता है कि ये दोनों उपकरण एक दूसरे के साथ पूरी तरह से संयुक्त हैं। वास्तव में, यहां तक ​​कि टेलविंड प्रलेखन में, आप उन्हें साझा करने के लिए एक सिफारिश पा सकते हैं। और PurgeCSS के पास निर्माण परियोजनाओं की प्रक्रिया में इसे लागू करने के लिए एक कमांड लाइन उपकरण है ।

मुझे लगता है कि इस का सार निम्न के लिए आता है: टेलविंड हेल्पर चयनकर्ताओं से भरा एक बड़ी सीएसएस फ़ाइल बनाता है। लेकिन यह नहीं माना जाता है कि इन सभी चयनकर्ताओं का उपयोग परियोजना में किया जाएगा। डेवलपर उनके HTML-कोड को स्टाइल करने की सभी समस्याओं को हल करने के लिए उनका उपयोग करता है, और फिर PurgeCSS इस HTML-कोड का विश्लेषण करता है और अनावश्यक चयनकर्ताओं को हटा देता है, जिससे CSS उत्पादन के लिए तैयार हो जाता है।

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

अप्रयुक्त सीएसएस से छुटकारा पाने के लिए मेरा पसंदीदा दृष्टिकोण

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

मैंने देखा कि साइट चयनकर्ता का उपयोग किया जाता है या नहीं। CSS ब्लॉक ने background-image: url(/is-this-being-used.gif?selector); जैसे डिजाइन का उपयोग किया background-image: url(/is-this-being-used.gif?selector); । इसके आवेदन के बाद, सर्वर लॉग को समय-समय पर जांचा जाता था ताकि यह पता लगाया जा सके कि क्या संबंधित छवि प्राप्त करने के लिए अनुरोध किया गया था। यदि ऐसा कोई अनुरोध था, तो जांच के तहत सीएसएस ब्लॉक का उपयोग किया जाता है। यदि यह नहीं था, तो इसका उपयोग नहीं किया जाता है।

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

दृश्य प्रतिगमन द्वारा परियोजनाओं का अध्ययन

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

फिर, किसी भी अन्य शाखा को master शाखा के साथ विलय करने से पहले, नई शाखा की सामग्री के आधार पर नए स्क्रीनशॉट बनाए जाते हैं, और उनकी तुलना master शाखा के लिए की जाती है। यह, ज़ाहिर है, मैन्युअल रूप से नहीं किया जाता है, लेकिन प्रोग्रामेटिक रूप से।

कड़ाई से बोलते हुए, यहां एक वीडियो है जिसमें इसे दिखाया गया है।

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

परमाणु सीएसएस और सीएसएस-इन-जेएस

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

यदि ऐसा है, तो यह सिर्फ अद्भुत है।

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

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

परिणाम

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

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

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

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


प्रोजेक्ट बनाने से पहले बूटस्ट्रैप से ड्रॉपडाउन, बैज और ब्रेडक्रंब मॉड्यूल को हटाना

मैं अनावश्यक सीएसएस-कोड के साथ कठिन संघर्ष में आपको शुभकामनाएं देता हूं।

प्रिय पाठकों! उत्पादन में आने वाले अप्रयुक्त सीएसएस कोड से आप कैसे निपटते हैं?