🤣 👸🏽 👨🏼‍🎓 हम css कोड के क्रम में रखते हैं। यांडेक्स अनुभव 🤜🏻 ♀️ 🏍️

सभी को नमस्कार!

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

जब बहुत से लोग, विभिन्न उपकरणों का उपयोग करते हैं, तो सीएसएस लिखें और संपादित करें, समय के साथ यह सीएसएस बहुत भ्रामक हो सकता है, असंगत और आम तौर पर खराब लगने लगता है। उदाहरण के लिए, किसी के लिए विक्रेता के उपसर्गों को एक क्रम में लिखना अधिक सुविधाजनक है, किसी के लिए दूसरे में, कोई व्यक्ति url के चारों ओर उद्धरण रखता है, कोई नहीं करता है, और कोई रिलीज़ के लिए एक जरूरी बग को ठीक कर सकता है, उदाहरण के लिए, लिखना position: relative

संपत्ति ब्लॉक की शुरुआत में position: relative

, यह देखते हुए कि color

और box-shadow

बीच कहीं नीचे, पहले से ही position: absolute

, और लंबे समय से सोच रहा था कि इसके लिए कुछ भी क्यों नहीं काम करता है।

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

हमने इसे कैसे हासिल किया है इसे कटौती के तहत पढ़ा जा सकता है।

पहला कदम

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

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

सामान्य तौर पर, यह किसी भी तरह से बहुत अधिक नहीं दिखता है, इसमें बहुत समय लगता है और, सबसे महत्वपूर्ण बात यह है कि यह डेवलपर्स को वास्तव में परेशान करता है।

डेवलपर्स को खुश रखने के लिए, मुझे कुछ अन्य समाधान की तलाश करनी थी, और यह पाया गया।

रोबोट के बारे में थोड़ा सा

एक पुराना रोबोट था - CSScomb , जिसने हमारे कार्य का सबसे महत्वपूर्ण हिस्सा हल किया:

वह जानता था कि किसी दिए गए क्रम में गुणों को कैसे छाँटना है। लेकिन उनकी कई कमियां थीं:

इसके अलावा, वह कुछ भी नहीं जानता था, लेकिन वह वास्तव में उद्धरण चिह्नों का उपयोग करना चाहता था जहां इसे हटाने के लिए आवश्यक नहीं था, और सीढ़ी के साथ विक्रेता उपसर्गों का निर्माण करना ...
यह PHP और regexp में लिखा गया था, और विस्तार के लिए भी प्रदान नहीं किया गया था।

और यद्यपि, निश्चित रूप से, js-प्रोग्रामर्स के वातावरण में PHP c ++ की तुलना में थोड़ा बेहतर है, यह अभी भी काफी नहीं है कि हम क्या चाहते हैं।

हमारी टीम से मिहंगा ने पूरी बात को देखा और एक ऐसा उपकरण बनाने का फैसला किया जो इन कमियों से रहित होगा: वह कई अलग-अलग काम कर सकता है, जेएस में लिखा जाएगा, और आसानी से विस्तार कर सकता है। और यद्यपि Yandex कर्मचारी सक्रिय रूप से विकास में शामिल हैं, CSScomb.js एक पूर्ण विकसित ओपन सोर्स प्रोजेक्ट है जो लंबे समय से यैंडेक्स से परे चला गया है।

मिलिए CSScomb.js - यह पुराने CSScomb का एक नया संस्करण है जो बहुत सारी शांत चीजें कर सकता है।

यह कैसा दिखता है?

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

 .block { -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); z-index: 2; position: absolute; height: 2px; width: 2px; color: #FFFFFF; }

यह बहुत नहीं दिखता है, और कोड शैली से बिल्कुल भी नहीं है, और इसलिए जब हम प्रतिबद्ध होने की कोशिश करते हैं, तो हम इसे देखेंगे:

 % git commit block.css -m"Add My awesome css" Code style errors found. ! block.css

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

इस तरह के संदेश को देखने के बाद, हम परेशान नहीं हैं, लेकिन बस सब कुछ ठीक करने के लिए CSScomb.js से पूछें:

 % csscomb block.css

अब, अब एक और बात:

 .block { position: absolute; z-index: 2; width: 2px; height: 2px; color: #fff; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }

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

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

और उसके निओन्का के अंदर

इस तरह की प्रणाली में दो भाग होते हैं - CSScomb स्वयं और एक पूर्व-प्रतिबद्ध हुक जो इसका उपयोग करता है। मैं अगले भाग में हुक के बारे में बात करूँगा, लेकिन इसमें मैं CSSComb.js के काम करने के तरीके पर ध्यान केन्द्रित करूँगा

CSScomb.js दो चीजों पर आधारित है: प्लगइन सिस्टम और गोनज़ेल्स-पे सीएसएस पार्सर एक बहुत ही शांत चीज है जो न केवल शुद्ध सीएसएस के साथ काम कर सकती है, बल्कि सास या लेस जैसे प्रीप्रोसेसर के साथ भी काम कर सकती है।

शुरुआत करते हैं पार्सर से। यह css कोड के खिलाफ सेट है और इसके आधार पर AST बनाता है। उदाहरण के लिए, इसके लिए:

 .block { position: absolute }

एएसटी इस तरह दिखेगा:

 [ "stylesheet", [ "ruleset", [ "selector", [ "simpleselector", [ "class", [ "ident", "block" ] ], [ "s", "\n" ] ] ], [ "block", [ "s", "\n " ], [ "declaration", [ "property", [ "ident", "position" ] ], [ "propertyDelim" ], [ "value", [ "s", " " ], [ "ident", "absolute" ] ] ], [ "s", "\n" ] ] ], [ "s", "\n" ] ]

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

ऊपर के उदाहरण में, हमने absolute

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

 ... [ "block", [ "s", "\n " ], [ "declaration", [ "property", [ "ident", "position" ] ], [ "propertyDelim" ], [ "value", [ "s", " " ], [ "ident", "absolute" ] ] ], >>>[ "declDelim" ],<<< [ "s", "\n" ] ...

सभी प्लगइन्स के बाहर काम करने के बाद, एक ही गोंजालेस-पे एएसटी का उपयोग करके सीएसएस कोड में वापस आ जाता है,

और भूला अर्धविराम जगह में है:

 .block { position: absolute; }

इसका उपयोग कैसे शुरू करें?

पहला कदम

एक तरह से या किसी अन्य, आपको अपनी परियोजना के आधार पर CSScomb.js जोड़ने की आवश्यकता है।

यदि प्रोजेक्ट npm का उपयोग करता है, तो आपको इसे पैकेज में शामिल निर्भरता में जोड़ना होगा। json

 { ... "devDependencies": { ... "csscomb": "2.0.4", ... } ... }

दूसरा कदम

प्लगइन्स को कोड को उस रूप में लाने के लिए जिसकी हमें ज़रूरत है, हमें प्रोजेक्ट के रूट में प्लग इन को कॉन्फ़िगरेशन फ़ाइल में डालना होगा । प्रत्येक प्लगइन क्या करता है और इसके क्या विकल्प हैं, इस पर विवरण यहां पाया जा सकता है ।

CSScomb.js कुछ हद तक यह स्वचालित रूप से कर सकते हैं, क्योंकि यह किसी भी मौजूदा सीएसएस-कू के आधार के रूप में, एक विन्यास उत्पन्न कर सकता है।

 csscomb -d example.css > .csscomb.json

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

अंतिम चरण

आपको CSScomb.js को कमिट करने से पहले linter मोड में रन करने की आवश्यकता है, साथ ही jscs / jshint-groups या अन्य टूल जो आमतौर पर कमिट करने से पहले चलते हैं। अगर git और linux / BSD का उपयोग कर रहे हैं, तो यह कुछ इस तरह दिख सकता है:

 #!/usr/bin/env bash PATCH_FILE="working-tree.patch" NPM_BIN="./node_modules/.bin" function cleanup { exit_code=$? if [ -f "$PATCH_FILE" ]; then patch -p0 < "$PATCH_FILE" rm "$PATCH_FILE" fi exit $exit_code } #     trap cleanup EXIT SIGINT SIGHUP #   git diff > "$PATCH_FILE" --no-prefix #     git checkout -- . #       ,     git_cached_files=$(git diff --cached --name-only --diff-filter=ACMR | xargs echo) if [ "$git_cached_files" ]; then #  CSScomb.js $NPM_BIN/csscomb -v -l $git_cached_files || exit 1 fi

इस हुक में एक दिलचस्प विशेषता है। ऐसा लगता है, क्यों CSSComb.js को तुरंत मरम्मत मोड में नहीं चलाया जाता है और फिर स्वचालित रूप से चुपचाप प्रतिबद्ध होता है? ज्यादातर मामलों में, यह वास्तव में ठीक काम करता है, लेकिन उस स्थिति में समस्याएं उत्पन्न होती हैं जब हम फ़ाइल में कई संपादन करते हैं, और हम उनमें से केवल एक को करना चाहते हैं ( git add -p

)। इस स्थिति में, यदि हमें उस फ़ाइल के संस्करण में कोई त्रुटि मिलती है जो कि प्रतिबद्ध है, तो अप्रिय स्थिति शुरू होती है:

हम उस फ़ाइल के संस्करण पर CSScomb.js चला सकते हैं जिसे हम करने जा रहे हैं, और कुछ स्थितियों में पैच को लागू करते समय टकराव हो जाता है।
या वर्तमान फ़ाइल पर CSScomb.js को संपूर्ण रूप से चलाएं, लेकिन जिन संपादनों में हम अभी तक कमिटमेंट नहीं करना चाहते हैं, उनमें गलत कोड सहित कुछ भी हो सकता है।

और सामान्य तौर पर, यह बहुत अच्छा नहीं है जब फ़ाइल अप्रत्याशित रूप से अपने आप बदल जाती है। इसलिए, हम इस निष्कर्ष पर पहुंचे कि डेवलपर द्वारा CSScomb.js लॉन्च किया जाना चाहिए।

हो गया!

वह सब है। अब CSScomb.js कोड शैली के अनुसार कोड को कमिट नहीं करने देगा और कोड को एक कमांड में वांछित फॉर्म में लाना संभव करेगा।

यह एक सरल विचार है और एक सरल उपकरण कोड को क्रम में रखने में मदद करता है, साथ ही डेवलपर्स समय और तंत्रिकाओं को भी बचाता है।

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

हम css कोड के क्रम में रखते हैं। यांडेक्स अनुभव

पहला कदम

रोबोट के बारे में थोड़ा सा

यह कैसा दिखता है?

और उसके निओन्का के अंदर

इसका उपयोग कैसे शुरू करें?

पहला कदम

दूसरा कदम

अंतिम चरण

हो गया!

More articles: