When writing CSS you'll often find yourself with an extremely long CSS doc that could pass the 1000 line mark. Commenting every block of CSS can be very helpful and benificial especially if working within a team of developers who may need to change items in the future.
Aside from just commenting your individual blocks of code there's also another VERY helpful method that we often use here at THAT Agency. We simply break our stylesheets into several documents and link them through a CSS import. Breaking everything apart into it's base elements is a handy way of navigating. Some basic categories could be:
Reset - a full CSS reset to alleviate cross browser issues
Structure - base structure of the layout
Text - controls all copy, header tags, horizontal rules, etc.
Navigation - Primary navigation
Header - Logo header, contact information, etc.
Footer - The all important closing statement
First we'll start off with a base StyleSheet.css which would house all classes that don't necessarily fall within the above mentioned categories. Here is a sample stylesheet header:
/*********************************************************************
Sample Cascading Stylesheet (c) 2008
Written by: THAT Agency LLC
All rights reserved.
Any reproduction or intentional misuse is strickly prohibited
*********************************************************************/
/* Reset CSS */
@import url("reset.css");
/* All Text CSS */
@import url("text.css");
/* 960 Grid CSS */
@import url("960.css");
/* Global Navigation CSS */
@import url("global_nav.css");
/* jQuery Tooltip CSS */
@import url("jquery.cluetip.css");
/* jQuery Facebox Lightbox CSS */
@import url("facebox.css");
/*********************************************************************
By using the @import url to bring in corresponding stylesheets allows easy access to the block items such as primary navigation CSS, base Text CSS and various other items that may otherwise get lost within a long CSS document. This also serves as a major help when working with a team of developers as each can then focus on just a particular block of CSS without the need to adjust the main CSS doc.
