परमाणु सीएसएस - आदेश और सफाई

कोड की पहली पंक्तियों से, प्रत्येक व्यक्ति इसे सही ढंग से व्यवस्थित करने और समग्र रूप से कार्यक्षेत्र के अनुकूलन के महत्व को समझना शुरू कर देता है।

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

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

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

अगर हम सीएसएस के बारे में बात करते हैं, तो हम विश्वास के साथ कह सकते हैं - हम में से प्रत्येक एक निश्चित पद्धति का उपयोग करता है, होशपूर्वक या नहीं। यहां तक ​​कि अगर कोई व्यक्ति कुछ नियमों और मानकों का उपयोग नहीं करता है, तो उसके पास अभी भी अपनी आदतें हैं और लगातार चालें दोहरा रहा है।

कोड लिखने के तरीकों को आम तौर पर स्वीकार और मानकीकृत करने की आवश्यकता नहीं है, कुछ और अनिवार्य होना चाहिए - उन्हें अनुमानित होना चाहिए।

कार्यप्रणाली की सूची जिस पर आपको ध्यान देना चाहिए वह इतनी लंबी नहीं है:

-BEM,
-Smacss,
-OOCSS,
-MCSS,
-एटॉमिक सीएसएस

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

लगभग परमाणु सीएसएस

ऐसे समय थे जब इंटरफ़ेस बनाने के चरण में परियोजनाओं की भारी संख्या की जड़ निर्देशिका तीन फ़ाइलों और दो फ़ोल्डरों की तरह दिखती थी:

>fonts >img -index.html -style.css -script.js 

लेकिन यह सादगी भ्रामक रूप से सुविधाजनक लग सकती है, वास्तव में, इन तीन फाइलों में से कम से कम दो में कुछ भयानक हो रहा था।

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

इस समस्या का पहला समाधान निम्नलिखित था:

• "re-use.css" नामक एक फ़ाइल बनाना,
• इस फ़ाइल में निर्देशों का निर्माण, जो सिद्धांत में एक से अधिक चयनकर्ताओं द्वारा आवश्यक हो सकता है,
• एक ही निर्देश में विभिन्न चयनकर्ताओं को जोड़ना।

ऐसा लग रहा था:

 ... .class { display: inline-block;} .class { text-transform: uppercase;} ... 

और बाद में निम्नलिखित स्वीकार किए जाते हैं:

 ... .menu-link, .primary-button, .form-button, .footer-link, .social-link { display: inline-block;} ... 

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

...

 .inline-block { display: inline-block;} .block {display: block;} .uppercase {text-transform: uppercase;} 

Html फ़ाइलों में, बड़ी संख्या में वर्गों के साथ टैग अजीब लगे, लेकिन यह समाधान मुझे काफी स्वीकार्य लगा:

 <aside class=”sidebar fixed left top w-30 h-100 main-fill”></aside> 

एक नज़र में यह समझने के लिए पर्याप्त है कि स्क्रीन के बाईं ओर निश्चित स्थिति के साथ यह एक साइड कॉलम है, इसकी चौड़ाई का 30% और इसकी ऊँचाई का 100% मुख्य रंग से भरा है।

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

यह एक लगभग परमाणु और लगभग सुविधाजनक दृष्टिकोण था। कई कमियों ने उन्हें सहज होने से रोका, जिनमें से सबसे महत्वपूर्ण निम्नलिखित परिस्थितियां थीं:

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

और फिर दो चीजें बचाव में आईं जिन्होंने सभी समस्याओं को हल करने में मदद की - यह प्रीप्रोसेसर और टेम्पलेट इंजन है।

उनकी मदद से, मैंने अपनी कार्यप्रणाली को संशोधित किया और लेआउट को सुखद और सुविधाजनक बनाया।

लगभग सही सीएसएस

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

इसलिए, मैंने जो पहली चीज़ की, वह अतिरिक्त कक्षाएं लिख रही थी जो @ कपड़ा निर्देश के उपयोग से वास्तविक परमाणुओं की तरह दिख रही थीं:

 .flex { display: flex; flex-wrap: no-wrap; } .flex-jc-center { @extend .flex; justify-content: center; } .flex-ai-center { @extend .flex; align-items: center; } 

मुझे यह विचार पसंद आया, और @ टेक्स्ट के निर्देश के कारण परमाणु नाभिक जैसा दिखता था, जिसके बगल में अतिरिक्त निर्देश थे।

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

 .header { @extend .fixed; @extend .w-100; @extend .main-fill; @extend .left; @extend .top; @extend .flex-ai-center; @extend .z-top; } 

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

प्रीप्रोसेसर क्षमताओं ने मुझे फिर से इसका सामना करने में मदद की, जिसकी मदद से मैंने कुछ फ़ंक्शन लिखे और चरों को जोड़ा।

सबसे पहले, मैंने ग्राफिक प्रोजेक्ट्स का विस्तार से अध्ययन किया, जो मुझे डिजाइनरों से प्राप्त हुए और कई प्रतिमानों का पता चला:

• प्रत्येक परियोजना के लिए रंगों की संख्या,
• फोंट की संख्या
• पाठ और शीर्षकों के लिए विभिन्न आकारों की संख्या,
• बार-बार इंडेंटेशन (वर्गों, बटन, आदि के लिए)

पहला कदम आवश्यक कक्षाएं बनाने के लिए कार्यों और मिश्रणों को लिखना था:

 //    px  em @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em }; 

 //       $text-size: ( l: 18, m: 16, s: 14, xs: 12 ); 

 @mixin emFonts($list, $n) { //  $list – , n –        . @each $status, $size in $list { //  -       &-#{$status} { font-size: em($size - $n); //     } } } 

अब हम किसी भी स्थान पर मिश्रण और कार्यों के इस संयोजन को हमारे लिए सुविधाजनक कह सकते हैं:

 .txt { @include emFonts($text-size, 0) } 

और आउटपुट में हमें विभिन्न आकारों के पाठ के लिए 4 कक्षाएं मिलती हैं:

 .txt-m { font-size: 1.125em; } .txt-s { font-size: 1em; } 

इसी तरह, हेडिंग साइज़, टेक्स्ट और फिल कलर्स, फोंट आदि के लिए फंक्शन बनाए और बुलाए जाते हैं।

यही है, प्रत्येक परियोजना पर चर के लिए मूल्यों को भरने के साथ काम शुरू होता है, और कक्षाएं और फ़ंक्शन स्वयं एक परियोजना से दूसरे में स्थानांतरित होते हैं।

साँचा इंजन।

मुझे लगता है कि आप में से कई लोग टेम्प्लेटिंग का उपयोग करते हैं, और सबसे अधिक संभावना है कि यह पग (पहले जेड कहा जाता है)।

परमाणु टाइपसेटिंग के लिए, यह 3 चीजों के लिए आवश्यक है:

• hagfish
• चर
• चक्र

पग हमें पूरी तरह से HTML कोड के बोझिल माइक्रोक्लास से बचाता है, क्योंकि हम निम्नलिखित कोड को बदल सकते हैं:

 … <ul class=”menu__list flex-ai-center w-100 relative “> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>first</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>second</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>third</li> </ul> 

संपादन के लिए सुविधाजनक:

 -let menuItemClasses = 'menu__item m-color m-font txt-s inline-block bold-border' //            ul li(class=`${menuItemCLasses}`) frst li(class=`${menuItemCLasses}`) second li(class=`${menuItemCLasses}`) third ... </ul> 

या किसी अन्य अवतार में, एक लूप का उपयोग करके:

 let menuItems = ['first', 'second', 'third'] ul -for(let item of menuItems) { li(class=”menu__item m-color m-font txt-s inline-block bold-border”) -} 

यह कम सुविधाजनक नहीं है, क्योंकि आवश्यक कक्षाओं के साथ लाइन एक से अधिक बार दोहराई नहीं जाती है।

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

निष्कर्ष

अंत में, मैं निम्नलिखित कहना चाहूंगा:

"लगभग परमाणु कार्यप्रणाली" का उपयोग शुरू करने से पहले, मैंने एक लंबे समय के लिए smacss और उसके बाद BEM का उपयोग किया। नतीजतन, बीईएम से मैंने केवल कक्षाओं के लिए नाम छोड़ दिया है, जिसमें इंडेंट और साइज का विवरण और फाइलों और फ़ोल्डरों के भंडारण के पदानुक्रम की आवश्यकता होती है। तैयार कक्षाओं और कार्यों का एक सेट, मैं एक पुस्तकालय के रूप में परियोजना से जुड़ता हूं।

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