CSS Comments

CSS is more than just lines of code; it’s a language for communication between developers and designers. To enhance collaboration and maintainability, it’s crucial to add comments to your CSS code. In this tutorial, we’ll explore how to add comments in CSS with code examples and understand their importance for documentation.

Why Use Comments in CSS?

Comments are non-executable lines in your CSS code that provide explanations, notes, and context about your styles. Here’s why they are important:

  1. Documentation: Comments serve as documentation for your CSS, making it easier for you and others to understand the purpose of specific styles.
  2. Collaboration: When multiple developers or designers work on a project, comments help them communicate and coordinate efforts.
  3. Troubleshooting: Comments can assist in debugging by pointing out potential issues or explaining complex solutions.
  4. Future Reference: As projects evolve, comments help you remember why certain styles were applied and allow you to make informed updates.

How to Add Comments in CSS

In CSS, comments can be single-line or multi-line.

Single-line Comments

Single-line comments begin with // and continue until the end of the line. They are ideal for brief comments on a single line.

Multi-line Comments

Multi-line comments start with /* and end with */. They are suitable for longer explanations or comments that span multiple lines.

Examples of Comment Usage

Let’s look at practical examples of how comments can be used in CSS:

Describing Sections

Comments can be used to segment your CSS file and provide a high-level overview of each section.

Explaining Complex Styles

When you have complex or unusual styles, comments can help explain their purpose.

Providing TODOs and Notes

Use comments to mark areas where further work or adjustments are needed.

Best Practices

Here are some best practices for using comments in CSS:

  • Be concise but informative in your comments.
  • Use comments consistently across your CSS files.
  • Remove or update comments that are no longer relevant.
  • Use comments to explain the why, not just the what.


Comments in CSS are invaluable for documentation and collaboration. They provide context, explanations, and guidance within your code. By incorporating comments effectively, you’ll enhance your coding experience and make it easier for others to understand and contribute to your CSS stylesheets.