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