Note: Please realize that this post was written in 2006, and a lot has changed since then–including YUI Grids. I am not too familiar with how the framework works now, but I am told it’s much better than it was when I wrote this article. Also note that I am not against all CSS frameworks and am even known to use them occasionally myself.

So yesterday I published a post defending frameworks, saying that if they helped you out: use them. Well that was before Dustin mentioned that Yahoo’s created a CSS Framework. I checked it out…and after having done so, I now take back some of what I said yesterday.

The problem

The biggest problem with Grids CSS is that it basically forces you to use unsemantic markup. Here’s an example straight from their site:


      <div class="yui-main">
         <div class="yui-g">
            <div class="yui-g first">
               <div class="yui-u first">
                  <!-- your content here -->
               </div>
               <div class="yui-u">
                  <!-- your content here -->
               </div>
            </div>
            <div class="yui-g">
               <div class="yui-u first">
                  <!-- your content here -->
               </div>
               <div class="yui-u">
                  <!-- your content here -->
               </div>
            </div>
         </div>
      </div>

You’d use code like this to produce the 4 units in this layout.

That’s a heckuva lot of divs. That’s like…divitis on steroids. In fact, lets take a look at the following code:


<table>
<tr>
<td>column one</td>
<td>column two</td>
<td>column three</td>
<td>column four</td>
</tr>
</table>

Compare that to the YUI code. Add a little CSS, and they will produce the same effect. Sadly, the table actually requires less code–and I’d say is just about as semantical as what Grid CSS is forcing you to do.

Why?

Because correct me if I’m wrong, but it looks like Grids CSS is merging content with presentation. In other words, this framework is undermining what CSS is for. In order to achieve a certain layout, one has to stack div after div, applying un-semantical class after un-semantical class. We’re really setting our styles in our HTML. Certainly, if we change the stylesheet we’re not stuck with a certain layout–but to create the layout we did have to compromise our HTML.

A four column layout with CSS really isn’t that complicated, and hardly requires that kind of code.

So in saying so…

If somebody makes a CSS framework that cuts out the work for some hacks and browser quirks, that’d be great. But no framework should have to require unsemantic code and force a developer to use HTML in order to achieve styles. Granted, somethings such as curved corners can require a few extra elements. But this is just ridiculous.

I’m sorry to say it, but I’m not impressed. swan