यह 2023 है, लेकिन हमें अभी भी सीएसएस में नेस्टेड शैलियों के बारे में बात करने की ज़रूरत है

लगभग 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 के भीतर नेस्टेड कोई भी लिंक लाल होगा, नीला नहीं। इससे अप्रत्याशित दृश्य विसंगतियां हो सकती हैं और डिबगिंग में बहुत सारा समय बर्बाद हो सकता है।

विशिष्टता की जटिलता

सीएसएस में विशिष्टता (या शैलियों के 'वजन') की अवधारणा को समझना यह समझने के लिए महत्वपूर्ण है कि गहरे घोंसले बनाना परेशानी भरा क्यों हो सकता है। विशिष्टता यह निर्धारित करती है कि यदि एकाधिक नियम एक ही तत्व के लिए प्रतिस्पर्धा करते हैं तो कौन सा सीएसएस नियम लागू होता है। इसकी गणना चयनकर्ताओं के प्रकार और मात्रा के आधार पर की जाती है।

विशिष्टता की गणना चार-श्रेणी भार प्रणाली के आधार पर की जाती है:

1. इनलाइन शैलियाँ
2. आईडी
3. वर्ग, विशेषताएँ और छद्म वर्ग
4. तत्व और छद्म तत्व

यहां, नियम पर विचार करें:

 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 युद्ध जीतने का सबसे अच्छा तरीका इसे पहले ही शुरू नहीं करना है।

सीएसएस ट्री को पार करना

गहराई से नेस्टेड शैलियों के साथ एक और समस्या ब्राउज़र रेंडरिंग पर प्रदर्शन प्रभाव है। जब कोई ब्राउज़र किसी तत्व पर शैलियाँ लागू करता है, तो वह कुंजी चयनकर्ता (हमारे उदाहरणों में, a और svg ) से शुरू करके DOM को दाएँ से बाएँ पार करता है और पूर्वजों के माध्यम से तब तक चलता है जब तक कि उसे कोई मिलान नहीं मिल जाता या शीर्ष पर नहीं पहुँच जाता। शैली जितनी अधिक नेस्टेड होगी, इस ट्रैवर्सल में उतना ही अधिक समय लगेगा, संभावित रूप से प्रदर्शन प्रभावित होगा और बड़े पैमाने की परियोजनाओं में पेज लोड समय धीमा हो जाएगा।

जब आप कोई 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>

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

यह अद्वितीय वर्ग नाम यह सुनिश्चित करता है कि आपके द्वारा Button.module.css में परिभाषित शैलियाँ केवल इस बटन पर लागू होती हैं और आपके एप्लिकेशन में किसी अन्य तत्व को प्रभावित नहीं करेंगी। यह यह भी सुनिश्चित करता है कि कोई भी अन्य शैलियाँ इस बटन को प्रभावित नहीं कर सकतीं जब तक कि वे स्पष्ट रूप से हैशेड क्लास नाम को लक्षित न करें। शैलियों का यह एनकैप्सुलेशन सीएसएस मॉड्यूल के मुख्य लाभों में से एक है।

सीएसएस-इन-जेएस लाइब्रेरीज़

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

1. स्कोप्ड शैलियाँ : सीएसएस मॉड्यूल के समान, शैलियों को उस घटक के दायरे में रखा जाता है जिसमें वे परिभाषित हैं।
2. गतिशील शैलियाँ : आपके घटक में प्रॉप्स या स्थिति के आधार पर गतिशील शैलियाँ बनाना आसान है।
3. बेहतर डेवलपर अनुभव : आप अपनी शैलियों में सीधे जावास्क्रिप्ट तर्क का उपयोग कर सकते हैं, और एक घटक से संबंधित सभी चीजें एक ही स्थान पर स्थित हैं, जिससे आपके कोड को समझना और उसके साथ काम करना आसान हो सकता है।

यहां एक उदाहरण दिया गया है कि आप रिएक्ट एप्लिकेशन में स्टाइल-घटकों का उपयोग कैसे कर सकते हैं:

 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 { }

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

बीईएम जैसी सुसंगत कार्यप्रणाली का उपयोग करने से आपके सीएसएस को समझना और बनाए रखना आसान हो सकता है, खासकर बड़ी परियोजनाओं पर।

निष्कर्ष के तौर पर

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

हैप्पी कोडिंग!