मॉड्यूलर सीएसएस और कोड समर्थन मुद्दों पर कुछ विचार

सवाल क्या है?

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

ऐसा लगता है कि तकनीकी विकास के युग में, जब हर दिन हम नए और नए ढांचे, पूर्वप्रक्रमक, टेम्पलेट इंजन और अन्य चीजों के साथ सामना कर रहे हैं, तो समस्याएं बिल्कुल नहीं उठनी चाहिए। स्मार्ट डेवलपर्स शक्तिशाली और विस्तार योग्य साइट बनाने की सुविधा के लिए शांत "सुविधाओं" का एक गुच्छा लेकर आए हैं। लेकिन CSS में इन tools का सही तरीके से उपयोग कैसे करें? और कठिनाइयाँ क्या हैं?

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

हर्ष वास्तविकता

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

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

लेकिन अगर आपको वहां कुछ वर्गों के लिए नए डिजाइन के हिस्से को एकीकृत करके एक अच्छी मात्रा में संपादन करने की आवश्यकता है, तो आप इसके लिए कितना समय देंगे?

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

SASS हमारी समस्याओं का समाधान करेगी

यह सब जानकारी पचाने के बाद, एक विशिष्ट वेब डेवलपर यह कहेगा कि वह स्थिति से बाहर है: CSS प्रीप्रोसेसर का उपयोग करें। वहाँ और प्रतिरूपकता और आराम और सभी।

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

अलग-अलग फ़ाइलों में शैलियों का टूटना : शीर्षलेख।पास, main.sass, एनीमेशन.sass, आदि। यह कितना "शानदार" है। और प्रभावी नहीं है। इस तरह की अगली फाइल को खोलना आपको शैली लाइनों के एक ही समूह में आता है।

विकल्प क्या हैं?

डेवलपर्स अपनी कक्षाओं को कभी-कभी कैसे कॉल करते हैं, इस बारे में चुप रहना बेहतर है, साथ ही साथ शैलियों के घोंसले की श्रृंखला के बारे में भी। मुझे लगता है कि इस क्षेत्र में घूमने वाले हर व्यक्ति ने बीईएम के बारे में कुछ सुना है और सही ढंग से नामकरण कक्षाओं के महत्व को समझता है। इसके साथ, यह सभी समस्याओं को हल करने के लिए शुरू करने लायक है।

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

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

अब आप तैयार हैं।

अब अनिवार्य रूप से

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



उदाहरण के लिए, साइट में प्रवेश करने के इस रूप में, हम कई घटकों को अलग कर सकते हैं:

1. खुद ही लॉगिन करें
2. इनपुट फ़ील्ड
3. बटन सबमिट करें
4. चेकबॉक्स

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

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

घटक इंटर्न

जैसा कि मैंने कहा, किसी साइट पर कई बटन हो सकते हैं, अलग-अलग रंग, अलग-अलग इंडेंट के साथ, यह सब डेटा है और इस डेटा को शैलियों से अलग करना बहुत ही चालाक है। जो मैं करने का प्रस्ताव करता हूं।

मैं प्रत्येक घटक को तीन संस्थाओं के रूप में प्रस्तुत करने का प्रस्ताव करता हूं: vars, निर्माता और crait। सरल शब्दों में, यह डेटा है, एक एक्शन क्रिएटर (इस डेटा को प्रबंधित करने के तरीके) और एक स्टाइल क्रिएटर। अब, पहले चीजें पहले।

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

निम्नलिखित चित्र तीनों संस्थाओं के परस्पर क्रिया को दर्शाता है।



क्या यह सब अपने सिर में डालना मुश्किल है? एक बटन के मूल घटक बनाने के उदाहरण पर विचार करें - "बटन"। हम एससीएसएस का उपयोग प्रीप्रोसेसर के रूप में करेंगे।

जैसा कि आप पहले से ही समझते हैं, नए बटन फ़ोल्डर में हम तीन फाइलें बनाते हैं: _vars.scss, _crait.scss, _maker.scss।

_vars.scss

$button_size:( sm:5px 20px, md:15px 20px ); $button_color:( white:#ffffff ); $button_back:( blue: #00e5e5 ); /* This is component config, it must be below other variables */ $button_config:( padding:$button_size, color:$button_color, background:$button_back ); 

जैसा कि हम देखते हैं कि डेटा को एक सहयोगी सरणी के रूप में प्रस्तुत किया गया है। सभी व्यक्तिगत शैलियों को मुख्य बटन_कॉन्फ़िग सेट में शामिल किया गया है। नई शैली बनाने के लिए, डेवलपर को केवल एक नई सरणी बनाने की आवश्यकता है, इसे आवश्यक मानों के साथ भरें और इसे button_config से कनेक्ट करें।

_creater.scss:

 @import "vars"; @import "maker"; .button{ @include InitialComponent($button_config); } 

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

निष्पादन का परिणाम शैलियों होगा:

 .button_padding_sm { padding: 5px 20px; } .button_padding_md { padding: 15px 20px; } .button_color_white { color: #ffffff; } .button_background_blue { background: #00e5e5; } 

और यहाँ सफलता क्या है?

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

और अगर आपको एक नया बटन बनाने की आवश्यकता है?

फिर यह और भी आसान है, हम आवश्यक शैलियों को पहले से तैयार किए गए एरे में लिखते हैं या एक नया बनाते हैं और इसे वहां कॉन्फ़िगर में जोड़ते हैं और कक्षाएं बनाई जाती हैं।

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

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