Yesterday, I codified my first CSS Guideline and Asked my CSS Sensai to look at it:

Unless there is an overriding reason that is clearly documented in the html or the style sheet, with the exception of default element styling, all styles will be applied to elements using a class, never by id.
Corollary: If there is a class applied to the element, that class must be in the (alphabetically sorted) style sheet, even if marked as a place holder.

Strangely enough the only thing he focused / commented on was my parenthetical insert (alphabetically sorted), He response was, and I quote from IM:

you are demanding that people put their stylesheets in alpahbetical order??
sensai say bad!

When I asked him why he said that, his response was: i can just imagine so many people balking at that idea.

My response to him was blunt, but for you gentle readers, I think I should try to justify my concept in a more logically constructed manner.  Let me start with my first real practical lesson from programming that I didn’t pick up at school but out in the real world: Where ever, and to what ever extent is possible, make your code self documenting, easy to understand, and follow.  My professors in college didn’t stress this a lot, (shouldn’t every function be named “foo”?), but the first time I had to go back and attempt to fix an obscure bug in my code that I had created over 6 months prior I learned the utility of that lesson the hard way.

By my CSS Sensei's own admission, he often ends up putting formatting directly in the html, because he can’t be bothered to find the one style in his style sheet of over a 100 styles. Why is that so hard? because it’s a pain to find it.  Sure he can just use the “find” tool, but my point is that extra step becomes one more barrier / trouble to keep it all centralised so he gets “lazy”. And let’s not even think about what does he do if he is attempting to fix something that was created 6 months ago. 

Let’s go back to my example of yesterday, there was a div that had an id of headertext, then there was a label inside of the div that had a class of headertext.  and the style sheet had an entry for #headertext and TWO entries for .headertext and none of them were located anywhere near each other or in some common manner in the file.  Now that was obviously not a self-documenting or well laid out approach to styling, but unless we put in some sort of rigorous structure to our CSS it seems inevitable that variations of this theme will crop up, and please let’s have sympathy for the programmer who will come after us to maintain our stuff.

Disclaimer: A guideline or rule of mine is never a commandment, I try to stick with them as much as possible, but where logical, a guideline or rule must ALWAYS give way to my only overriding commandment “Make it easy to maintain and understand” otherwise known as the K.I.S.S. principle.  If I have a good reason to dump a guideline because dumping it better serves KISS, I dump it without shedding a tear, I just make sure to leave a quick comment why I did that, so when I, (or god forbid) someone else, has to come back and modify it, they can find their way around.

Alphabetising the style sheet seemed like a no brainer to me.  While writing this post, I’ve been thinking a lot about how to make CSS easier to read / maintain, and here are my new CSS conventions that I am now codifying as:

CSS Guideline 2: Style Sheet Conventions

• Style names should be in camelCase (unless suffixed, see below) 
  
  
• Style sheets should have their styles placed in them alphabetically, ignoring leading “.” and “#”. 

  .headertext and #headertext should be located one after the other.

• A style must be defined in only one place.  It is not acceptable to have two .headertext styles in the sheet(s).
  
  
• Qualified defaults should immediately follow the leading style, prior to qualified styles

  .headertext{ … }
  .headertext <li> {…}
  .headertext .addendum {…}

• Where possible styles should be logically grouped into common sheets

  default.css
  main.css
  marketinglayout.css
  tfsfrmt.css

• When using more then one style sheet, all default formatting styles that are not qualified to a class or id, should only be in a style sheet named defaults.css
  
  
• Put aside time to refactor your styles at the end of the day, and move / modify applied styles according to these conventions before you "check-in" your work.
  
  
• when using more then one style sheet (see convention on grouping), the style’s class name should be suffixed with an underscore “_” and the name (in lowercase) of the sheet it is contained in; or if not suffixed must be located main.css

  Using the examples for style sheet names above consider this html
   
  

     1:  <div id="container">

     2:     <div class="leftContainer_marketinglayout">

     3:        <ul class="ourlist">... </ul>

     4:        <div id="tfsstatus" class=”bugList_tfsfrmt”> ... </div>

     5:     </div>

     6:  </div>

I have NO doubt those last three items will be STRONGLY resisted and have a dedicated following to oppose them.  They represent significant “thought” and work in laying out your CSS, and programmers generally don’t like to do work they regard as “extra”, they just want to get it done.  But if you think about it, if you do follow them as you go along, they would add at most 30 secs to style insert. Even refactoring your styling at the end of the day if done regularly would probably only take 10 mins or so if that much.  And think about the time you will save when 12 months later you need to add that new overlay section to the home page and the master theme page because marketing just came out with a new campaign.

Take a look again that the html snippet above and think how easy it will be to find / modify any style. 

1. line 1, go to the default.css, and find out if there is a <div> style
2. line 2, go to the marketinglayout.css and look under the “l”s (and it has to do with marketing’s stuff; what a pain they are!)
3. line 3, after seeing if there is a <ul> style under leftContainer in marketinglayout.css, go to main.css
4. line 4, go to tfsfrmt.css, and look under “b” (and you don’t need to worry about the id, because it’s never used for formatting [ see CSS Guideline 1 ] )

And let’s face it, I’m just anal enough to follow thru with this.