लगभग 15 वर्षों के अनुभव के साथ एक फ्रंटएंड डेवलपर के रूप में, मैंने वेब विकास के विकास को प्रत्यक्ष रूप से देखा है। मेरे लिए, एफ़टीपी (हाँ, GitHub 15 साल पहले लॉन्च हुआ था, लेकिन मैंने इसे केवल 2011 में खोजा था) के माध्यम से संशोधित फ़ाइलों को अपलोड करने के दिनों से लेकर उत्तरदायी इंटरफेस, यूआई लाइब्रेरी और सीधे उत्पन्न होने वाली वेबसाइटों के आधुनिक युग तक एक लंबा सफर तय किया है। फिग्मा. फिर भी, मुझे अभी भी ऐसी परियोजनाएँ मिलती हैं जो नेस्टेड शैलियों को नियोजित करती हैं जैसे: .some-class ul li div a { /* some style */ } या, #nav .nav-link svg { /* some style */ } यह चौंकाने वाला लग सकता है, लेकिन ऐसी कोडिंग प्रथाएं मल्टीमिलियन-डॉलर, तेजी से बढ़ती परियोजनाओं से लेकर साधारण स्टार्टअप तक हर जगह व्याप्त हैं। आइए देखें कि यह दृष्टिकोण समस्याएँ क्यों उत्पन्न कर सकता है। नेस्टेड शैलियों का संघर्ष गहराई से निहित शैलियाँ अक्सर शैली संबंधी टकराव का कारण बनती हैं, खासकर यदि आपके पास कोई बड़ा प्रोजेक्ट है। सीएसएस, एक कैस्केडिंग स्टाइल शीट के रूप में, नीचे की ओर कैस्केड होता है और तत्वों पर उनकी विशिष्टता के आधार पर लागू होता है। गहराई से निहित शैलियाँ अपनी विशिष्टता के कारण अनजाने में अन्य शैलियों को ओवरराइड कर सकती हैं। इस उदाहरण पर विचार करें: .some-class ul li div a { color: red; } ... .some-class a { color: blue; } आप उम्मीद कर सकते हैं कि के सभी लिंक नीले होंगे। हालाँकि, पहले नियम की अधिक विशिष्टता के कारण, के भीतर नेस्टेड कोई भी लिंक लाल होगा, नीला नहीं। इससे अप्रत्याशित दृश्य विसंगतियां हो सकती हैं और डिबगिंग में बहुत सारा समय बर्बाद हो सकता है। .some-class ul > li > div विशिष्टता की जटिलता सीएसएस में विशिष्टता (या शैलियों के 'वजन') की अवधारणा को समझना यह समझने के लिए महत्वपूर्ण है कि गहरे घोंसले बनाना परेशानी भरा क्यों हो सकता है। विशिष्टता यह निर्धारित करती है कि यदि एकाधिक नियम एक ही तत्व के लिए प्रतिस्पर्धा करते हैं तो कौन सा सीएसएस नियम लागू होता है। इसकी गणना चयनकर्ताओं के प्रकार और मात्रा के आधार पर की जाती है। विशिष्टता की गणना चार-श्रेणी भार प्रणाली के आधार पर की जाती है: इनलाइन शैलियाँ आईडी वर्ग, विशेषताएँ और छद्म वर्ग तत्व और छद्म तत्व यहां, नियम पर विचार करें: body #content .data img:hover { /* some style */ } विशिष्टता है। वह एक आईडी ( ), दो वर्ग ( और ), और दो तत्व ( और ) हैं। 0 1 2 2 #content .data :hover body img अब, नियम पर विचार करें: #nav .nav-link svg { /* some style */ } यहां विशिष्टता है। वह एक आईडी ( ), एक वर्ग ( ), और एक तत्व ( ) है। 0 1 1 1 #nav .nav-link svg विशिष्टता पारंपरिक दशमलव संख्याओं की तरह "कैरी-ओवर" प्रणाली पर काम नहीं करती है। उदाहरण के लिए, की विशिष्टता वाला एक चयनकर्ता की विशिष्टता के बराबर नहीं है, भले ही दशमलव प्रणाली में, और समतुल्य होंगे। 0 1 0 11 0 1 1 1 11 1+1 अंत में, सार्वभौमिक चयनकर्ता ( ), संयोजक ( , , , '') और निषेध छद्म वर्ग ( ) का विशिष्टता पर कोई प्रभाव नहीं पड़ता है। हालाँकि तर्क के अंदर, चयनकर्ताओं को हमेशा की तरह गिना जाता है। * + > ~ :not() :not() दृश्य शिक्षार्थियों के लिए, मैं सीएसएस विशिष्टता के बारे में अनुशंसा करता हूं। इस वीडियो की सीएसएस विशिष्टता को समझना और इसकी गणना कैसे की जाती है, यह आपको बेहतर, अधिक पूर्वानुमानित सीएसएस लिखने और उन मुद्दों को डीबग करने की अनुमति देता है जब शैलियों को अपेक्षा के अनुरूप लागू नहीं किया जा रहा हो। नियम और विशिष्टता !important कभी-कभी, सीएसएस विशिष्टता टकराव के साथ कठिनाइयों का सामना करते समय डेवलपर्स नियम का उपयोग करने का सहारा लेते हैं। यह नियम सीएसएस संपत्ति को बेहद विशिष्ट बनाता है, जिसका अर्थ है कि यह लगभग किसी भी अन्य घोषणा को ओवरराइड कर देगा। !important उदाहरण के लिए: #nav .nav-link svg { color: blue; } .nav-link svg { color: red !important; } आईडी चयनकर्ता के कारण पहले नियम में उच्च विशिष्टता होने के बावजूद, दूसरे नियम में के कारण का रंग लाल होगा। !important svg अति प्रयोग के जोखिम !महत्वपूर्ण हालाँकि विशिष्टता संबंधी समस्याओं से जूझते समय एक त्वरित समाधान हो सकता है, लेकिन इसे बड़े पैमाने पर उपयोग करने की अनुशंसा नहीं की जाती है। अति प्रयोग रखरखाव, पूर्वानुमेयता और प्रदर्शन को प्रभावित कर सकता है। बड़ी परियोजनाओं में, का अत्यधिक उपयोग अक्सर सीएसएस विशिष्टता के प्रबंधन के साथ संघर्ष का संकेत देता है। का सहारा लेने के बजाय, अपने सीएसएस को दोबारा तैयार करने और अत्यधिक विशिष्ट चयनकर्ताओं के उपयोग को कम करने में समय लगाना अक्सर बेहतर होता है। !important !important !important आप अभी अपना उत्पाद जांच सकते हैं 🙂. मैंने अपना चेक कर लिया है: जबकि एक आकर्षक त्वरित समाधान हो सकता है; यह अखरोट को तोड़ने के लिए स्लेजहैमर का उपयोग करने जैसा है। एक अधिक रखरखाव योग्य दृष्टिकोण यह है कि अपने चयनकर्ताओं को यथासंभव सरल और सपाट रखें, जिससे आपके सीएसएस को भविष्य में समझना, प्रबंधित करना और विस्तारित करना आसान हो जाता है। और याद रखें, एक युद्ध जीतने का सबसे अच्छा तरीका इसे पहले ही शुरू नहीं करना है। !important !important सीएसएस ट्री को पार करना गहराई से नेस्टेड शैलियों के साथ एक और समस्या ब्राउज़र रेंडरिंग पर प्रदर्शन प्रभाव है। जब कोई ब्राउज़र किसी तत्व पर शैलियाँ लागू करता है, तो वह कुंजी चयनकर्ता (हमारे उदाहरणों में, और ) से शुरू करके DOM को दाएँ से बाएँ पार करता है और पूर्वजों के माध्यम से तब तक चलता है जब तक कि उसे कोई मिलान नहीं मिल जाता या शीर्ष पर नहीं पहुँच जाता। शैली जितनी अधिक नेस्टेड होगी, इस ट्रैवर्सल में उतना ही अधिक समय लगेगा, संभावित रूप से प्रदर्शन प्रभावित होगा और बड़े पैमाने की परियोजनाओं में पेज लोड समय धीमा हो जाएगा। a svg जब आप कोई CSS नियम निर्दिष्ट करते हैं, जैसे: .some-class ul li a { /* some style */ } आप इस नियम को पेड़ के नीचे से शुरू करके ( टैग से) और पेड़ के माध्यम से ( , , और माध्यम से) बढ़ते हुए देख सकते हैं। a li ul .some-class ब्राउज़र पहले (मेरा मतलब सभी) तत्वों को खोजेगा, फिर यह जाँच करेगा कि क्या ये टैग तत्वों के अंदर हैं। उसके बाद, यह जाँच करेगा कि क्या ये तत्व अंदर हैं और अंत में, यह जाँच करेगा कि क्या ये वर्ग वाले किसी तत्व के अंदर हैं। सभी a a li li ul ul .some-class इस प्रकार ब्राउज़र सीएसएस चयनकर्ताओं को पढ़ते हैं और यही कारण है कि जटिल चयनकर्ताओं के कारण पेज रेंडरिंग धीमी हो सकती है। ब्राउज़र को यह देखने के लिए प्रत्येक तत्व के लिए कई जाँच करनी पड़ती है कि क्या वह निर्दिष्ट नियम के अनुरूप है। नियम जितना गहरा होगा, ब्राउज़र को उतनी ही अधिक जाँच करनी होगी, जो प्रदर्शन को प्रभावित कर सकती है। बड़ी परियोजनाओं में सीएसएस के प्रबंधन के लिए बेहतर अभ्यास सीएसएस मॉड्यूल आपको अलग-अलग मॉड्यूल में सीएसएस लिखने की अनुमति देते हैं, जो स्थानीय रूप से उस घटक तक सीमित होते हैं जिस पर आप काम कर रहे हैं। इसका मतलब यह है कि सीएसएस मॉड्यूल में शैलियाँ केवल उस विशिष्ट मॉड्यूल पर लागू होती हैं और पृष्ठ पर अन्य तत्वों को लीक या प्रभावित नहीं करेंगी। सीएसएस मॉड्यूल आइए देखें कि सीएसएस मॉड्यूल स्टाइल एनकैप्सुलेशन सुनिश्चित करने के लिए हैशेड क्लास नामों का उपयोग कैसे करते हैं। जब आप सीएसएस मॉड्यूल का उपयोग कर रहे हैं, तो आपके सीएसएस फ़ाइल में आपके द्वारा परिभाषित क्लास नाम संकलन समय पर हैश किए जाएंगे। यह हैश एक अद्वितीय वर्ग नाम बनाता है जो आपके घटक से मेल खाता है। आइए एक उदाहरण देखें: मान लीजिए कि आपके पास एक सीएसएस मॉड्यूल इस प्रकार परिभाषित है: /* Button.module.css */ .button { color: white; background-color: blue; } और आप इसे अपने घटक में इस तरह उपयोग करते हैं (मैं के बजाय स्टाइल ऑब्जेक्ट को के रूप में आयात करना पसंद करता हूं - एक त्वरित टिप जो टाइपिंग समय बचाता है और कोडिंग दक्षता को बढ़ाता है): styles s import React from 'react'; import s from './Button.module.css'; const Button = () => { return ( <button className={s.button}>Click me</button> ); }; export default Button; जब आपका एप्लिकेशन संकलित हो जाता है, तो आपका प्रस्तुत HTML कुछ इस तरह दिखाई दे सकता है: <button class="Button_button__3FQ9Z">Click me</button> इस मामले में, हैशेड क्लास नाम है जो आपके CSS मॉड्यूल से उत्पन्न हुआ था। ध्यान दें कि हैश की सटीक संरचना और लंबाई आपके प्रोजेक्ट कॉन्फ़िगरेशन के आधार पर भिन्न हो सकती है। Button_button__3FQ9Z यह अद्वितीय वर्ग नाम यह सुनिश्चित करता है कि आपके द्वारा में परिभाषित शैलियाँ केवल इस बटन पर लागू होती हैं और आपके एप्लिकेशन में किसी अन्य तत्व को प्रभावित नहीं करेंगी। यह यह भी सुनिश्चित करता है कि कोई भी अन्य शैलियाँ इस बटन को प्रभावित नहीं कर सकतीं जब तक कि वे स्पष्ट रूप से हैशेड क्लास नाम को लक्षित न करें। शैलियों का यह एनकैप्सुलेशन सीएसएस मॉड्यूल के मुख्य लाभों में से एक है। Button.module.css सीएसएस-इन-जेएस लाइब्रेरीज़ सीएसएस को संभालने का एक और लोकप्रिय तरीका सीएसएस-इन-जेएस पुस्तकालयों का उपयोग करना है, जैसे या । ये लाइब्रेरी आपको अपना सीएसएस सीधे अपने जावास्क्रिप्ट में लिखने की अनुमति देती हैं, जिसके कई लाभ हैं: स्टाइल-घटक भावना : सीएसएस मॉड्यूल के समान, शैलियों को उस घटक के दायरे में रखा जाता है जिसमें वे परिभाषित हैं। स्कोप्ड शैलियाँ : आपके घटक में प्रॉप्स या स्थिति के आधार पर गतिशील शैलियाँ बनाना आसान है। गतिशील शैलियाँ : आप अपनी शैलियों में सीधे जावास्क्रिप्ट तर्क का उपयोग कर सकते हैं, और एक घटक से संबंधित सभी चीजें एक ही स्थान पर स्थित हैं, जिससे आपके कोड को समझना और उसके साथ काम करना आसान हो सकता है। बेहतर डेवलपर अनुभव यहां एक उदाहरण दिया गया है कि आप रिएक्ट एप्लिकेशन में स्टाइल-घटकों का उपयोग कैसे कर सकते हैं: import React from 'react'; import styled from 'styled-components'; const Button = styled.button` color: white; background-color: ${(props) => props.primary ? 'blue' : 'gray'}; `; const App = () => { return ( <div> <Button primary>Primary Button</Button> <Button>Secondary Button</Button> </div> ); }; export default App; इस उदाहरण में, घटक में गतिशील शैलियाँ हैं जो इसके प्रोप के आधार पर बदलती हैं। Button primary बीईएम पद्धति यदि आप ऐसे जावास्क्रिप्ट फ्रेमवर्क के साथ काम नहीं कर रहे हैं जो सीएसएस मॉड्यूल या इसी तरह का समर्थन करता है, तो भी आप बीईएम (ब्लॉक, एलीमेंट, मॉडिफायर) जैसी नामकरण पद्धतियों का उपयोग करके अपने सीएसएस को प्रभावी ढंग से प्रबंधित कर सकते हैं। BEM का अर्थ है "ब्लॉक एलिमेंट मॉडिफ़ायर", और यह एक पद्धति है जो आपको CSS में पुन: प्रयोज्य घटकों और कोड साझाकरण को बनाने में मदद करती है। यहां बताया गया है कि आप BEM का उपयोग करके अपने CSS को कैसे संरचित कर सकते हैं: /* Block */ .top-menu { } /* Element */ .top-menu__item { } /* Modifier */ .top-menu__item_active { } बीईएम में, 'ब्लॉक' एक स्टैंडअलोन इकाई है जो अपने आप में सार्थक है, 'एलिमेंट' ब्लॉक का एक हिस्सा है जिसका कोई स्टैंडअलोन अर्थ नहीं है और शब्दार्थ रूप से इसके ब्लॉक से जुड़ा हुआ है, और 'संशोधक' एक ध्वज है एक ब्लॉक या तत्व जिसका उपयोग उपस्थिति या व्यवहार को बदलने के लिए किया जाता है। बीईएम जैसी सुसंगत कार्यप्रणाली का उपयोग करने से आपके सीएसएस को समझना और बनाए रखना आसान हो सकता है, खासकर बड़ी परियोजनाओं पर। निष्कर्ष के तौर पर बड़ी परियोजनाओं में सीएसएस को प्रबंधित करने के कई तरीके हैं, सीएसएस मॉड्यूल और सीएसएस-इन-जेएस लाइब्रेरी से लेकर बीईएम जैसी नामकरण पद्धति तक। कुंजी एक ऐसा दृष्टिकोण ढूंढना है जो आपकी टीम और प्रोजेक्ट के साथ अच्छी तरह से फिट बैठता है और इसे लगातार लागू करना है। याद रखें, सीएसएस लिखना उतना ही कुशल और निष्पादन योग्य कोड लिखने के बारे में है जितना समझने योग्य और रखरखाव योग्य कोड लिखने के बारे में है। हैप्पी कोडिंग!
