How to Include Comments in CSS Code

Writing clear and maintainable CSS isn’t just about how you style elements—it’s also about how you communicate why you’re doing it. This is where CSS comments come in. Comments allow developers to explain sections of code, provide context, and leave notes for themselves or others working on the project.

In this article, you’ll learn:

• How to write comments in CSS
• Best practices for using comments effectively
• Common use cases and examples

---

✅ How to Write a Comment in CSS

CSS comments use a block-style syntax that starts with /* and ends with */.

📌 Syntax:

/* This is a single-line comment */

body {
  background-color: #f4f4f4; /* Light gray background */
}

/* 
  This is a multi-line comment.
  It can span multiple lines.
*/

⚠️ CSS comments do not support // like in JavaScript.

---

📋 Where You Can Use Comments

You can place comments:

• Above a CSS rule
• Inside a rule (next to a declaration)
• Between selectors
• In a custom tailwind.config.js or preprocessor file (if using SCSS or LESS)

💡 Example:

/* Header styling */
header {
  background: #ffffff; /* White background */
  padding: 20px;
}

/* Reset default list styles */
ul {
  list-style: none;
  padding: 0;
}

---

🚫 Where Comments Don’t Work

Comments inside inline style attributes in HTML are not valid and will cause syntax errors.

<!-- ❌ This will not work -->
<div style="color: red; /* this is a comment */">Hello</div>

Only use comments inside CSS files or <style> blocks in HTML:

<style>
  /* ✅ This is valid */
  p {
    color: blue;
  }
</style>

---

🧠 Why Use Comments in CSS?

✅ Common Use Cases:

• Explaining complex styles
• Marking TODOs or FIXMEs
• Grouping related styles
• Leaving instructions for other developers
• Temporarily disabling styles (commenting out)

🔧 Example: Temporarily Disable a Line

/* color: red; */

This is helpful during debugging without deleting the line.

---

📝 Best Practices

Tip	Reason
Be concise but clear	Avoid long explanations; get to the point
Use consistent formatting	Makes code easier to scan and maintain
Avoid excessive comments	Don’t over-comment obvious code
Group sections with headings	Helps structure large CSS files

📌 Example of a section heading comment:

/* ===========================
   Navigation Menu Styles
=========================== */
.nav {
  background: #333;
  color: #fff;
}

---

🎨 In Tailwind CSS?

While Tailwind encourages utility-first styling and minimal custom CSS, comments are still useful in:

• Component-level styles
• Custom class definitions
• Utility overrides
• Tailwind config files

/* Custom utilities for buttons */
.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2;
}

---

🧾 Summary

To include comments in CSS:

• Wrap them with /* ... */
• Use them to explain, organize, or temporarily disable styles
• Don’t use // or place comments in inline styles

---

🔑 Cheatsheet

Task	How to do it
Single-line comment	/* This is a comment */
Multi-line comment	/* Line 1\nLine 2 */
Disable a CSS rule	/* display: none; */