CSS Comments for Good Web Development

Professional front-end web design and development involves the creation of Cascading Style Sheets (CSS) to keep the content of a web document separate from the style. The content is the information; the style is the visual aspect of the page including such things as color schemes, layout, styled links, and the control of images. A web site could use one simple style sheet that any web designer/developer could read and instantly know what's going. However, another site might use multiple complicated style sheets that, without CSS comments, could be time consuming to fully decipher.

One thing that my professors stressed when teaching web languages was the need for web designers and developers to work as a team. The other was the unique advantages of using external style sheets. We spent little time on inline/embedded comments and internal sheets partly because they don't tend to be as involved as external sheets. When you write CSS code, you're dictating the visual presentation of your web pages that either contain the embedded code or that point to it in an external file.

Some developers write style sheets for different browsers. Others include necessary hacks within one sheet to have control over appearance in browsers that give quirky results when the page is displayed. Still others are just highly complicated with literally hundreds of lines of code to achieve the design required. Many work on a front or back-end development team where everyone needs to know what is going on at all times. CSS comments in your code is a professional way of communicating information about what each section of code does.

This isn't just for the benefit of team work, but also for yourself if you write complicated styles. If you have to modify style sheets containing several lines of code at a later date, it might take some time trying to re-figure out what is going on. Time can be saved by simply including simple CSS comments in plain language explaining the purpose of each section.

Comments in CSS are the same as multi-line comments in C programming. They begin with /* and end with */. For example, you might want to begin a style sheet with basic information about the creator of it, how to contact him if you have questions, his web site if he has one etc. Below is how such information could be commented.

/*-------------------

author: Sam O'Brien

email: sam@sample.com

web site: StylesBySam.com

------------------------*/

The only purpose of the dashes is to block off the comments. Remember, everything inside the opening and closing marks is part of the comment and will in no way affect your code. You can use comments to make notes to yourself and to designate where code that styles specific sections of your page begins and ends.

If you are working with an extensive style sheet with many lines of code requiring numerous comments, you might want to consider removing the comments before the sheets go live. Comments do increase file size. If you really need to keep files as small as possible, consider having two copies, one with comments and one without. The one with comments would be kept for yourself as a reference. The one without comments would go live. A good CSS optimizer can remove comments and whitespace for you.