Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS Basics – How to comment CSS style definitions.

FustrationOne important practice when creating Cascading Style Sheets (CSS) is to include comprehensive comments in the files. This will help to keep things organized and well documented, which is priceless when it comes to maintaining a site for several years, and avoiding future frustration!

This is the basic structure:

/* your comment here */

It is especially important to comment any hacks that may have been employed when coming up with complex styles. Although hacks should be avoided to ensure that stylesheets are futureproof there may be occasions when it becomes necessary; for example when a client insists on a feature!

There is obviously a slight additional overhead when adding extra text (and therefore bytes) to CSS files, in terms of bandwidth; however the time saving on future maintenance, more than compensates for such additional resources in most circumstances. A later article will focus on CSS file compression and optimisation techniques for sites with high traffic to help improve page load time and bandwidth usage.

Another great use for comments is organizing your files. Douglas Bowman of Stopdesign employs a great technique; it’s kind of like section headers, but for CSS. Simply add a one word title to a section in a comment with an = sign in front of it can more easily be searched for.

/* =lists */

Douglas likes to add dashed line underneath it to make it stand out a little more.

/* =lists
——————– */

Plain and simple, but it sure helps.

Another great tip comes from Garrett Dimon who recommends the use of a color glossary. Basically just put a list of the colors used in your design at the top of your CSS file for quick reference.

/* =colors
Dk blue: #871b2
Lt blue: #1485cc
Yellow: #fff419

NB: credit is hereby given to those named above for sharing their ideas. By sharing we all learn more. Kudos.

This entry was posted on Monday, July 16th, 2007 at 7:06 pm and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.