Using Comments In CSS

It is a very good working practice to comment your code in CSS. Comments serve two major functions:

As notes and reminders: Comments allow you leave yourself notes as to what sections of your stylesheet do, and what they are there for. It is common, as both a freelance and full-time developer, to return to CSS that you have not seen in six months or more: comments allow you to quickly remember what each piece of code does.
As “traffic cones” around code that is problematic: Code surrounded by comment markup immediately ceases to work. Because CSS code is (broadly speaking) read from the top down, you can narrow down the cause of problems by removing sections from execution by means of comments, moving the start and ending comment markup around to analyse problems via a process of elimination.
Content, markup and code within comments does not appear on a web page, but can still be read by anyone what access to your source code. (In CSS, that is as easy as using View CSS in the Web Developer toolbar.

Comment Syntax

/* This is a CSS comment */

CSS comments may also be broken over multiple lines:

/* p { font-color: black; }
hr { color: red; }
both of the above lines will be ignored, together with this one */

It’s worthwhile to stress that, just like HTML comments, you should keep your CSS comments useful and professional. In addition to the obvious reasons, profanity in stylesheets can actually cause them to stop working on computers with overly-sensitive filters, leading to a broken presentation of your website.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.