कोड स्टाइल गाइड के साथ सीएसएस का अनुकूलन कैसे करें

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

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

उपयोग में उचित कोड शैली गाइड लाना हमें एक के साथ प्रदान करता है बेहतर संगठित, सुसंगत कोड आधार, बेहतर कोड पठनीयता, और अधिक बनाए रखने योग्य कोड. यह एक संयोग नहीं है कि प्रमुख तकनीकी कंपनियां, जैसे कि Google, AirBnB, या Dropbox उनका अच्छा उपयोग करती हैं.

इस पोस्ट में हम सीएसएस कोड स्टाइल गाइड की मदद से अपने सीएसएस को स्मार्ट तरीके से कैसे अनुकूलित कर सकते हैं, इस पर एक नज़र डालेंगे.

कोड स्टाइल गाइड्स बनाम पैटर्न लाइब्रेरी

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

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

दोनों कोड स्टाइल गाइड और पैटर्न लाइब्रेरी में स्टाइल की रणनीति शामिल है, लेकिन एक अलग तरह की। Bootstrap, Zurb Foundation, BBC की ग्लोबल एक्सपीरियंस लैंग्वेज या MailChimp की पैटर्न लाइब्रेरी जैसी पैटर्न लाइब्रेरी, हमें प्रीमियर सीएसएस क्लासेस, टाइपोग्राफी, कलर स्कीम, कभी-कभी ग्रिड सिस्टम और अन्य डिज़ाइन पैटर्न के साथ UI प्रदान करती हैं।.

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

ध्यान दें कि लिविंग स्टाइल गाइड जेनरेटर, जैसे केएसएस, स्टाइलडाउन या पैटर्न लैब, पैटर्न लाइब्रेरी तैयार करें तथा नहीं कोडिंग स्टाइल गाइड. जबकि पैटर्न लाइब्रेरी भी अत्यधिक उपयोगी होती है और वेब डेवलपमेंट प्रक्रिया को बढ़ाती है, वे हमें कोड को स्वयं ऑप्टिमाइज़ करने की अनुमति नहीं देते हैं.

अपनी सीएसएस कोड स्टाइल गाइड बनाएँ

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

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

उदाहरण के लिए AirBnB डेवलपर्स को आसानी से पचने योग्य तरीके से अच्छे और बुरे उदाहरण दिखाता है:

फ़ाइल संरचना

सबसे पहले, हमें एक तर्क का पता लगाने की आवश्यकता है जिसके अनुसार हम अपनी सीएसएस फ़ाइलों को व्यवस्थित करेंगे। छोटी परियोजनाओं के लिए एक सीएसएस फ़ाइल पर्याप्त हो सकती है, लेकिन बड़े लोगों के लिए कोड को तोड़ने के लिए हमेशा बेहतर होता है, तथा बाद में उत्पादन में अलग फ़ाइलों को समाप्‍त करें.

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

घोंसला करने की क्रिया

CSS में नेस्टिंग एक बेहतरीन फीचर है, लेकिन कई बार यह नियंत्रण से बाहर हो सकता है। कोई भी विशेष रूप से निराश डिबगिंग प्रक्रिया के बीच में, विशेष रूप से खुश नहीं लगता है, इस तरह के अतिरिक्त लंबे चयनकर्ताओं में टकरा रहा है:

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad; 

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

नामकरण नियम

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

चयनकर्ता के नामकरण में उपयोग की जाने वाली चार सामान्य शैलियाँ हैं .लोअरकेस, .under_scores, .चित्तीदार तों, तथा .lowerCamelCase. उनमें से किसी को चुनना ठीक है लेकिन हमें पूरे प्रोजेक्ट में एक ही तर्क का पालन करने की आवश्यकता है.

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

अतिरिक्त अगर हम भविष्य में इसका रंग लाल से कुछ और बदलना चाहते हैं, तो हम इसे आसानी से बिना किसी परेशानी के कर सकते हैं. बीईएम (ब्लॉक, तत्व, संशोधक) सम्मेलन जैसे सीएसएस नामकरण सम्मेलनों का भी प्रीमियर होता है एक सुसंगत नामकरण संरचना में परिणाम अद्वितीय और सार्थक नामों के साथ.

प्रारूपण नियम

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

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

घोषणा आदेश

आदेशित चीजें हमेशा देखने में आसान होती हैं, और आदेश सीएसएस घोषणाओं (उनके मूल्यों के साथ गुण) एक नियम के अनुसार जो एक बेहतर संगठित कोड में परिणाम देता है.

उदाहरण के लिए वर्डप्रेस की संपत्ति के आदेश के नियमों पर एक नज़र डालें, यह निम्नलिखित सरल लेकिन तार्किक आधार रेखा को परिभाषित करने के लिए परिभाषित करता है जिसमें गुण उनके अर्थ द्वारा समूहीकृत होते हैं:

1. प्रदर्शन
2. पोजिशनिंग
3. बॉक्स मॉडल
4. रंग और टाइपोग्राफी
5. अन्य

इकाइयों और मूल्यों

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

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

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

.वर्ग // अच्छा मार्जिन: 0; // खराब मार्जिन: 0px; // खराब मार्जिन: 0em; // खराब मार्जिन: 0rem; 

टिप्पणी करते हुए

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

उदाहरण के लिए मुहावरेदार सीएसएस एक सार्थक टिप्पणी प्रणाली स्थापित करता है जो कुछ बुनियादी ASCII कला का भी उपयोग करता है, और सुंदर ढंग से आयोजित परिणाम में: