I realized today that there is something that I have been doing with Cascading Style Sheets (CSS) for some time that, while it seemed obvious to me, has turned out to be helpful for others. For most web developers, CSS is a straight, static file with definition after definition. Good little programmers will at least provide comments to separate sections or specify the purpose of obscure classes, but thats about it. About the time I switched to pure CSS layouts, and JavaScript free drop down menus (a la suckerfish), I noticed my CSS was getting unmanageable. Go back and look at a style sheet you hacked together last year and see how clear it is to you now.

We indent code for clarity, why not CSS? “But CSS isn’t structural!” you say, “there is no clear way to determine what should nest what”. That is true, but that doesn’t deter me. Layout stuff is easy, since it closely parallels your HTML, which is quite structured.

Consider the following HTML:

  1. <div id="container">
  2.     <div id="left_panel">
  3.         <span class="left_panel_header">I'm so, like, left</span>
  4.         <h4>Some Stuff:</h4>
  5.         <ul>
  6.             <li>One</li>
  7.             <li>Two</li>
  8.             <li>Three</li>
  9.     </div>
  10. </div>

Your CSS could look like this:

  1. #container {
  2.     background-color: #336699;
  3.     color: #ffffff;
  4. }
  5. #left_panel ul li {
  6.     text-indent: 20px;
  7.     font-weight: bold;
  8. }
  9. h4 {
  10.     color: #00FF00;
  11.     text-align: right;
  12. }
  13. #left_panel ul {
  14.     margin: 0;
  15.     padding: 0;
  16. }
  17. #left_panel {
  18.     float: left;
  19.     border: 1px solid #AACC00;
  20. }
  21. html, body {
  22.     font-family: Georgia;
  23. }

Now, there certainly isn’t anything wrong with the above CSS, it’s quite functional. However, over time it will become hard to read, and subsequent modifications will take more and more time. This is how I would create it:

  1. /* "header" definitions */
  2. html, body {
  3.     font-family: Georgia;
  4. }
  5. /* Page container */
  6. #container {
  7.     background-color: #336699;
  8.     color: #ffffff;
  9. }
  10.     /* Left Panel */
  11.     #left_panel {
  12.         float: left;
  13.         border: 1px solid #AACC00;
  14.     }
  15.  
  16.         /* left panel menu */
  17.         #left_panel ul {
  18.             margin: 0;
  19.             padding: 0;
  20.         }
  21.  
  22.             #left_panel ul li {
  23.                 text-indent: 20px;
  24.                 font-weight: bold;
  25.             }
  26.  
  27. /* Global style definitions */
  28. h4 {
  29.     color: #00FF00;
  30.     text-align: right;
  31. }

As you can see, this is much easier to read. As soon as you start analyzing the CSS that defines what is in that left panel, everything sort of makes sense. Likewise, our override for H4 has nothing to do with the left panel, so it is aggregated into a lower section of the CSS. Had we defined #left_panel h4 {}, I would have put in the indented portion for the left panel. And of course, our comments will make sure that 6 months from now, when I am asked to update the CSS for the page, I can do it with little trouble. Comment well, and comment often. Comments and whitespace are free!

For the past few years I have taken this for granted, but now that I think back, every web developer that has seen my style has adopted it for themselves, which means it at least merits sharing. Hopefully this will help a few of you, especially the ones that write hundreds of lines of CSS.