CSS Comments

कभी-कभी किसी stylesheet की सबसे काम की line CSS होती ही नहीं, वह एक note होती है जो code के अगले पढ़ने वाले के लिए छोड़ी गई है (अक्सर आपका ही भविष्य वाला खुद)। CSS comments बिल्कुल इसी काम के लिए हैं। एक CSS comment forward slash और asterisk से शुरू होती है, और asterisk और forward slash पर खत्म होती है। उन markers के बीच जो कुछ भी है उसे browser पूरी तरह नज़रअंदाज़ कर देता है, इसलिए आप comments का इस्तेमाल tricky decisions समझाने, किसी लंबी stylesheet के sections को label करने, या testing के दौरान किसी rule को अस्थायी रूप से disable करने के लिए कर सकते हैं। cookiescursor.com जैसे किसी असली project पर, कुछ अच्छी जगह रखे गए comments महीनों बाद काफ़ी confusion बचा सकते हैं जब किसी को (शायद आपको ही) फिर से CSS update करनी पड़े।

In this page:

CSS में Comment क्यों करें
Comment Syntax
Code को अस्थायी रूप से Comment Out करना
Multi-line Comments
Comment Best Practices

Syntax

css

/* single-line comment */

selector {
  property: value; /* inline comment */
}

CSS में Comment क्यों करें

जैसे-जैसे कोई stylesheet बढ़ती है, यह भूलना आसान हो जाता है कि कोई particular rule क्यों मौजूद है। Comments उस context को code में सीधे capture कर लेते हैं, ठीक वहाँ जहाँ भविष्य के पढ़ने वालों को इसकी ज़रूरत होगी। सही जगह रखा गया एक comment भविष्य के किसी developer को, आपके अपने भविष्य के खुद सहित, वही reasoning फिर से शुरू से derive करने से बचा सकता है।

Note: एक comment लिखें जो 'क्यों' समझाए, 'क्या' नहीं, CSS खुद ही पहले से दिखा देती है कि कोई rule क्या करता है।

Warning: बिना किसी comment वाली stylesheet महीनों बाद safely edit करना genuinely मुश्किल हो सकती है, यहाँ तक कि उस व्यक्ति के लिए भी जिसने इसे originally लिखा था।

उदाहरण: Why Comment CSS

css

<style>
/* Fixes a Safari flexbox gap bug -- see issue #482 */
.container {
  gap: 16px;
}
</style>
<div class="container" style="display:flex">
  <div style="background:#cde">One</div>
  <div style="background:#fdc">Two</div>
</div>

Comment Syntax

एक CSS comment हमेशा /* से शुरू होती है और */ पर खत्म होती है। उन दो markers के बीच जो भी लिखा है, यहाँ तक कि कई lines में भी, page render होते समय पूरी तरह नज़रअंदाज़ हो जाता है। कुछ languages के उलट, CSS में कोई single-line comment syntax नहीं है, इसलिए एक line वाले note को भी पूरे slash-star wrapper की ज़रूरत होती है।

Note: ज़्यादातर code editors आपको एक keyboard shortcut से किसी selected CSS block को comment out करने देते हैं, हर बार markers को हाथ से type करने की ज़रूरत नहीं।

Warning: CSS comment marker के रूप में // को support नहीं करती, वह syntax JavaScript जैसी दूसरी languages का है, CSS का नहीं।

उदाहरण: Comment Syntax

css

<style>
/* This is a CSS comment, it can span
   multiple lines */
p {
  color: blue;
}
</style>
<p>Blue text; the comment above is never rendered.</p>

Code को अस्थायी रूप से Comment Out करना

किसी मौजूदा declaration को /* */ में wrap करना उसे बिना delete किए off कर देता है, जो यह test करने का एक तेज़ तरीका है कि बिना किसी particular style के page कैसा दिखता है। किसी rule को permanently हटाने का फ़ैसला करने से पहले layout issue debug करने का यह एक तेज़, non-destructive तरीका है।

Note: किसी layout issue को debug करते समय किसी संदिग्ध rule को comment out करें, यह अक्सर यह confirm करने का सबसे तेज़ तरीका है कि असल में समस्या कौन-सा rule पैदा कर रहा है।

Warning: Testing खत्म करने के बाद commented-out code को हटाना या restore करना याद रखें, बचे हुए disabled rules stylesheet को बाद में पढ़ने में confusing बना देते हैं।

उदाहरण: Commenting Out Code Temporarily

css

<style>
p {
  color: blue;
  /* background: yellow; */
}
</style>
<p>Blue text; the yellow background is commented out.</p>

Multi-line Comments

क्योंकि एक CSS comment बस /* से */ तक चलती है, यह जितनी आसानी से एक line में हो सकती है उतनी ही आसानी से कई lines में भी फैल सकती है, जो इसे लंबी explanations या section headers के लिए काम का बनाता है। यह किसी बड़ी stylesheet के major sections को label करने के लिए खासतौर पर उपयोगी है, जैसे '/* Navigation styles */'।

Note: किसी लंबी stylesheet को साफ़ तौर पर labeled हिस्सों में बाँटने के लिए एक multi-line comment को visual section header की तरह इस्तेमाल करें।

Warning: एक बहुत लंबा, unclosed comment गलती से उन rules को निगल सकता है जिन्हें आप active रखना चाहते थे, हमेशा closing */ को double-check करें।

उदाहरण: Multi-line Comments

css

<style>
/*
  Navigation styles
  Used across every page in the site
*/
nav {
  display: flex;
}
</style>
<nav style="background:#eee; padding:8px"><a href="#">Home</a> <a href="#">About</a></nav>

Comment Best Practices

अच्छे CSS comments छोटे, focused होते हैं, और कुछ ऐसा समझाते हैं जो code अकेले नहीं समझा सकता, जैसे कोई business reason, कोई browser quirk, या कुछ न हटाने की warning। ऐसे comments जो सिर्फ selector name दोहराते हैं वे बिना कोई असली value जोड़े सिर्फ clutter बढ़ाते हैं।

Note: अगर आप खुद को यह explain करते पाएँ कि कोई property क्या करती है, तो सोचें कि क्या comment सच में ज़रूरी है, comments को 'क्यों' पर focus रखें।

Warning: पुराने comments जो अब उस code से match नहीं करते जिसे वे describe करते हैं, वे किसी comment के न होने से भी बुरे हैं, क्योंकि वे अगले पढ़ने वाले को actively गुमराह करते हैं।

उदाहरण: Comment Best Practices

css

<style>
/* Bad: restates the obvious -- sets color to red */
p {
  /* Good: explains why -- matches brand red from the style guide */
  color: red;
}
</style>
<p>Text colored with the brand red.</p>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS How To Next Lesson → CSS Errors