Skip to main content

<Slushman />

unsplash-logo Pankaj Patel

Write Comments in CSS

Published May 19, 2023

TLDR: watch the YouTube video instead

Write Comments in CSS

When it comes to writing clean and maintainable CSS code, comments play a crucial role in improving readability, collaboration, and long-term code management. By providing context, explanations, and reminders, comments help both current and future developers understand the purpose and functionality of the code. CSS comments can serve as notes for developers and have no impact on the appearance or behavior of the webpage.

Let’s learn the syntax for CSS comments and where you can and cannot put comments in your stylesheets.

CSS Comment Syntax

The syntax for writing comments in CSS is the same for both single-line and multi-li e comments. They are enclosed between a forward slash and an asterisk (/*) to start the comment block and an asterisk and a forward slash (*/) to end the comment block.

Single-line example:

.selector {
    property: value; /* This is a single-line comment */
}

Multi-line example:

/* This is a multi-line comment
   spanning multiple lines of code */
.selector {
    /* Commented out code
       property: value;
    */
}

You can learn more about CSS in the book “HTML and CSS: Design and Build Websites” by Jon Duckett.

Where can you put CSS comments

The following code sample shows all the valid ways to write comments in CSS, like:

/* On the line before the styles */
p {
  color: red; /* Same line, after the declaration */
  /* Same line, before the declaration */ display: flex;
  display: /* Same line, in the middle of the declaration */ flex;
}
/* On the line after the styles */

Conclusion

Well-crafted comments in CSS code can significantly enhance code readability, collaboration, and maintainability. By using single-line and multi-line comments effectively, you can provide essential context, explanations, and reminders to yourself and fellow developers.

Share this post!

Check out these related posts:

Write Comments in HTML

Learn the different ways to write comments in HTML , where you can and cannot put them, and how it can help you write code.