किसी नियम का असर किन तत्वों पर होगा, इसे नियंत्रित करने के लिए कंपोनेंट-स्कोप्ड CSS का उपयोग करें, और नियमों को कई पेजों पर दोबारा इस्तेमाल करने के लिए साझा स्टाइलशीट का। अपने Mac पर छोटे HTML प्रोजेक्ट के लिए, आप दोनों को मिला सकते हैं; फ़ाइलों की व्यवस्था इस आधार पर चुनें कि आपको क्या स्थानांतरित करना और बनाए रखना है।

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

आप असल में क्या चुन रहे हैं?

यहाँ दो फ़ैसले हैं: CSS कहाँ रखा जाए, और वह किन तत्वों को चुने। एम्बेडेड स्टाइलशीट HTML दस्तावेज़ के style तत्व में रहती है। बाहरी स्टाइलशीट एक अलग संसाधन होती है, जिसे link के साथ rel="stylesheet" और href पथ का उपयोग करके जोड़ा जाता है। CSS देने के लिए HTML में यही तरीके हैं; इनमें से कोई भी व्यवस्था सामान्य सिलेक्टरों को अपने आप कंपोनेंट की सीमा नहीं देती। HTML Standard: The style element, MDN: External resource link element.

मूल CSS @scope चयन की सीमा जोड़ता है। आप एक मूल तत्व की पहचान करते हैं, फिर ऐसे नियम लिखते हैं जो उस सबट्री के भीतर लागू होते हैं। जब आसपास के दस्तावेज़ में मिलते-जुलते तत्व हों, तो इससे छोटे सिलेक्टर उपयोगी बने रह सकते हैं। Chrome का दस्तावेज़ मूल स्कोपिंग और उन टूलों के बीच भी अंतर बताता है जो जनरेट की गई क्लास या एट्रिब्यूट के साथ सिलेक्टरों को फिर से लिखते हैं। यदि किसी कंपोनेंट के उदाहरण के लिए ऐसे टूल पर निर्भरता है, तो वह एक अतिरिक्त पूर्वापेक्षा है। Limit the reach of your selectors with the CSS @scope at-rule.

इस काम के लिए, नीचे दिए गए निर्णय-सहायक का उपयोग करें। यह दस्तावेज़ित तरीकों पर आधारित संपादकीय सुझाव है, ब्राउज़र की आवश्यकता नहीं।

आपका तात्कालिक काम सुझाई गई व्यवस्था इसके साथ क्या ले जाना होगा
एक छोटे पेज को एक ही फ़ाइल में रखना CSS को style तत्व में एम्बेड करें HTML, और अलग से संदर्भित की गई कोई भी संपत्ति
कई पेजों पर एक ही कार्ड बनाए रखना समर्पित कंपोनेंट क्लास वाली बाहरी स्टाइलशीट का उपयोग करें हर HTML पेज और साझा CSS
तय सबट्री के भीतर छोटे सिलेक्टरों का उपयोग करना स्पष्ट मूल वाली @scope नियमावली जोड़ें, एम्बेडेड या बाहरी रूप में CSS और मेल खाता मूल तत्व रखने वाला मार्कअप
उन ब्राउज़रों को सपोर्ट करना जिनमें स्कोपिंग का समर्थन अनिश्चित है ज़रूरी स्टाइलिंग सामान्य क्लास नियमों में रखें HTML और वह स्टाइलशीट जिसमें वे नियम हैं

इसलिए “पोर्टेबल” का ठोस अर्थ तय करना ज़रूरी है। एक HTML फ़ाइल को अकेले स्थानांतरित करना सुविधाजनक है। HTML और CSS वाला फ़ोल्डर भी पोर्टेबल हो सकता है, बशर्ते उसके पथ सही रहें। दोबारा इस्तेमाल किए जा सकने वाले कंपोनेंट के लिए एक तीसरे तरह की पोर्टेबिलिटी चाहिए: गंतव्य में वह मार्कअप हुक मौजूद होना चाहिए जिसकी उसके सिलेक्टरों को अपेक्षा है।

अपने Mac पर दो फ़ाइलों वाला कामकाजी उदाहरण बनाएँ

form-study नाम का फ़ोल्डर बनाएँ। उसमें index.html और shared.css नाम की दो सादा-पाठ फ़ाइलें सहेजें। अगर आप TextEdit का उपयोग करते हैं, तो कोड चिपकाने से पहले File > New चुनें, फिर Format > Make Plain Text चुनें। HTML फ़ाइल के लिए, Apple .html एक्सटेंशन के साथ सहेजने और पूछे जाने पर Use .html चुनने का निर्देश देता है। सुनिश्चित करें कि स्टाइलशीट का वास्तविक फ़ाइल नाम shared.css हो, और उसके अंत में .txt न जुड़ा हो। Work with HTML documents in TextEdit on Mac.

इस पूरे HTML दस्तावेज़ को index.html के रूप में सहेजें:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

इस पूरी स्टाइलशीट को shared.css के रूप में सहेजें:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

index.html को Safari या किसी अन्य डेस्कटॉप ब्राउज़र में खोलें। अपेक्षित परिणाम है नीले गोल चौकोर आकार वाला सफ़ेद बॉर्डरयुक्त कार्ड, जिसके बाद बिना बॉर्डर वाला नोट हो। स्टाइलशीट का कनेक्शन MDN के दस्तावेज़ित तरीके के अनुसार है: HTML, स्टाइलशीट लिंक पर href के ज़रिए CSS संसाधन का नाम बताता है। MDN: Including a stylesheet.

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

डिज़ाइन साझा करने के लिए उसी फ़ोल्डर में दूसरा HTML पेज बनाएँ और वही स्टाइलशीट लिंक इस्तेमाल करें। अब दोनों पेज एक CSS फ़ाइल का संदर्भ देंगे। उस फ़ाइल में बदलाव को उससे लिंक किए गए हर पेज का बदलाव मानें; साझा नियम बदलने के बाद हर पेज की समीक्षा करें।

मूल स्कोप्ड CSS कब मदद करता है?

@scope का उपयोग तब करें जब किसी कंपोनेंट में कई ऐसे तत्व हों जिनके लिए सरल स्थानीय सिलेक्टर उपयोगी हों, विशेषकर जब आपको नेस्टेड सामग्री के चारों ओर स्पष्ट निचली सीमा चाहिए। CSS Cascading and Inheritance विनिर्देश स्कोप को एक मूल तत्व और वैकल्पिक सीमा-तत्वों के माध्यम से परिभाषित करता है। मूल तत्व शामिल होता है; सीमा-तत्व और उसके वंशज स्कोप्ड नियमों से मेल खाने से बाहर रहते हैं। यह विनिर्देश कार्यकारी मसौदा है। CSS Cascading and Inheritance Level 6: Scoping Styles.

एक छोटे प्रयोग के लिए, नीचे दिया गया वैकल्पिक अंश shared.css के अंत में जोड़ें। यह मौजूदा नमूना मार्कअप का उपयोग करता है और कार्ड के पैराग्राफ का रूप बदलता है:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

समर्थित ब्राउज़र में, कार्ड के भीतर के पैराग्राफ को हल्का बैकग्राउंड और पैडिंग मिलेगी। नोट का पैराग्राफ उस नियम के स्कोप के बाहर रहेगा। CSS फिर भी साझा फ़ाइल में रहता है: स्कोपिंग और साझाकरण साथ काम करते हैं।

अगर बाद में आप nested-sample क्लास वाला कोई नेस्टेड क्षेत्र जोड़ते हैं, तो इस वैकल्पिक अंश की जगह नीचे वाला अंश इस्तेमाल कर सकते हैं। यह सीमा का उदाहरण है; मूल पेज में अभी ऐसा कोई नेस्टेड क्षेत्र नहीं है।

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

सीमा इन सिलेक्टरों के मेल से नेस्टेड क्षेत्र को बाहर रखती है। इससे पूरी स्टाइल का अलगाव नहीं बनता: color और font-family जैसे विरासत में मिले गुण अब भी स्कोप की सीमा के पार जा सकते हैं। किसी नेस्टेड तत्व का रूप अब भी उसके मूल तत्व जैसा दिखे, तो यह अंतर ध्यान में रखें। MDN: @scope description.

.shape-card जैसा स्पष्ट मूल यह भी दिखाता है कि CSS को फ़ाइलों के बीच ले जाने पर किस चीज़ पर निर्भरता रहेगी। गंतव्य दस्तावेज़ में इस क्लास वाला तत्व होना चाहिए। केवल स्टाइलशीट को स्थानांतरित करने से आवश्यक मार्कअप नहीं मिलेगा।

ब्राउज़र समर्थन की सीमाएँ क्या हैं?

MDN फ़िलहाल @scope को Baseline 2026 के रूप में चिह्नित करता है—यह मार्च 2026 से नवीनतम ब्राउज़र संस्करणों में उपलब्ध हुआ। पुराने ब्राउज़रों में इसका समर्थन नहीं हो सकता। आपके डेस्क पर Mac होने से यह पता नहीं चलता कि उस पर इंस्टॉल किया गया ब्राउज़र कौन-सी CSS सुविधाएँ समर्थित करता है; जिन संस्करणों का आप उपयोग करना चाहते हैं, उन्हें संगतता जानकारी से जाँचें। MDN: @scope browser compatibility.

पुराने ब्राउज़र ज़रूरी हों, तो कार्ड की ज़रूरी स्टाइलिंग ऊपर दिए गए सामान्य क्लास नियमों में रखें। वैकल्पिक स्कोप्ड पैराग्राफ स्टाइलिंग तब अतिरिक्त सुविधा के रूप में रह सकती है। CSS की त्रुटि-प्रबंधन व्यवस्था ब्राउज़रों को असमर्थित सामग्री छोड़कर वैध CSS को संसाधित करते रहने देती है, इसलिए स्टाइलशीट मौजूद होने का अर्थ यह नहीं कि उसके भीतर का हर नियम लागू हुआ। MDN: CSS error handling.

@scope के बिना वही पैराग्राफ स्टाइलिंग पाने के लिए, कार्ड के पैराग्राफ को shape-card__caption जैसी समर्पित क्लास दें, फिर सामान्य नियम में उस क्लास को लक्षित करें। इससे मार्कअप में एक हुक जुड़ता है, लेकिन परिणाम के लिए मूल स्कोपिंग पर निर्भरता नहीं रहती।

style तत्व में scoped एट्रिब्यूट न जोड़ें और उससे वही व्यवहार मिलने की अपेक्षा न करें। मौजूदा HTML Standard में उस तत्व के एट्रिब्यूट की सूची में यह शामिल नहीं है। मूल CSS स्कोपिंग के लिए @scope नियम का उपयोग होता है। HTML Standard: The style element, MDN: @scope syntax.

पेज को पोर्टेबल कैसे रखें?

इस उदाहरण के लिए, पूरा form-study फ़ोल्डर ले जाने से index.html और shared.css के बीच का संबंध बना रहता है। केवल HTML ले जाने पर उसकी स्टाइलशीट पीछे छूट जाती है। तैयार किए गए पेज को सौंपने या उसकी फ़ाइलें फिर से व्यवस्थित करने से पहले इस सरल निर्भरता अनुबंध का पालन करें:

  1. मार्कअप: कंपोनेंट क्लास और सिलेक्टरों के लिए ज़रूरी संरचना बनाए रखें।
  2. स्टाइलशीट: CSS फ़ाइल शामिल करें और HTML लिंक को उसके स्थान पर इंगित करते रहें।
  3. संसाधन: CSS द्वारा संदर्भित फ़ाइलें शामिल करें और उनके पथ बनाए रखें या अपडेट करें।
  4. ब्राउज़र: पेज खोलने वाले ब्राउज़र संस्करणों के लिए समर्थित स्टाइलिंग तरीका बनाए रखें।

तीसरी जाँच तब अहम हो जाती है जब कंपोनेंट में फ़ॉन्ट या सजावटी फ़ाइलें जुड़ती हैं। MDN के अनुसार, CSS के सापेक्ष URL स्टाइलशीट URL के आधार पर हल होते हैं। इसलिए घोषणाओं को किसी दूसरे फ़ोल्डर की स्टाइलशीट में ले जाने से वे जिस संसाधन स्थान की ओर इशारा करते हैं, वह बदल सकता है। MDN: url() CSS function.

उदाहरण के लिए, यदि बाहरी स्टाइलशीट प्रोजेक्ट फ़ोल्डर से styles सबफ़ोल्डर में जाती है, तो url("assets/tile.png") का संदर्भ देने वाली सीधी घोषणा अब styles/assets के भीतर इंगित करेगी। पथ अपडेट करें या उससे मेल खाती डायरेक्टरी संरचना बनाए रखें। कामकाजी उदाहरण इस निर्भरता से बचता है, क्योंकि उसका आकार पूरी तरह CSS से बनाया गया है।

अगर एक ही फ़ाइल में सामग्री सौंपना प्राथमिकता है, तो दिए गए CSS को दस्तावेज़ के head के भीतर style तत्व में एम्बेड करें और स्टाइलशीट लिंक हटा दें। तब मौजूदा उदाहरण के लिए केवल HTML फ़ाइल चाहिए। वही सिलेक्टर बनाए रखें, जिसमें कोई वैकल्पिक स्पष्ट-मूल वाला @scope ब्लॉक भी शामिल है। HTML, style तत्व के माध्यम से स्टाइलशीट एम्बेड करने का समर्थन करता है। HTML Standard: The style element.

स्थानांतरित करके और फिर से लोड करके फ़ैसला जाँचें

पूरे प्रोजेक्ट फ़ोल्डर की किसी दूसरी जगह कॉपी बनाएँ, फिर कॉपी किए गए HTML को ब्राउज़र में खोलें। उस कॉपी में shared.css में आकार का बैकग्राउंड रंग बदलें, फ़ाइल सहेजें और पेज फिर से लोड करें। दिखाई देने वाला बदलाव जाँचता है कि आपने कॉपी किए गए पेज की स्टाइलशीट संपादित की है।

इसके बाद कार्ड और नोट, दोनों देखें। सही परिणाम में कार्ड की स्टाइलिंग बनी रहती है और नोट वैकल्पिक स्कोप्ड पैराग्राफ नियम के बाहर रहता है। अगर पूरे पेज की स्टाइलिंग गायब हो जाए, तो पहले CSS फ़ाइल का नाम और लिंक पथ जाँचें। अगर केवल वैकल्पिक स्टाइलिंग गायब हो, तो ब्राउज़र समर्थन और स्कोप के मूल तत्व की जाँचें। अगर किसी असंबंधित तत्व का रूप बदल जाए, तो ऐसे सिलेक्टरों की जाँचें जो इच्छित कंपोनेंट से आगे तक पहुँचते हैं।

TextEdit में HTML फिर से खोलते समय File > Open चुनें, फिर स्रोत देखने के लिए ज़रूरत पड़ने पर Show Options और Ignore rich text commands चुनें। Apple भविष्य में फ़ाइलें खोलने के लिए Display HTML files as HTML code instead of formatted text सेटिंग का भी दस्तावेज़ देता है। Work with HTML documents in TextEdit on Mac.

जब इस छोटे पेज को एक साथ रखना मुख्य काम हो, तो एम्बेडेड CSS चुनें। जब कई पेजों को एक जैसे, बनाए रखे जाने वाले नियम चाहिए हों, तो साझा स्टाइलशीट चुनें। जहाँ सीमाएँ उन नियमों को सरल बनाएँ और ब्राउज़र समर्थन उपलब्ध हो, वहाँ मूल स्कोपिंग जोड़ें। अंत में वास्तविक फ़ाइलों को स्थानांतरित करके फिर से खोलें: इससे मार्कअप, स्टाइलशीट और संसाधनों के उन संबंधों की जाँच होती है जिन पर आपकी चुनी हुई व्यवस्था निर्भर करती है।

स्रोत