this blog entry is a continuation of my postings on making my new blog site be CSS compliant (no tables) according to the rules set down by the “kewl kids”. So that means no table.  So I’m a good programmer… that means that I steal my code when ever I can!  The internet makes me look good.  Seriously I always tell other programmers that I’m helping to learn a new skills, some of my best code I’ve written is stolen.

Let me clarify, when I’m trying to figure out some particular algorithm or learn some new programming technology I turn to Google to learn to find examples, and I unashamedly copy and paste good code I find into my applications to use as a starting point.  I hereby give you permission to return the favour and steal any of my posted code on this blog that you find helpful!  CodeProject and CodePlex are GREAT places to find the kernel of your next Big project.

So using that as a starting place, when ever I have tried to get a site up and running using CSS I start by finding a site that is close to what I want, grabbing the source and grabbing the style sheet.  Using that as my starting framework I start to try to build my page.  This has historically NOT worked for me, stealing CSS doesn’t seem to have the same ROI as stealing code.  I mentioned this to my CSS Sensai, and he didn’t understand what I was talking about.  I pointed out to him that CSS style sheets are usually messy, that in my experience they are filled with styles that aren’t used, a mish-mash of approaches, attributes applied to a style that has no effect upon the item.  He agreed this was often true, and that a lot of CSS people approach it with a kitchen sink approach; keep throwing style settings against things until it looks correct, and if didn’t cause it to look wrong, leave it in because it might be helpful some point down the line.  He even embarrassedly admitted he has a tendency to start with a Style sheet but for final layout quite often styling tweaks will end up in his html, because there is so much in his style sheet he has trouble finding the correct style application to change. 

When I asked him if he always cleans up what he isn’t using, well no he doesn’t do that all the time either.  So it seems to me that part of why my stealing CSS approach to learning CSS formatting doesn’t work is that there is a lot of sloppy CSS out there.  Present company excepted of course! In programming, you can’t generally leave lines of code “alive” in the middle of your procedure, you have to comment it out, or you stuff won’t work correctly. Not so with CSS, you can be real messy and no one can tell the good stuff from the bad (good luck setting breakpoints), as a great mate and programmer from the Shore, I’ve had the pleasure to work with, said in response to trying to learn CSS

“i love CSS. i love CSS. i love CSS. yep now i am starting to say it with meaning.”

So in order to make sure that I don’t become one of those types of messy CSS people I’m going to start instituting some guidelines for design, and my first CSS Guideline is about using ID and Class for applying styling. And the rule is this:

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.

This rule came about because of the following excerpt from the CSS style sheet that came from the template that I am using as the target layout for this blog.

   1:  #header {

   2:      width: 100%;

   3:      vertical-align:middle;

   4:  }

   5:  #headertext {

   6:      float: left;

   7:      position: relative;

   8:      height: 150px;}    

   9:  .headertext {

  10:      font: 160% 'Segoe UI', 'Comic Sans';

  11:      padding: 15px 20px 10px 20px;}        

  12:  /* color to the right of the main image */

  13:  .headertext {color: #333;}

  14:  .belowheader {

  15:      clear:both;

  16:      color: #000;

  17:      font: 95% 'Segoe Print', 'Segoe UI', 'Comic Sans';

  18:      padding-top: 10px;

  19:      }    

  20:  #headerright {

  21:      float: left;

  22:      overflow:hidden;

  23:  }

  24:  #headerleft {

  25:      width: 358px;

  26:      vertical-align:middle;

  27:  }

Where do I begin with this mess (actually it was even worse then what you see here, the first .headertext you see was no where near the second .headertext and neither of them where near the #headertext, if I hadn’t done a find all on headertext I wouldn’t have even been aware of it.  So why did I come up with rule, well consider the following html code snippet.

   1:  <div id="header">

   2:      <div id="headerleft">

   3:          <img alt="Logo" src="LongCloudLogo.jpg" />

   4:      </div>

   5:      <div id="graphicholder" class="headerright">

   6:          <div>

   7:              <img alt="HeaderGraphic" src="mainpic_new.jpg" />

   8:          </div>

   9:      </div>

  10:  </div>

In this example without my rule being “enforce”, can you tell me which elements have a style applied to them?  and of course the answer is no, the id’s might be on the div’s in order to be there for styling… or they might be there in order to use them in some sort of DHTML, Ajax, jQuery script.  And the div on line 5 may even have two styles applied to it Oy Vay!.

Now look at the same snippet with my rule in mind… at a single glance I KNOW that only line 5 has a style applied to it in the style sheet.  I don’t have to hunt or guess.  I know as well, as soon as I find the .headerright class in the style sheet (where it is located in alphabetical order) I don’t need to go looking for some style attached to the #graphicholder id, the only thing affecting it directly will be it’s class.

This is a really simple rule (to implement and follow), I’m not sure why it isn’t an obvious thing. Maybe I’m missing something, if so, please let me know.