कैसे करें सीएसएस रिफ्लैक्टर - एक गाइड

यदि हम एक प्रबंधनीय और अनुकूलित कोड आधार चाहते हैं, तो सीएसएस रीफैक्टरिंग फ्रंट-एंड डेवलपमेंट वर्कफ़्लो का एक अनिवार्य हिस्सा होने की आवश्यकता है। जब हम CSS को रिफलेक्टर करते हैं, तो हम साफ करें और हमारे मौजूदा कोड को पुनर्गठित करें किसी भी नई सुविधाओं को जोड़ने या बग को ठीक किए बिना.

Refactoring मदद करता है सीएसएस विस्फोट को रोकने, कोड पठनीयता और पुन: प्रयोज्य में सुधार, तथा CSS चिकना और निष्पादित करने के लिए तेज़ बनाता है.

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

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

1. एक प्रारंभिक ऑडिट का संचालन करें

रिफ्लेक्टर के लिए हमें क्या चाहिए, इसके बारे में एक बेहतर तस्वीर है हमारे पास वर्तमान में जो कुछ भी है उसे देखने के लिए एक व्यापक ऑडिट के साथ शुरू करें.

कई बेहतरीन ऑनलाइन टूल हैं जो इस प्रयास में हमारी मदद कर सकते हैं। CSSDig एक शक्तिशाली Chrome एक्सटेंशन है जो किसी वेबसाइट के CSS का विश्लेषण करता है, और इसकी कमजोरियों की पड़ताल करता है, जैसे कि विशिष्ट चयनकर्ता या दोहरावदार गुण.

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

प्रारंभिक ऑडिट के दौरान कोड को मैन्युअल रूप से जांचना भी महत्वपूर्ण है, क्योंकि वास्तुशिल्प स्तर पर कई समस्याओं को केवल इस तरह से पकड़ा जा सकता है.

2. एक प्रबंधनीय योजना तैयार करें

कामकाजी कोड को फिर से भरना हमेशा एक कठिन काम है, लेकिन हम दर्द को कम कर सकते हैं यदि हम इस बारे में एक योजना बनाते हैं कि हमें क्या करना है, प्रबंधनीय प्रक्रिया को चट कर जाना, और एक संभव कार्यक्रम बनाना.

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

इसलिए यह एक अच्छा विचार है आगे इन अतिरिक्त संशोधनों का पता लगाने के लिए हमें प्रदर्शन करने की आवश्यकता होगी, तथा उन्हें हमारे रिफैक्टरिंग शेड्यूल में बनाएँ प्राथमिक, सीएसएस से संबंधित कार्यों के साथ.

3. ट्रैक प्रगति

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

4. एक कोडिंग स्टाइल गाइड के लिए छड़ी

एक सुसंगत कोडिंग शैली मार्गदर्शिका उल्लेखनीय रूप से कोड पठनीयता और बनाए रखने में सुधार कर सकती है, इसलिए इससे पहले कि हम इसे रिफ्लेक्टर करना शुरू करें, यह आवश्यक है एक CSS कोडिंग स्टाइल गाइड सेट करें.

इस पर निर्णय लेने के लिए महत्वपूर्ण चीजें हैं:

• नामकरण की परंपरा
• प्रारूपण नियम
• घोषणा का आदेश
• इकाइयों और मूल्यों का हम उपयोग करना चाहते हैं
• नियम टिप्पणी करना

यदि हम अपनी स्वयं की कोडिंग शैली मार्गदर्शिका नहीं बनाना चाहते हैं, तो हम किसी और व्यक्ति का भी उपयोग कर सकते हैं, जैसे थिंकपप जो कि जीथब पर पाया जा सकता है.

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

5. एक सुसंगत फ़ाइल संरचना सेट करें

जब हम तैयारियों के साथ तैयार हो जाते हैं, तो सबसे पहले हमें एक उचित सीएसएस फ़ाइल संरचना स्थापित करनी होगी जो सीएसएस के कैस्केडिंग प्रकृति पर ध्यान देती है।.

यह मुख्य रूप से परियोजना पर निर्भर करता है कि हमारी फ़ाइलों को कैसे व्यवस्थित किया जाए, लेकिन कुछ सार्वभौमिक नियम हैं, जैसे कि एक अलग का उपयोग करना Normalize.css सीएसएस रीसेट शैलियों के लिए फ़ाइल, एक अलग global.css वैश्विक शैलियों के लिए जो पूरे प्रोजेक्ट में उपयोग की जाती हैं, और 3 पार्टी पुस्तकालयों को एक अलग फ़ोल्डर में संग्रहीत करने के लिए.

यदि हम अपनी CSS फ़ाइल संरचना के साथ सुरक्षित खेलना चाहते हैं, तो SMACSS या ITCSS जैसे तैयार आर्किटेक्चर भी हैं, जो प्रभावी तकनीकों की पेशकश करते हैं कैसे एक स्केलेबल तरीके से सीएसएस फ़ाइलों को व्यवस्थित करने के लिए.

6. अप्रयुक्त और डुप्लिकेट नियमों से छुटकारा पाएं

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

इस उद्देश्य के लिए सबसे प्रसिद्ध उपकरण शायद UnCSS, एक Node.js मॉड्यूल है जो अप्रयुक्त सीएसएस नियमों से तेजी से छुटकारा पाना संभव बनाता है, और यह हमें परिष्कृत कॉन्फ़िगरेशन विकल्प भी प्रदान करता है जो सफाई प्रक्रिया को ठीक करने में आसान बनाता है।.

यह ध्यान रखना महत्वपूर्ण है कि हम जरूरी नहीं कि अप्रयुक्त नियमों को हटाया जाए सब हमारे पास सीएसएस फाइलें हैं, उदाहरण के लिए, वैश्विक, रीसेट या 3 पार्टी स्टाइलशीट से, इसलिए हमें इसकी आवश्यकता है उन्हें बाहर करो सफाई करते समय.

अप्रचलित नियमों के साथ, डुप्लिकेट नियमों से भी शानदार कोड ब्लोट और प्रदर्शन हानि होती है। हम CSS Purge Node.js मॉड्यूल का उपयोग करके उन्हें निकाल सकते हैं, लेकिन हम साथ काम भी कर सकते हैं डुप्लिकेट नियमों की खोज करने के लिए सीएसएस लाइनर हमारे CSS फाइलों में.

7. विशिष्टता कम करें

CSS चयनकर्ता की विशिष्टता संख्या और आंतरिक चयनकर्ताओं के प्रकार से गणना की जाती है। सीएसएस विशिष्टता को 4-अंकीय संख्या के रूप में व्यक्त किया जाता है, जिसे समझना आसान है अगर हम इस दृश्य को देखते हैं सीएसएस विशिष्टता कैलकुलेटर:

सबसे कम विशिष्टता (0001) उन चयनकर्ताओं के अंतर्गत आता है जो केवल एक सामान्य HTML तत्व को लक्षित करते हैं, जैसे कि

या

. एक यौगिक चयनकर्ता जितना अधिक आंतरिक चयनकर्ता होता है, उसकी विशिष्टता उतनी ही अधिक होती है.

कुछ चयनकर्ता, जैसे कि आईडी या इनलाइन शैलियों से आने वाले चयनकर्ता, उच्च प्राथमिकताएं रखते हैं क्योंकि वे अधिक सामान्य चयनकर्ताओं से संबंधित शैलियों को ओवरराइड करते हैं। उदाहरण के लिए की विशिष्टता # ID1 चयनकर्ता है 0100.

रिफैक्टरिंग में, लक्ष्य चयनकर्ताओं की विशिष्टता को कम करना है (उन्हें कम रखना) जितना संभव हो, उतना कम करना उच्च विशिष्टता वाले चयनकर्ता चयनकर्ता पुन: प्रयोज्य को कम करते हैं, तथा एक फूला हुआ कोड आधार का नेतृत्व.

उच्च विशिष्टता चयनकर्ताओं के 3 मुख्य प्रकार हैं:

1. योग्य चयनकर्ता, जैसे कि p.class1 (परिभाषित करना) पी टैग यहां अनावश्यक है, क्योंकि यह अन्य HTML तत्वों के साथ एक ही वर्ग का उपयोग करना असंभव बनाता है)
2. दीपकों का चयन किया, जैसे कि .class1 .class2 .class3 .class4…
3. आईडी, जैसे कि # ID1

ऑनलाइन उपकरण, जैसे CSSDig का उल्लेख चरण 1 में किया गया है, इन उच्च विशिष्टता चयनकर्ताओं को जल्दी से खोजने के लिए उपयोग किया जा सकता है। घोंसले के अधिकतम स्तर या उपयोग करने की सीमा जैसी चीजों के बारे में कोडिंग स्टाइल गाइड में एक नियम स्थापित करना भी उपयोगी हो सकता है आईडी चयनकर्ताओं.

8. खरपतवार बाहर !जरूरी नियम

सीएसएस नियमों का पालन किया !जरूरी कथन नियमित शैली के नियमों को ओवरराइड करता है। का उपयोग करते हुए !जरूरी जल्द या बाद में नियम प्रमुख कोड के लिए नेतृत्व. यह संयोग नहीं है कि अधिकांश लाइनिंग टूल उन्हें त्रुटि के रूप में चिह्नित करते हैं.

जब हमें सीएसएस को जल्दी से लिखने की आवश्यकता होती है, तो हम उनकी सरलता के कारण उन पर भरोसा करना शुरू कर सकते हैं.

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

9. मैजिक नंबर्स और हार्ड कोडेड वैल्यू को क्लीन करें

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

 .class1 स्थिति: निरपेक्ष; शीर्ष: 28 पीएक्स; बायां: 15.5%; 

जादू की संख्या के साथ मुख्य समस्या यह है कि वे हैं संयोग का, और वे अवतार लेते हैं “क्रमचय द्वारा प्रोग्रामिंग” antipattern। रिफैक्टरिंग प्रक्रिया के दौरान हमें अपने कोड से इन मनमाने नियमों को हटाने की आवश्यकता होती है, और जहां संभव हो, वहां उन्हें अधिक उचित समाधानों के साथ प्रतिस्थापित किया जाता है.

अंगूठे का एक ही नियम लागू होता है हार्ड-कोडेड मान भी। शायद हार्ड-कोडित मूल्यों की सबसे लगातार घटना लाइन-ऊंचाई नियमों में पाई जा सकती है:

 / * खराब, हमें .class1 * / .class1 font-size: 20px; लाइन-ऊंचाई: जीपीएक्स;  / * अच्छा, लचीला लाइन-ऊंचाई नियम सुरक्षित रूप से बाल तत्वों द्वारा उपयोग किया जा सकता है * / / .class1 font-size: 20px; पंक्ति की ऊंचाई: 1.2; 

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

10. रिफैक्टर इकाइयाँ और मूल्य

भविष्य में रखरखाव और डिबगिंग को आसान बनाने के लिए, और विफलताओं से बचने के लिए जो विभिन्न इकाइयों का उपयोग करने से बच सकते हैं, जैसे कि एम तथा पिक्सल, एक साथ, हम करने की जरूरत है हम कैसे सापेक्ष और निरपेक्ष मूल्यों का उपयोग करते हैं, इसके बारे में सुसंगत नियमों के लिए छड़ी.

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

यदि हम अपनी साइट पर बहुत सारे समान रंगों का उपयोग करते हैं, तो यह भी एक बुद्धिमान बात हो सकती है रंग योजना को युक्तिसंगत बनाएं हमारे द्वारा नियोजित रंगों की संख्या को कम करके। (यहां व्यावहारिक तरीके से वेबसाइट रंग योजना चुनने का तरीका बताया गया है।)