has_many :thoughts

While beginning a new project today, I quickly discovered that the HTML and CSS files supplied by the designer were clearly auto-generated from a program like Dreamweaver.

It soon became apparent that dealing with nearly half a dozen nested tables and a mess of a CSS (with some of the same font declarations repeated 10 times) was going to be a nightmare.

I undertook the task of rebuiding in real CSS with semantic markup and XHTML. It’s taken about 3 hours for the rough cut. I still have some tweaking for IE and such but basically, it’s done. It’s clearly, far easier to read now. But I’ll let the numbers speak for themselves:

• 371 lines
• 13,213 chrs

• 279 lines
• 7,173 chrs

That’s nearly a 45% reduction in the number of characters. One place in particular went from looking like this in the Firebug Inspect window:

 div < td < tr < tbody < table < td < tr < tbody < table < div <
td < tr < tbody < td < tr < tbody < table < td < tr < table < body < html 

 div < div < body < html 

Every single day I learn some new CSS tidbit I didn’t know. Never before did I realize that there was an attribute selector for CSS!

As I was working on the stylesheet for our latest project, Way Cool Mail, I realized I wanted a slightly different style on buttons then I did on text input fields. So I made a class for the buttons and applied it every where I used a button. (I thought about overriding Rails button helper to always use that class. But that seemed dirty.)

Now I discovered via CSS Mastery: Advanced Web Standards Solutions that one can do something like this:

input[type="submit"] {
  border: 1px solid #000
}

Of course, it doesn’t work in IE6 and below. (ARGH!!!). So I’ll either have to keep the separate class or try this handy JS trick.

As I started to get deeper into creating the stylesheet for our latest project, I got annoyed with having to repeat the same color hex codes all over the place. There are many solutions to this dilemma but I liked this one the best. (Note the blog name is a coincidence.)

I had to modify the suggested route slightly as this article is fairly outdated and doesn’t work with the latest rails version that considers dot a separator in routes. So I used this:

map.connect 'stylesheets/:rcss.:format', :controller => 'stylesheets', :action => 'rcss'

So far this is working great. I have several color codes setup as instance variables in the controller. Andy suggested I try moving this to perhaps a layout for the css. If the list of variables gets unwieldy I’ll do just that.

Speaking of color hex codes, this car license plate is pretty funny.

When we began the switch to rails about 6 months ago, I also started to push a transition to CSS-based designs and away from tables based layouts. I saw great value in using more semantic HTML which wrote cleaner code and also provided a separation between display formatting and actual content.

This transition has opened me up to a bunch of HTML tags that I rarely used before, or even new existed. And so, I present, my favorite HTML tags:

dl dt dd

Definition List, Data, and Term are really handy when you have a list of items you need to describe. The default style on most browsers bolds the Term and indents the Data underneath it Which is okay but can be easily overwritten with CSS.

h1..h6

I remember using these way back in HTML 1.0 but somehow I stopped and ended up with <big><big><big>Headline</big></big></big>. I can’t understate the usefulness of headline tags.

ul and li

The power of Unordered Lists is just incredible when you realize how they can be styled in such diverse ways with CSS. Whenever I find myself with a list items (often links) I use ul.

label

I always used to put a bunch of fields in a form in a big table with two columns. But with label tags, one can simply style the labels to have a fixed width and you get the same effective. A lot less markup.

optgroup

Another one I didn’t even know existed. Admitedly, it’s an HTML 4 tag. But I often have drop down boxes where groupings within them would be nice. And previously, I would have had to use some kind of Javascript or server side validation to forbid slection of those grouping headings. With optgroup, browsers don’t allow you to select the grouping itself.

fieldset

Fieldset is a perfect semantic method of grouping elements within a form together. The default styles in most browsers create a nice little box around your fields with the name of the section (ie: “Billing Address”) at the top.

th

I didn’t even know Table Header tags existed until a few months ago. It makes it much cleaner to style the headings above columns. No more <b> tags in every single field!

And now, let’s please pause for a moment of silence for the <br/> tag (Previously known as <br>.), who recently left this world. I’ve all but stopped using the the Break tag, except when it actually makes sense: intentional line breaks within paragraphs of text. No more <br><br><br><br><br><br> to space something down a page. And never again will I do the old <font size="1"><br></font> to space something down just a tiny bit.