Ben Poweski's Weblog

As web application developers all too often HTML and CSS markup are the bastard, unmaintained children of our projects. We take the time to refactor our Ruby, Java and Python code but when it comes to cleaning up the HTML markup, we somehow manage to find excuses to ignore it. We love to praise DRYing up our code, but for HTML….it never seems to become a reality.

Case 1: Google Registration HTML

The following snippet was taken from the URL https://www.google.com/accounts/Login.

  <table width="100%" border="0" cellpadding="2" cellspacing="0">
  <tr>
  <td colspan="2"><img width="1" height="2" alt="" /></td>
  </tr>
  <tr>
  <td valign="top" width="1%">
  <a href='https://www.google.com/accounts/'>
  <img src='https://www.google.com/accounts/googleaccountslogo.gif'
       border="0"
       align="left"
       alt="Google" />
  </img>

  </a>
  </td>
  <td valign="top">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td colspan="2"><img width="1" height="15" alt="" /></td>
  </tr>
  <tr bgcolor="#3366cc">
  <td><img height="1" width="1" alt="" /></td>

  </tr>
  <tr bgcolor="#e5ecf9">
  <td style="padding-left: 4px; padding-bottom:3px; padding-top:2px; font-family:arial,sans-serif;">
  <b>Google Accounts</b>
  </td>

While there is no DOCTYPE declaration for this page, one can assume the intentions were to render on as many browsers as possible in the most consistent manner. One technique is to forgo all of our fancy new (well newer) approaches and use the oldest subset of HTML available. Font tags and all. Unfortunately, all of the nasty HTML tricks we resorted to in the late 90’s also apply. The point of this is not to bash on Google, but show how we can improve this code and not repeat ourselves.

How can we improve this?

1. We can start by setting a root class for the table. This will be the point in which we apply relative style rules.

2. Since the CSS rule background-color doesn’t work as expected, we’ll need to use a descendant selector on the td elements.

3. Move the the HTML attributes to a CSS declaration.

We might end up with something like the following:

 
.registration_table { width: 100%; border: none; }
.registration_table td { background-color: #e5ecf9; }
.registration_table tr.odd td { background-color: #3366cc; }

 <table class="registration_table" cellpadding="0" cellspacing="0">
  <tr>
  <td colspan="2"><img width="1" height="15" alt="" /></td>
  </tr>
  <tr class="odd">
  <td><img height="1" width="1" alt="" /></td>
  </tr>
  <tr>
  <td style="padding-left: 4px; padding-bottom:3px; padding-top:2px; font-family:arial,sans-serif;">
  <b>Google Accounts</b>
  </td>

While this isn’t perfect it provides us fewer points of modification if we wanted to do something like…change a color or reuse this style in a common file.

Case 2: Google Registration CSS

A similar situation exits in the CSS style rules for this page. Here we see redundant blocks of rule content. The font declarations font-family, font-size, and font-weight are repeated for the style rules: .gaia.sub.el, .gaia.sub.pl and .gaia.sub.rpl.

  .gaia.sub.el { font-family: arial, sans-serif; font-size: smaller; font-weight: bold;}
  .gaia.sub.pl { font-family: arial, sans-serif; font-size: smaller; font-weight: bold; }
  .gaia.sub.rpl { font-family: arial, sans-serif; font-size: smaller; font-weight: bold; }
  .gaia.sub.es { font-family: arial, sans-serif; font-size: smaller; font-style: italic; }
  .gaia.sub.seex { font-family: arial, sans-serif; font-size: smaller; color: #6f6f6f; }
  .gaia.sub.pc { font-family: arial,sans-serif; font-size: smaller; color: #6f6f6f; }

We could improve this by using a comma delimited declaration such as:

  .gaia.sub.el,
  .gaia.sub.pl, 
  .gaia.sub.rpl  { font-family: arial, sans-serif; font-size: smaller; font-weight: bold;}

The point is illustrate that HTML and CSS are code too! They suffer from many of the same issues that our application code bases suffer from…and can utilize the same techniques.