बुनियादी सीएसएस दे सिद्धांतें गी सिखने पर, रखरखाव गी सुनिश्चित करने आस्तै मॉड्यूलर, पुन: उपयोग करने योग्य ते वर्णनात्मक शैली लिखना सिखाया जंदा ऐ। पर जदूं डेवलपर असली दुनिया दे एप्लीकेशनें कन्नै जुड़े दे होंदे न तां अक्सर अनचाहे इलाकें च शैल लीक होने दे बगैर यूआई फीचरें गी जोड़ना असंभव लगदा ऐ। एह् मुद्दा अक्सर इक स्व-पूर्ति लूप च बर्फ दे गोले बनी जंदा ऐ; शैलियां जेह् ड़ियां सैद्धांतिक रूप कन्नै इक तत्व जां वर्ग दे दायरे च न जित्थै ओह् नेईं होंदियां न उ’त्थें गै दस्सन लगी पौंदियां न। एह् डेवलपर गी लीक कीती गेदी शैलियें गी ओवरराइड करने आस्तै होर बी विशिष्ट चयनकर्ता बनाने लेई मजबूर करदा ऐ, जेह् ड़े उसदे बाद गलती कन्नै वैश्विक शैलियें गी ओवरराइड करदे न, ते इ'यां गै. कठोर वर्ग नांऽ कन्वेंशन, जि’यां बीईएम, इस मुद्दे दा इक सैद्धांतिक समाधान ऐ। बीईएम (ब्लॉक, तत्व, संशोधक) पद्धति सीएसएस फाइलें दे अंदर पुन: उपयोग ते संरचना गी सुनिश्चत करने आस्तै सीएसएस वर्गें दा नांऽ देने दा इक व्यवस्थित तरीका ऐ। इस चाल्ली दे नामांकन कन्वेंशन तत्वें ते उंदी स्थिति दा वर्णन करने लेई डोमेन भाशा दा लाभ लैंदे होई संज्ञानात्मक भार गी घट्ट करी सकदे न, ते जेकर सही तरीके कन्नै लागू कीता जंदा ऐ तां बड्डे एप्लीकेशनें आस्तै शैलियें गी बनाए रखने च सहूलियत बनाई सकदी ऐ। पर असली दुनिया च एह् हमेशा इ’यां नेईं होंदा। प्राथमिकताएं च बदलाव होई सकदा ऐ, ते बदलाव कन्नै लागू करना असंगत होई जंदा ऐ। HTML संरचना च छोटे-छोटे बदलावें लेई मते सारे CSS वर्ग दे नांऽ संशोधनें दी लोड़ होई सकदी ऐ. उच्च इंटरएक्टिव फ्रंट-एंड एप्लीकेशनें कन्नै, बीईएम पैटर्न दा पालन करने आह् ले वर्ग दे नांऽ लम्मी ते बेढंगा होई सकदे न (जियां, ऐप-उपयोगकर्ता-अवलोकन__स्थिति--प्रमाणीकरण करदा ऐ), ते नामांकन नियमें दा पूरा-पूरा पालन नेईं करने कन्नै सिस्टम दी संरचना गी तोड़दा ऐ, जिस कन्नै इसदे फायदें गी नकार दित्ता जंदा ऐ। इनें चुनौतियें गी दिक्खदे होई, एह् कोई आश्चर्य दी गल्ल नेईं ऐ जे डेवलपर्स फ्रेमवर्क दी ओर मुड़दे न, टेलविंड सारें शा लोकप्रिय CSS फ्रेमवर्क ऐ। शैलियां दे बश्कार जेह् ड़ी अजेय विशिष्टता युद्ध लगदी ऐ उसगी लड़ने दी कोशश करने दे बजाय, CSS कैस्केड थमां हार मानना ते ऐसे उपकरणें दा इस्तेमाल करना जेह् ड़े पूरी चाल्ली कन्नै अलगाव दी गारंटी दिंदे न। डेवलपर यूटिलिटीज पर ज्यादा झुकदे न अस किस चाल्ली जानने आं जे किश डेवलपर कैस्केड शैलियें थमां बचने दी उत्सुक न? एह् "आधुनिक" फ्रंट-एंड टूलिंग दा उदय ऐ — जि’यां सीएसएस-इन-जेएस फ्रेमवर्क — जेह् ड़ा खास तौर उप्पर उस मकसद आस्तै डिजाइन कीता गेदा ऐ। अलग-थलग शैलियें कन्नै कम्म करना जेह् ड़ी खास घटकें कन्नै कस्सिये दायरा होंदी ऐ , ताजी हवा दी सांस दी तर्ज पर लग्गी सकदी ऐ । एह् चीजें दा नांऽ देने दी लोड़ गी दूर करदा ऐ - अजें बी सारें शा नफरत ते समें-समें पर कम्म करने आह् ले फ्रंट-एंड कम्में च शामल ऐ - ते डेवलपर्स गी CSS विरासत दे फायदें गी पूरी चाल्ली समझे जां उंदा फायदा चुक्के बगैर उत्पादक होने दी अनुमति दिंदा ऐ। पर सीएसएस कैस्केड गी खाई देने च अपनी समस्यां बी औंदियां न। मसाल आस्तै, जावास्क्रिप्ट च शैलियें गी रचने आस्तै भारी बिल्ड कॉन्फ़िगरेशनें दी लोड़ होंदी ऐ ते अक्सर शैलीएं गी घटक मार्कअप जां एचटीएमएल कन्नै अजीब तरीके कन्नै घुल-मिलने दा कारण बनदा ऐ. ध्यान कन्नै विचार कीते गेदे नामांकन रूढ़ियें दे बजाय, अस अपने आस्तै चयनकर्ता ते पन्छानने आह् ले गी स्वतः पैदा करने दी अनुमति दिंदे न (जियां, .jsx-3130221066), जिस च डेवलपर्स गी अपने आपै च ते अपने आपै च इक होर छद्म-भाषा कन्नै तालमेल बनाने दी लोड़ होंदी ऐ. (जैसे तुंदे सारे घटक दे useEffects की करदे न, एह् समझने दा संज्ञानात्मक भार पैह् ले थमां गै काफी नेईं हा!) क्लासें गी टूलिंग च नांऽ देने दे कम्मै गी होर अमूर्त करने दा मतलब ऐ जे बुनियादी डिबगिंग अक्सर विकास आस्तै संकलित विशिष्ट एप्लिकेशन संस्करणें तगर सीमित होंदी ऐ , बशर्ते देशी ब्राउज़र फीचरें दा फायदा लैना जेह् ड़े लाइव डिबगिंग दा समर्थन करदे न , जि’यां डेवलपर टूल एह् लगभग इ’यां ऐ जि’यां असेंगी उनें उपकरणें गी डिबग करने लेई उपकरण विकसित करने दी लोड़ ऐ जेह् ड़े अस बरतदे आं तां जे वेब पैह् ले थमां गै उपलब्ध करोआने आह् ले गी अमूर्त कीता जाई सकै — एह् सब किश मानक सीएसएस लिखने दे "दर्द" थमां भागने आस्तै ऐ। किस्मत कन्नै, आधुनिक CSS सुविधां न सिर्फ मानक CSS लिखने गी होर लचीला बनांदे न बल्कि साढ़े जनेह् डेवलपर्स गी कैस्केड गी प्रबंधत करने ते इसगी साढ़े आस्तै कम्म करने आस्तै मती शक्ति बी दिंदे न। CSS Cascade Layers इक बड्डा उदाहरण ऐ, पर इक होर फीचर ऐ जेह् ड़ा ध्यान दी हैरानी आह् ली कमी हासल करदा ऐ — हालांकि एह् हून बदलदा जा करदा ऐ की जे एह् हाल च गै बेसलाइन संगत होई गेआ ऐ। दी सीएसएस @स्कोप एट-रूल मैं CSS @scope at-rule गी उस किस्म दी शैली-लीक-प्रेरित चिंता दा इक संभावित इलाज समझना ऐ जिसगी अस कवर कीता ऐ, जेह् ड़ा असेंगी अमूर्तता ते अतिरिक्त बिल्ड टूलिंग आस्तै देशी वेब फायदें कन्नै समझौता करने लेई मजबूर नेईं करदा ऐ। “@scope CSS at-rule तुसेंगी विशिष्ट DOM उप-वृक्षें च तत्वें गी चुनने च सक्षम बनांदा ऐ, तत्वें गी ठीक-ठीक निशाना बनांदा ऐ, बगैर मता-विशिष्ट चयनकर्ताएं गी लिखने दे जेह् ड़े ओवरराइड करना मुश्कल ऐ, ते तुंदे चयनकर्ताएं गी DOM संरचना कन्नै मता कस्सिये जोड़े बगैर।”— MDN
दूए शबदां च, अस विरासत, झरना, जां इत्थूं तगर जे चिंताएं दे बुनियादी बक्ख-बक्ख होने दी कुर्बानी दित्ते बगैर विशिष्ट दृष्टांतें च अलग-थलग शैलियें कन्नै कम्म करी सकने आंजेह् ड़ा फ्रंट-एंड विकास दा इक लम्मी अवधि आह् ला मार्गदर्शक सिद्धांत रेहा ऐ। प्लस, इसदे च बेहतरीन ब्राउज़र कवरेज ऐ। दरअसल, फायरफॉक्स 146 ने दिसंबर च @scope आस्तै समर्थन जोड़ेआ हा, जिसदे कन्नै एह् पैह् ली बारी बेसलाइन संगत होई गेआ ऐ। बीईएम पैटर्न बनाम @scope नियम दा इस्तेमाल करने आह् ले बटन दे बश्कार इक साधारण तुलना इत्थै ऐ:
<शैली> .button .button__text { /* बटन पाठ शैलियाँ */ } .button .button__icon { /* बटन आइकन शैलियाँ */ } .बटन--प्राथमिक { प्राथमिक बटन शैलियाँ */ } दा
<बटन क्लास="प्राथमिक-बटन"> मेरे पर क्लिक करो <स्पैन>→ दा दा
<शैली> @ दायरा (. प्राथमिक-बटन) { span:first-child { /* बटन पाठ शैलियाँ */ } span:last-child { /* बटन आइकन शैलियाँ */ } } ऐ दा
@scope नियम कम जटिलता कन्नै सटीकता दी अनुमति दिंदा ऐ. डेवलपर गी क्लास दे नांऽ दा इस्तेमाल करियै सीमाएं बनाने दी लोड़ नेईं ऐ , जेह् ड़ी बदले च उ’नेंगी देशी HTML तत्वें दे आधार उप्पर चयनकर्ता लिखने दी इजाजत दिंदी ऐ , जिस कन्नै निर्देशात्मक CSS वर्ग नांऽ पैटर्न दी लोड़ खत्म होई जंदी ऐ । बस क्लास दे नांऽ प्रबंधन दी लोड़ गी दूर करियै, @scope बड्डे प्रोजेक्टें च CSS कन्नै जुड़े दे डर गी घट्ट करी सकदा ऐ. बुनियादी उपयोग दा शुरू करने आस्तै, अपने CSS च @scope नियम जोड़ो ते इक रूट चयनकर्ता सम्मिलित करो जिस च शैली दा दायरा होग: @ दायरा (<चयनक>) { /* शैलियां <चयनक> गी स्कोप कीतियां गेइयां */ } ऐ
तो, उदाहरण दे तौर पर, जेकर अस शैलियां गी इक
@ दायरे (नव) { a { /* नव दायरे दे अंदर शैलियां लिंक */ }
a:active { /* सक्रिय लिंक शैलियाँ */ }
a:active::before { /* अतिरिक्त स्टाइलिंग लेई छद्म-तत्व कन्नै सक्रिय लिंक */ }
@ मीडिया (अधिकतम-चौड़ाई: 768px) { a { /* उत्तरदायी समायोजन */ } } ऐ } ऐ
एह्, अपने आपै च, कोई ग्राउंडब्रेकिंग फीचर नेईं ऐ। हालांकि, इक निचली सीमा बनाने आस्तै दायरे च इक दुआ तर्क जोड़ेआ जाई सकदा ऐ, जिस कन्नै दायरे दे शुरूआती ते अंत बिंदुएं गी प्रभावी ढंगै कन्नै परिभाशत कीता जाई सकदा ऐ।
/* उल दे अंदर कोई बी ए तत्व शैलियां लागू नेईं होंगन */ @ दायरे (नव) ते (उल) { ए { फॉन्ट-आकार: 14px ऐ; } ऐ } ऐ
इस अभ्यास गी डोनट स्कोपिंग आखेआ जंदा ऐ, ते केईं दस्तावेज न जिंदा कोई बी इस्तेमाल करी सकदा ऐ, जिंदे च DOM संरचना कन्नै कस्सिये जुड़े दे समान, उच्च विशिष्ट चयनकर्ताएं दी श्रृंखला, इक :छद्म-चयनक नेईं, जां बक्ख-बक्ख CSS गी संभालने आस्तै
/*
निष्कर्ष निकालना यूटिलिटी-फर्स्ट CSS फ्रेमवर्क, जि’यां टेलविंड, प्रोटोटाइपिंग ते छोटे प्रोजेक्टें आस्तै ठीक कम्म करदे न। पर, जदूं इक दो शा मते डेवलपर्स शामल होने आह् ले बड्डे प्रोजेक्टें च इस्तेमाल कीते जंदे न तां उंदे फायदे जल्दी घट्ट होई जंदे न। पिछले किश ब’रें च फ्रंट-एंड विकास तेज़ी कन्नै मता जटिल होई गेआ ऐ, ते सीएसएस बी इसदे अपवाद नेईं ऐ। जदके @scope नियम सारें शा इलाज नेईं ऐ , तां एह् जटिल टूलिंग दी लोड़ गी घट्ट करी सकदा ऐ । जदूं रणनीतिक वर्ग नामांकन दी जगह, जां इसदे कन्नै-कन्नै इस्तेमाल कीता जंदा ऐ, तां @scope बनाए रखने आह् ले CSS लिखने च सहूलियत ते मता मजेदार बनाई सकदा ऐ. अग्गें पढ़ना
सीएसएस @ स्कोप (एमडीएन) ऐ। “सीएसएस @स्कोप”, जुआन डिएगो रोड्रिग्ज (सीएसएस-ट्रिक) फायरफॉक्स 146 रिलीज नोट्स (फायरफॉक्स) ब्राउज़र समर्थन (CanIUse) ऐ। लोकप्रिय सीएसएस ढांचे (सीएसएस 2024 दी स्थिति) “सीएसएस: कैस्केड च “सी””, थॉमस यिप (सीएसएस-ट्रिक) बीईएम परिचय (बीईएम पाओ)
