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