🎥 ☝🏻 🧖 इन 5 सिद्धांतों के साथ अपने सीएसएस में सुधार करें। 🍣 👩🏼‍⚖️ 👩‍👩‍👦‍👦

CSS लिखना काफी सरल और सरल प्रक्रिया है, फिर इसके लिए कुछ और सिद्धांतों और सर्वोत्तम प्रथाओं की आवश्यकता क्यों होती है?

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

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

नामकरण सिद्धांत

"कंप्यूटर विज्ञान में, केवल दो जटिल चीजें हैं: कैश अमान्य और नामकरण" - फिल कारटन

अपने CSS चयनकर्ताओं को सही ढंग से नाम देना और संरचित करना, आपके CSS को अधिक पठनीय, संरचित और स्वच्छ बनाने के लिए पहला कदम है। नामकरण सम्मेलन में नियमों और प्रतिबंधों को परिभाषित करना आपके कोड को मानकीकृत, विश्वसनीय और समझने में आसान बनाता है।

यही कारण है कि BEM (ब्लॉक-एलिमेंट- मॉडिफ़ायर ) , SMACSS (सीएसएस के लिए स्केलेबल और मॉड्यूलर आर्किटेक्चर) और OOCSS (ऑब्जेक्ट ओरिएंटेड सीएसएस) जैसी अवधारणाएं कई सीमांत डेवलपर्स के बीच लोकप्रिय हैं ।

कम विशिष्टता सिद्धांत

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

 /*     */ .card {} /*     */ .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {}

ब्राउज़र और विशिष्टता

निम्न विशिष्टता के सिद्धांत का पालन करने के लाभों में से एक प्रदर्शन है। ब्राउज़र सीएसएस को दाएँ से बाएँ से पार्स करते हैं।

आइए निम्नलिखित उदाहरण पर एक नज़र डालें:

 .blog-list .card img {}

ब्राउज़र्स चयनकर्ता को "इस प्रकार" पढ़ेंगे:

पृष्ठ पर सभी <img> टैग ढूंढें
उनसे, उन तत्वों का चयन करें जो वर्ग के वंशज हैं ।कार्ड
उनसे, उन तत्वों का चयन करें जो .blog- सूची वर्ग के वंशज हैं

आप देख सकते हैं कि उच्च विशिष्टता वाले चयनकर्ता प्रदर्शन को कैसे प्रभावित करते हैं, खासकर जब हमें विश्व स्तर पर एक सामान्य तत्व जैसे div , img , li , आदि का चयन करने की आवश्यकता होती है।

विशिष्टता के समान स्तर का उपयोग करना

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

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

आइए, बीईएम का उपयोग करके और कम विशिष्टता के साथ पिछले उदाहरण को फिर से लिखें।

 /*     */ .card {} /*      */ .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {}

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

DRY सिद्धांत

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

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

 /*    DRY */ .warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; }

डीआरवाई सिद्धांत का पालन करते हुए कोड को रिफलेक्टर करते हैं

 /*    DRY */ .status { padding: 0.5rem; font-weight: bold; } .status--warning { color: #eba834; } .status--error { color: #eb3d34; } .form__status { padding: 0.5rem 0 0 0; }

एकमात्र जिम्मेदारी का सिद्धांत

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

 .button { padding: 1rem 2rem; font-size: 2rem; border-radius: 0.2rem; background-color: #eb4934; color: #fff; font-weight: bold; } .button--secondary { border-radius: 0; font-size: 1rem; background-color: #888; }

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

समस्या यह है कि हमारे .बटन वर्ग की कई भूमिकाएँ हैं:

एक ब्लॉक मॉडल ( पैडिंग ) को परिभाषित करता है
टाइपोग्राफी ( फ़ॉन्ट-आकार , फ़ॉन्ट-वजन ) को परिभाषित करता है
उपस्थिति ( रंग , पृष्ठभूमि-रंग , सीमा-त्रिज्या ) निर्धारित करता है

यह सीएसएस वर्ग के विस्तार और अन्य वर्गों के साथ इसके एकीकरण को जटिल करता है। इसे ध्यान में रखते हुए, BEM और OOCSS के साथ अपने CSS को बेहतर बनाते हैं।

 /*   */ .button { padding: 1rem 2rem; font-weight: bold; color: #fff; } /*   */ .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; }

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

खुलेपन / निकटता का सिद्धांत

सॉफ्टवेयर इकाइयां (कक्षाएं, मॉड्यूल, फ़ंक्शन, आदि) विस्तार के लिए खुली होनी चाहिए, लेकिन परिवर्तन के लिए बंद ”

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

 .card { padding: 1rem; } .blog-list .card { padding: 0.5em 1rem; }

.Blog- सूची .कार्ड चयनकर्ता में कई संभावित समस्याएं हैं:

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

आइए पिछले उदाहरण को फिर से लिखें:

 .card { padding: 1rem; } .blogList__card { padding: 0.5em 1rem; }

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

निष्कर्ष में

हमने ऐसे उदाहरणों को देखा कि कैसे इन कुछ सरल सिद्धांतों को लागू करने से सीएसएस लिखने के दृष्टिकोण में काफी सुधार हो सकता है:

बीईएम, ओसीएस आदि का उपयोग करके मानकीकृत नामकरण और संरचना, बेहतर पठनीयता।
कम विशिष्टता वाले चयनकर्ताओं का उपयोग करके बेहतर प्रदर्शन और संरचना
डीआरवाई सिद्धांत का उपयोग करते हुए ब्लोटिंग और बेहतर कोड गुणवत्ता में कमी
खुले / बंद सिद्धांत का उपयोग करके लचीलापन और स्थिरता

इस लेख को पढ़ने के लिए समय निकालने के लिए धन्यवाद। यदि आपको यह उपयोगी लगता है, तो आप इसे साझा कर सकते हैं या टिप्पणी छोड़ सकते हैं।

इन 5 सिद्धांतों के साथ अपने सीएसएस में सुधार करें।