🌳 🤲🏿 👨🏽‍🏭 CSScomb: बेसिक प्रीप्रोसेसर और जिंजरब्रेड समर्थन के साथ सीएसएस गुण ⏺️ 🏳️‍🌈 🤷🏼

अभी कल ही स्मैशिंग मैगज़ीन पर CSScomb के बारे में एक लेख प्रकाशित हुआ। चूंकि मैंने मूल रूप से इसे रूसी में लिखा था, और फिर इसका अंग्रेजी में अनुवाद किया, इसलिए मैंने हैबे में मूल संस्करण प्रकाशित करने का फैसला किया।

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

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

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

और अब उन नर्ड और पूर्णतावादियों के लिए कुछ विवरण जो इसे पसंद करते हैं।

आपको CSScomb की आवश्यकता क्यों है?

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

CSScomb बहुत सुविधाजनक है और पेशेवर काम में मदद करता है। यहां कुछ कारण बताए गए हैं कि मैं आपको इस सीएसएस सॉर्टिंग टूल का उपयोग करने की सलाह देता हूं।

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

कैसे छांटें?

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

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

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

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

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

यदि आवश्यक हो, तो मैंने दो अतिरिक्त विकल्प प्रदान किए:

सॉर्ट क्रम को बदलने की क्षमता यदि आप पहले से ही एक अलग का उपयोग कर रहे हैं।
एक खाली स्ट्रिंग के साथ संपत्ति समूहों को तोड़ें।

CSS गुणों के क्रम को सेट करने के लिए, सूचीबद्ध गुणों के साथ एक आयामी JSON सरणी का उपयोग किया जाता है। सॉर्ट ऑर्डर बदलना उतना ही आसान है जितना कि इसके 200 तत्वों में से स्वैप करना। मुझे आशा है कि आप ऐसा करने के लिए पर्याप्त प्रेरित नहीं हैं, इसलिए मैंने डिफ़ॉल्ट रूप से सबसे तर्कसंगत विकल्प तैयार किया।

अभी भी समूहों में गुणों को विभाजित करने की संभावना है। इस तरह:

 #free .pussy-riot { position:absolute; margin:1em 0; border:20px solid black; background:green; box-shadow:0 2px 10px #666; color:red; letter-spacing:3px; font-size:72px; }

ऐसा करने के लिए, आपको दो आयामी गुणों के क्रम के साथ एक-आयामी सरणी बनाने की आवश्यकता है। कुछ इस तरह:

 [ [ "position", ... ], [ "margin", "padding", "border", ... ], ... ]

CSScomb क्या कर सकता है?

हालाँकि मैं व्यक्तिगत रूप से "एक लाइन - एक संपत्ति" नियम का पालन करता हूं, कंघी पूरी तरह से ऑनलाइन / मल्टीलाइन और कोड फॉर्मेटिंग के मामलों में सर्वव्यापी है। उसका कार्य केवल गुणों के क्रम को बदलना है।

सभी समान गुणों को उसी क्रम में एक के बाद एक क्रमबद्ध किया जाएगा जिसमें वे उसी चयनकर्ता के भीतर मिले थे।

सभी अज्ञात गुण (जो क्रमबद्ध क्रम में नहीं हैं) को उसी क्रम में सूची के अंत में स्थानांतरित किया जाएगा जिसमें उनका चयन उसी चयनकर्ता के भीतर हुआ था।

अलग-अलग, मैंने वास्तविक CSS कोड की विशेषताओं पर ध्यान दिया। कंघी एक उत्कृष्ट काम करती है:

एक बहु-पंक्ति मान के साथ छँटाई गुणों के साथ
हैक के साथ (आप उन्हें दुरुपयोग नहीं करते हैं, ठीक है?)
संपत्ति के साथ ओवरराइड, कभी-कभी अनजाने में, और कभी-कभी जानबूझकर गिरावट का समर्थन करने के लिए लिखा जाता है
कोई अंतिम अर्धविराम से पहले }
IE के लिए expression के साथ
datauri , HTML entities , @rules और अन्य लेक्सिकल सीएसएस के निर्माण के साथ
और वह सब जो एक जटिल परियोजना में पाया जा सकता है।

कंघी न केवल टिप्पणी की गई संपत्तियों को हटाती है, बल्कि उन्हें छांटती भी है जैसे कि उन्हें टिप्पणी नहीं दी गई है (टिप्पणियाँ सहेजी गई हैं)। और उसी समय, यह टिप्पणियों में पाठ से घोषणाओं को अलग करता है।

छँटाई से पहले कुछ टिप्पणियों के साथ एक उदाहरण दिया गया है:

 h1 { background: #faf0e6; /* border: 2px dashed #800000; color: #a0522d; */ padding: 7px; }

और यहाँ यह CSScomb प्रसंस्करण के बाद है:

 h1 { padding: 7px; /* border: 2px dashed #800000; */ background: #faf0e6; /* color: #a0522d; */ }

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

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

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

 -webkit-browser:cool; -moz-browser:cool; -ms-browser:cool; -o-browser:cool; browser:kewl;

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

वास्तविक उत्पाद और योजनाएँ

अब CSScomb कमांड लाइन के लिए न केवल एक ऑनलाइन डेमो और संस्करण है, बल्कि विभिन्न संपादकों के लिए प्लगइन्स का एक पूरा सेट भी है:

उदात्त पाठ 2 (पैकेज नियंत्रण में)
TextMate
कोडा
कोडा २
एस्प्रेसो 2
इंटेलीज आईडिया
WebStorm
PyCharm
नोटपैड ++
शक्ति

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

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

एक विवरण के साथ एक ऑनलाइन सॉर्टर और विस्तृत परीक्षण समूहों सहित सभी आवश्यक जानकारी, CSScomb.ru परियोजना की वेबसाइट पर है ।

मुझे उम्मीद है कि CSScomb आपके कोड की गुणवत्ता को थोड़ा बेहतर बनाने में मदद करता है, ओवरसाइट त्रुटियों की संख्या कम है, और आप खुश हैं।

CSScomb: बेसिक प्रीप्रोसेसर और जिंजरब्रेड समर्थन के साथ सीएसएस गुण

आपको CSScomb की आवश्यकता क्यों है?

कैसे छांटें?

CSScomb क्या कर सकता है?

वास्तविक उत्पाद और योजनाएँ

More articles: