Best Practices for CSS Style Sheets

A while back Microsoft released a program called "StyleCop".  StyleCop is almost like a style guide for code, kind of like what CSS is for HTML.  It gives the rules for how HTML should be setup and react.  Now I only wish someone released a stylecop for CSS.  In my many years of dealing with CSS I had to come up with a best practice or thought on how I would like all my Style Sheets to look and feel.  This would help me determine exactly where to look over each sheet.  I realized that this guide was in my head and I had never put it down on paper.  So here today, I won't put it down on paper, but will post it here for all to see.  I have seen many style sheets and this is the guide that I use when I start to build my sheets.

• Style sheets should always have the basic essential styles which are things like underline, bold, italics, predefined h1, h2, and h3 fonts, colors, link variations, and sizes of fonts.  This allows for a similar look and feel on every page of the site.
• Style sheets should be downloaded as fast as possible from the server and therefore must have the least possible white space while still allowing for the ability to separate styles with the human eye.  This is where a one line per style should come into practice.  For each style used, it should only take up one line of the style sheet.  No longer should you use one line per declaration of style.  This new way is an easy way of looking over each feature of the style while still allowing for fast downloads of the sheet. For Example:

• Style names should be camel cased starting with the name/abbreviation of the tag the style applies to and then the name of the div tag/style. 
  
  • For Example:  I have a Div tag with an id of userName, I should name the style divUserName. 
    
  • If I have no name for the tag, I should name a type of ID for the style.  For Example: divPageInformation. 
    
  • Unless it is a standard id like .bold, .italic, etc... I will not declare what the style does, rather I would declare where the style belongs. For example for links: aPageTitle
• Style grouping is a way to organize your sheet for better readability and navigation of the sheet.  In the past, people used to just put styles up on the sheet and forget it.  Not thinking that they would have to later come back to the sheet for editing.
  • If the style is generic through out the entire site, I group it at the top of the sheet with all the other generic styles.
  • I then group all the styles by page and then control/object it styles.  I then alphabetize the styles in each group for a fast skimming rate.

For Example:  I have an accordion that is generic along the entire site, so I would group the entire accordion together and then alpha sort the tags.

/* Accordion */
.accordionContent { border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; }
.accordionHeader { border: 1px solid #2F4F4F; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; }
.accordionHeader a { text-decoration: none; }
.accordionHeader a:hover { text-decoration: underline; }
.accordionHeaderSelected { border: 1px solid #2F4F4F; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; }
.accordionHeaderSelected a { text-decoration: none; }
.accordionHeaderSelected a:hover { text-decoration: underline; }

For another Example:  I have a reports page.  I group the reports page together separated by one line and then group the report styles together while sorting them.

.liReportChkbxs { list-style: horizontal; margin: 0 5px 0 0; display: inline; }
.ulReportChkbxs { float: left; margin: 0 5px 0 0; }

.liReportsList { list-style: none; padding: 5px 0 5px 5px; }
.liReportsListHorizontal { display: inline; }
.ulReportsList { text-align: left; display: block; list-style: none; }

I hope that helps in your style sheet endeavors.  I sure do wish I didn't have to go through the learning phase of this type of style.  I would love to hear my readers thoughts on this guide and how they differ from it.