ASP.NET Controls and the Zen of CSS Design
In the early days of HTML design and web design, people thought that <table> tags were the holy grail of design because you could position anything you wanted in tabular fashion. Thankfully we learn from our mistakes, as you can see with CSS Zen Garden (www.csszengarden.com), which illustrates the use of <div> and <span> tags, and Cascading Style Sheets (CSS) to produce extremely lightweight, yet compelling and beautiful web interfaces. Additionally, designing in a CSS "Zen" fashion makes your application more pliable via client-side JavaScript and DHTML technologies, such as Ajax or Atlas.
Unfortunately, many of the controls that ship as part of the stock suite in ASP.NET 2.0 have missed the boat as far as CSS Zen design is concerned. These controls litter your output with HTML tables, rows, columns, and cells, and even embed style information directly in the tag instead of using CSS classes! To see what I mean, the hideousness in Listing One is produced by an ASP.NET 2.0 GridView using "Auto Format" (which should be renamed "Auto Munge") to create a "pretty" grid.
<table cellspacing="2" cellpadding="3" rules="all"
border="1" id="GridView1"
style="background-color:#DEBA84;border-color:#DEBA84;
border-width:1px; border-style:None;">
<tr style="color:White;background-color:#A55129;font-weight:bold;">
<th scope="col">title</th>
<th scope="col">url</th>
<th scope="col">tags</th></tr>
<tr style="color:#8C4510;background-color:#FFF7E7;"> <td>This is a sample bookmark</td> <td>http://www.sample.com</td>
<td>sample test</td>
</tr>
</table>
The preceding HTML output was for a GridView control that was autoformatted to "brown sugar." one of the simpler formats. There isn't a single use of a style sheet here, nor is there any straightforward way of making the elements of the GridView conform to a CSS-pure design (I've been told it's possible, but it involves far more work than should be necessary).
Would it have been so difficult for Microsoft to produce a div/span grid that corresponded to a stock suite of CSS classes and let developers override the grid's styling using CSS? I now have a requirement that I must justify why I couldn't use divs and spans before I check in an .aspx page that renders tables. ASP.NET—and specifically Web 2.0—would be a better place if everyone followed the same rule. To illustrate, take a look at the HTML in Example 1 that shows a single bookmark in a CSS-friendly fashion.
<li class="xfolkentry">
<div class="link">
<a href="http://www.slashdot.org">Slashdot</a>
</div>
<div class="description"></div>
<div class="meta"> <span class="postdate">8/28/2006</span>
... more text clipped for article ...
</div>
</li>
You can then apply any style sheet imaginable to create millions of different look-and-feels for this output. In addition to the CSS-friendly output being easier to read, more flexible, and more pliable by professional web designers, it also downloads faster and provides a page that is more lightweight than one where every aspect of each row of data's style is embedded directly on that row of data. One possible look for the preceding HTML is in Figure 1, where the preceding HTML was rendered using the Scuttle style sheet.
In general, controls that let you supply output templates can be tweaked to produce CSS-friendly output. However, controls such as DataList actually wrap individual row templates within table rows and cells—making that control completely useless. Also, watch out for the GridView control and many of the stock Web Part controls; they're heavy abusers of tables and are gathering some very bad CSS karma.
What I've found is that the time it takes to convert some of the stock controls (such as GridView) to produce CSS-friendly output is twice the time it takes to produce your own CSS-friendly output (including all grid functionality, especially if you use Atlas for inline editing!) in a Repeater.
