CSS Comments

Comment का मतलब होता है — कोड के अंदर लिखा हुआ ऐसा टेक्स्ट जो सिर्फ इंसान के पढ़ने के लिए होता है, ब्राउज़र उसे ignore करता है। Simple words में: Comments वो notes हैं जो CSS में explanation देने के लिए लिखे जाते हैं।

CSS Comment का Syntax

CSS में comment लिखने के लिए यह syntax इस्तेमाल होता है

/* यह एक CSS comment है */

यानि: Comment हमेशा /* से शुरू होता है और */ पर खत्म होता है इसके बीच आप जो भी लिखेंगे, वो browser को दिखाई नहीं देगा।

Example 1 — Simple Comment

/* यह पूरे पेज का background color सेट कर रहा है */
body {
  background-color: lightblue;
}

/* heading का रंग नीला है */
h1 {
  color: blue;
}

यहाँ Comments सिर्फ हमें याद दिलाने के लिए हैं कि कौन सा CSS rule क्या काम कर रहा है। ब्राउज़र इन्हें पढ़ता ही नहीं।

Example 2 — Inline Comment (CSS के अंदर लाइन में)

आप CSS rule के बीच में भी comment लिख सकते हैं —

h1 {
  color: green; /* यह heading को हरा कर रहा है */
  text-align: center;
}

यहाँ comment उसी लाइन में लिखा गया है, और बाकी कोड पर कोई असर नहीं पड़ेगा।

Comments का Use क्यों करें?

कारण (Reason)	समझ (Explanation)
🧠 Code समझने के लिए	जब कोड बड़ा हो जाए तो हर section का मतलब याद रखना आसान हो जाता है।
👥 Team Work में मदद	जब कई लोग एक साथ project पर काम करते हैं तो सबको clarity मिलती है।
🧱 Testing या Debugging	किसी code को अस्थायी रूप से disable करने के लिए भी comments helpful हैं।
🪄 Documentation के लिए	Future में reference के लिए notes रखना।

Example 3 — बड़े Project में Comments का Use

/* -------------------------------
  Global Styles
-------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* -------------------------------
Layout Section
-------------------------------- */
.container {
  width: 90%;
  margin: auto;
}

/* -------------------------------
   Header Styling
-------------------------------- */
header {
  background-color: #0077cc;
  color: white;
  padding: 20px;
  text-align: center;
}

इस तरह के section comments बड़े projects में code को साफ-सुथरा और organized रखते हैं।

CSS Comments की गलतियाँ (Common Errors)

गलती (Mistake)	क्यों गलत है (Why it's Wrong)
// यह comment है	❌ CSS में//valid नहीं है, ये JS (JavaScript) के लिए होता है।
* यह गलत है */	❌ Comment की शुरुआत में *`/` जरूरी है। यह एक अधूरा (incomplete)** comment है।
/* comment शुरू / color: red; / खत्म */	⚠️ CSS rule को comment के अंदर लिखने से वो disable (अक्षम) हो जाएगा। CSS rule को comment के बाहर होना चाहिए।

Example — Code Temporarily Disable करना

कभी-कभी testing के लिए आप कोई rule off करना चाहते हैं, तो उसे comment कर सकते हैं

/* h1 {
  color: red;
} */

अब यह CSS rule काम नहीं करेगा क्योंकि यह comment बन गया है। जब जरूरत हो, फिर uncomment कर दीजिए।

Quick Recap

Concept (अवधारणा)	Description (विवरण)
Comment Syntax (टिप्पणी सिंटैक्स)	`/* comment text */`
Browser Behavior (ब्राउज़र व्यवहार)	Ignore करता है (Ignoring)
Inline Comment (इनलाइन टिप्पणी)	Property के साथ लिखा जा सकता है (Can be written with a property)
Use (उपयोग)	Code explain, testing, teamwork, documentation (कोड समझाना, परीक्षण, टीमवर्क, दस्तावेज़ीकरण)
Mistake (गलती)	`//`का use CSS में नहीं किया जाता (`//`is not used in CSS)

Pro Tip

हमेशा अपने कोड के हर section की शुरुआत में छोटा सा comment लिखें। Comment को meaningful रखें — सिर्फ “good” या “nice” लिखने से कुछ फायदा नहीं होता Example:

/* Main navigation bar styling */
nav { background: #222; }

Final Thoughts

Comments छोटे होते हैं लेकिन professional coding की पहचान होते हैं। एक अच्छा developer हमेशा अपने CSS को well-documented रखता है ताकि 6 महीने बाद भी कोड देखकर तुरंत समझ में आ जाए कि क्या और क्यों किया गया था। अब तैयार हो जाइए अगले लेसन के लिए — “CSS Errors” जहाँ आप सीखेंगे कि CSS में कौन-कौन सी आम गलतियाँ होती हैं, और उन्हें कैसे ठीक करें ताकि आपका code हमेशा perfect चले।