आधारभूत CSS को सिद्धान्तहरू सिक्दा, मर्मतयोग्यता सुनिश्चित गर्न मोड्युलर, पुन: प्रयोगयोग्य, र वर्णनात्मक शैलीहरू लेख्न सिकाइन्छ। तर जब विकासकर्ताहरू वास्तविक-विश्व अनुप्रयोगहरूसँग संलग्न हुन्छन्, यो प्रायः अनपेक्षित क्षेत्रहरूमा लीक शैलीहरू बिना UI सुविधाहरू थप्न असम्भव महसुस गर्दछ। यो समस्या प्रायः स्नोबल स्व-पूर्ति गर्ने लूपमा हुन्छ; सैद्धान्तिक रूपमा एउटा तत्व वा वर्गमा स्कोप गरिएका शैलीहरू तिनीहरूसँग सम्बन्धित नभएको ठाउँमा देखिन थाल्छन्। यसले विकासकर्तालाई चुहावट गरिएका शैलीहरूलाई ओभरराइड गर्न अझ बढी विशिष्ट चयनकर्ताहरू सिर्जना गर्न बाध्य पार्छ, जसले गल्तिले विश्वव्यापी शैलीहरूलाई ओभरराइड गर्छ, र यस्तै अन्य। कठोर वर्ग नाम सम्मेलनहरू, जस्तै BEM, यस मुद्दाको एक सैद्धान्तिक समाधान हो। BEM (ब्लक, एलिमेन्ट, परिमार्जक) पद्धति CSS फाइलहरू भित्र पुन: प्रयोज्यता र संरचना सुनिश्चित गर्न CSS वर्गहरूको नामकरण गर्ने एक व्यवस्थित तरिका हो। यस प्रकारको नामकरण सम्मेलनहरूले तत्वहरू र तिनीहरूको अवस्थाको वर्णन गर्न डोमेन भाषाको लाभ उठाएर संज्ञानात्मक भार कम गर्न सक्छ, र यदि सही रूपमा लागू गरियो भने, ठूला अनुप्रयोगहरूको लागि शैलीहरू कायम राख्न सजिलो बनाउन सक्छ। वास्तविक संसारमा, तथापि, यो सधैं यस्तो काम गर्दैन। प्राथमिकताहरू परिवर्तन हुन सक्छ, र परिवर्तन संग, कार्यान्वयन असंगत हुन्छ। HTML संरचनामा साना परिवर्तनहरू धेरै CSS वर्ग नाम संशोधन आवश्यक हुन सक्छ। उच्च अन्तरक्रियात्मक फ्रन्ट-एन्ड अनुप्रयोगहरूको साथ, BEM ढाँचा पछ्याउने वर्ग नामहरू लामो र अव्यवस्थित हुन सक्छन् (उदाहरणका लागि, एप-प्रयोगकर्ता-ओभरभ्यू__स्टेटस--प्रमाणीकरण गर्दै), र नामकरण नियमहरूको पूर्ण रूपमा पालना नगर्दा प्रणालीको संरचना भङ्ग हुन्छ, जसले गर्दा यसका फाइदाहरूलाई अस्वीकार गर्दछ। यी चुनौतिहरूलाई ध्यानमा राख्दै, विकासकर्ताहरूले फ्रेमवर्कमा फर्कनु कुनै अचम्मको कुरा होइन, Tailwind सबैभन्दा लोकप्रिय CSS फ्रेमवर्क हो। शैलीहरू बीच एक अपरिचित विशिष्टता युद्ध जस्तो देखिन्छ लड्न प्रयास गर्नुको सट्टा, CSS क्यास्केडलाई छोड्न र पूर्ण अलगावको ग्यारेन्टी गर्ने उपकरणहरू प्रयोग गर्न सजिलो छ। विकासकर्ताहरू उपयोगिताहरूमा बढी झुक्छन् हामी कसरी थाहा पाउँछौं कि केही विकासकर्ताहरू क्यास्केड शैलीहरू बेवास्ता गर्न उत्सुक छन्? यो "आधुनिक" फ्रन्ट-एन्ड टूलिङको उदय हो — जस्तै CSS-in-JS फ्रेमवर्क — त्यो उद्देश्यका लागि विशेष रूपमा डिजाइन गरिएको हो। पृथक शैलीहरूसँग काम गर्ने जुन विशेष कम्पोनेन्टहरूमा कडा स्कोप गरिएको छ ताजा हावाको सास जस्तो लाग्न सक्छ। यसले चीजहरूको नाम राख्ने आवश्यकतालाई हटाउँछ - अझै पनि सबैभन्दा घृणित र समय-उपभोग गर्ने फ्रन्ट-एन्ड कार्यहरू मध्ये एक - र विकासकर्ताहरूलाई CSS विरासतका फाइदाहरू पूर्ण रूपमा बुझेर वा लाभ उठाउन बिना उत्पादनशील हुन अनुमति दिन्छ। तर CSS क्यास्केड खाइरहँदा आफ्नै समस्याहरू आउँछन्। उदाहरणका लागि, जाभास्क्रिप्टमा कम्पोजिङ शैलीहरू भारी निर्माण कन्फिगरेसनहरू चाहिन्छ र प्रायः शैलीहरूलाई कम्पोनेन्ट मार्कअप वा HTML सँग मिल्ने अनौठो तरिकामा लैजान्छ। नामकरण प्रथाहरूलाई ध्यानपूर्वक विचार गर्नुको सट्टा, हामी हाम्रा लागि चयनकर्ताहरू र पहिचानकर्ताहरू (जस्तै, .jsx-3130221066) स्वतः उत्पन्न गर्न निर्माण उपकरणहरूलाई अनुमति दिन्छौं, जसले विकासकर्ताहरूलाई आफैंमा अर्को छद्म-भाषाको साथ राख्न आवश्यक छ। (जस्तै तपाईको सबै कम्पोनेन्टको इफेक्टले के गर्छ भन्ने बुझ्नको संज्ञानात्मक भार पहिले नै पर्याप्त थिएन!) टुलिङमा क्लासहरू नामकरण गर्ने कार्यलाई थप सार्नु भनेको विकासकर्ता उपकरणहरू जस्ता लाइभ डिबगिङलाई समर्थन गर्ने नेटिभ ब्राउजर सुविधाहरूको लाभ उठाउनुको सट्टा विकासको लागि कम्पाइल गरिएका विशिष्ट अनुप्रयोग संस्करणहरूमा आधारभूत डिबगिङमा सीमित हुन्छ। यो लगभग जस्तै हो कि हामीले उपकरणहरू डिबग गर्नका लागि उपकरणहरू विकास गर्न आवश्यक छ जुन हामीले वेबले पहिले नै उपलब्ध गराएको अमूर्त रूपमा प्रयोग गरिरहेका छौं - सबै मानक CSS लेख्ने "पीडा" बाट भाग्ने खातिर। सौभाग्यवश, आधुनिक CSS सुविधाहरूले मानक CSS लेखनलाई थप लचिलो मात्र बनाउँदैन तर हामी जस्ता विकासकर्ताहरूलाई क्यास्केड व्यवस्थापन गर्न र यसलाई हाम्रो लागि काम गर्न ठूलो मात्रामा शक्ति दिन्छ। CSS क्यास्केड तहहरू एक उत्कृष्ट उदाहरण हुन्, तर त्यहाँ अर्को विशेषता छ जुन ध्यानको अचम्मलाग्दो अभाव हुन्छ - यद्यपि त्यो अहिले परिवर्तन हुँदैछ कि यो भर्खरै आधारभूत अनुकूल भएको छ। CSS @scope At-Rule म CSS @scope at-rule लाई हामीले कभर गरेको शैली-लीक-प्रेरित चिन्ताको प्रकारको लागि सम्भावित उपचार मान्छु, जसले हामीलाई एब्स्ट्र्याक्सन र अतिरिक्त निर्माण उपकरणको लागि नेटिभ वेब फाइदाहरू सम्झौता गर्न बाध्य पार्दैन। "@scope CSS at-rule ले तपाइँलाई विशिष्ट DOM सबट्रीहरूमा तत्वहरू चयन गर्न सक्षम बनाउँछ, ओभरराइड गर्न गाह्रो हुने अति-विशिष्ट चयनकर्ताहरू नलिइकन, र तपाइँका चयनकर्ताहरूलाई DOM संरचनामा धेरै कडाइका साथ युग्मन नगरी सटीक रूपमा तत्वहरूलाई लक्षित गर्दै।"- MDN
अर्को शब्दमा भन्नुपर्दा, हामी विरासत, क्यास्केडिङ, वा आधारभूत पृथकतालाई पनि त्याग नगरी विशिष्ट उदाहरणहरूमा पृथक शैलीहरूसँग काम गर्न सक्छौं।जुन फ्रन्ट एन्ड विकासको लामो समयदेखि चलिरहेको मार्गदर्शक सिद्धान्त हो। साथै, यसमा उत्कृष्ट ब्राउजर कभरेज छ। वास्तवमा, Firefox 146 ले डिसेम्बरमा @scope को लागि समर्थन थप्यो, यसलाई पहिलो पटक आधारभूत अनुकूल बनाउँदै। यहाँ @scope नियम बनाम BEM ढाँचा प्रयोग गरेर बटन बीचको सरल तुलना छ:
@scope नियमले कम जटिलताको साथ सटीकताको लागि अनुमति दिन्छ। विकासकर्ताले अब वर्ग नामहरू प्रयोग गरेर सीमाहरू सिर्जना गर्न आवश्यक पर्दैन, जसले गर्दा, उनीहरूलाई मूल HTML तत्वहरूमा आधारित चयनकर्ताहरू लेख्न अनुमति दिन्छ, जसले गर्दा प्रिस्क्रिप्टिभ CSS वर्ग नाम ढाँचाहरूको आवश्यकतालाई हटाउँछ। वर्ग नाम व्यवस्थापनको आवश्यकतालाई मात्र हटाएर, @scope ले ठूला परियोजनाहरूमा CSS सँग सम्बन्धित डरलाई कम गर्न सक्छ।
आधारभूत उपयोग
सुरु गर्नको लागि, आफ्नो CSS मा @scope नियम थप्नुहोस् र रूट चयनकर्ता सम्मिलित गर्नुहोस् जुन शैलीहरू स्कोप गरिनेछ:
@scope (
त्यसोभए, उदाहरणका लागि, यदि हामीले
@scope (nav) { a { /* न्याभिस स्कोप भित्र लिङ्क शैलीहरू */ }
a:सक्रिय { /* सक्रिय लिङ्क शैलीहरू */ }
a:active::before { /* अतिरिक्त स्टाइलको लागि स्यूडो-तत्वको साथ सक्रिय लिङ्क */ }
@media (अधिकतम-चौडाइ: 768px) { a { /* उत्तरदायी समायोजन */ } } }
यो, आफ्नै मा, एक ग्राउन्डब्रेकिंग सुविधा छैन। यद्यपि, दायराको सुरुवात र अन्त्य बिन्दुहरूलाई प्रभावकारी रूपमा परिभाषित गर्दै, तल्लो सीमा सिर्जना गर्नको लागि दोस्रो तर्क थप्न सकिन्छ।
/* ul भित्रको कुनै पनि तत्वमा शैलीहरू लागू हुने छैनन् */ @scope (nav) देखि (ul) { एक { फन्ट साइज: 14px; } }
यो अभ्यासलाई डोनट स्कोपिङ भनिन्छ, र त्यहाँ धेरै दृष्टिकोणहरू छन् जसमा समान, उच्च विशिष्ट चयनकर्ताहरूको श्रृंखला DOM संरचनामा जोडिएको, a :not pseudo-selector, वा फरक CSS ह्यान्डल गर्न
निष्कर्ष उपयोगिता-पहिलो CSS फ्रेमवर्कहरू, जस्तै Tailwind, प्रोटोटाइप र साना परियोजनाहरूको लागि राम्रोसँग काम गर्दछ। तिनीहरूका फाइदाहरू तुरुन्तै कम हुन्छन्, तथापि, जब धेरै विकासकर्ताहरू समावेश भएका ठूला परियोजनाहरूमा प्रयोग गरिन्छ। पछिल्लो केही वर्षहरूमा फ्रन्ट-एन्ड विकास बढ्दो रूपमा जटिल भएको छ, र CSS कुनै अपवाद छैन। जबकि @scope नियम एक उपचार-सबै होइन, यसले जटिल उपकरणको आवश्यकतालाई कम गर्न सक्छ। को ठाउँमा वा रणनीतिक वर्ग नामकरणको साथमा प्रयोग गर्दा, @scope ले मर्मत योग्य CSS लेख्न सजिलो र थप रमाइलो बनाउन सक्छ। थप पढाइ
CSS @scope (MDN) "CSS @scope", जुआन डिएगो रोड्रिग्ज (CSS-ट्रिक्स) फायरफक्स 146 रिलीज नोट्स (फायरफक्स) ब्राउजर समर्थन (CanIUse) लोकप्रिय CSS फ्रेमवर्क (CSS २०२४ को राज्य) CSS मा "C": क्यास्केड", थोमस यिप (CSS-ट्रिक) BEM परिचय (BEM प्राप्त गर्नुहोस्)
