CSS Comments

CSS comments serve as notes or explanations for developers within in our stylesheets that don’t affect our HTML webpage. They are used to clarify code, provide documentation, leave reminders, and temporarily disable specific style rules without removing them entirely.

How to create CSS comments:

• Enclose the comment text within the /* */ comment delimiters.
• Everything within these delimiters is ignored by the browser and won’t affect the visual rendering of the page.
• Comments can appear within CSS rules or blocks, but not within property values.
• Comments often appear with dashes “-” or equals signs “=” to make them easier to find in stylesheets.
• Unlike HTML comments, in CSS they aren’t seen in browser developer tools.
• Comment’s can’t be added styling inline, i.e. inside of HTML elements.

Comment Examples:

CSS:

/* This is a single-line comment. */

/* This is a
   multi-line comment
   spanning multiple lines. */

p {
  color: red; /* This comment is within a declaration block. */
}

/*==========
Emphasized comment with equals signs.
==========*/

Common uses of CSS comments:

• Explanation: Providing context for specific CSS styles or noting changes.
• Organization: Separating CSS document sections of styles for better readability.
• Disabling code: Temporarily removing styles for testing or debugging.
• Collaboration: Leaving notes for other developers working on the CSS.
• Version control: Tracking changes and identifying different versions of the CSS.

Best practices

• Use for clarity, thus not stating the obvious.
• Explain complex logic or non-standard approaches.
• Keep comments concise and to the point.
• Update comments when code changes to maintain accuracy.
• Use a consistent commenting style throughout your stylesheets.

Additional tips:

• Consider using a commenting framework or template for consistency.
• Use clear and descriptive language in your comments.
• Avoid excessive commenting that clutters the code.
• Proofread your comments for typos and grammar errors.

Avoid the temptation of over-commenting, redundant remarks, and messages others wouldn’t understand. Lastly, remember to use comments to build well-organized stylesheets with focused explanations.