CSS Frameworks and Semantic Class Names

One of the most common complaints about CSS frameworks like Blueprint, YUI Grids, and 960.gs is that they require designers to dirty their fingers by adding presentational class names to their HTML documents, like so:

<div class="span-9 last">
<div class="grid_6 alpha">

Class names like "span-9" really bother designers who care about the quality of their HTML code, because they describe the appearance of an element; this should really be left to the CSS properties defined in your site’s style sheets. The problem with presentational class names is explained especially well by the W3C QA tip, Use class with semantics in mind:

Good names don’t change. Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.

Maybe you’re the pragmatic type who takes no issue with this sort of thing, or decides that it’s a necessary evil given the limitations of the CSS language. Nevertheless, there are plenty of front-end ninjas out there who refuse to use CSS frameworks for this very reason.

It turns out, however, that the latest crop of CSS frameworks provide clever solutions to the problem of presentational class names.

Blueprint CSS, the granddaddy of CSS layout frameworks, now includes a clever Ruby script called compress.rb in its download package. In Blueprint’s compress.rb: A Walkthrough, Blueprint author Joshua Clayton explains how to use the script to generate a custom version of the Blueprint style sheets using your own semantic class names.

The process boils down to writing a simple configuration file that tells the script how to map Blueprint’s presentational class names to your own semantically meaningful class names. The file will look like this:

demo:
  path: /Users/kyank/Documents/myproject
  semantic_classes:
    ".header, .footer": ".span-24, div.span-24"
    ".content": ".span-18, div.span-18"
    ".sidebar": ".span-6, div.span-6,
                 .last, div.last"

The semantic_classes section provides the mapping. In this example, the header and footer classes will be 24 grid units wide and the content class will be 18 grid units wide. The sidebar class will be 6 grid units wide and the last block in its row.

With this configuration file written, you simply run the compress.rb script, and the customized version of the Blueprint style sheet files (screen.css, print.css, and ie.css) will be generated in the specified path. The style sheet will contain rules like this one, that apply the grid dimensions to your custom class names:

/* semantic class names */
.content {float:left;margin-right:10px;
  width:710px;}

… and just like that, you gain all the layout facilities of Blueprint CSS with none of the HTML cruft!

If manually compiling your style sheets with a Ruby script sounds like a bit of a pain (which it can be — especially if you develop on a Windows computer without Ruby installed), a server-side CSS framework might be a better option for you.

CSS frameworks are popping up for all the major server-side programming languages. Two prominent examples include Compass (for Ruby), and Scaffold (for PHP). These frameworks let you write your style sheets with extra language features, and automatically compile them to standard CSS code when sending them to the browser.

Using Scaffold, for example, you could write your style sheet like this:

@grid {
  column-width:30;
  column-count:24;
  right-gutter-width:20;
  baseline:20;
  unit:px;
}
.header, .footer {
  +columns(24);
}
.content {
  +columns(18);
}
.sidebar {
  +columns(6);
  +last;
}

The @grid at-rule sets up the options for Scaffold’s layout plugin, and then lines like +columns(24); (called mixins) are compiled into standard CSS properties when the browser requests the style sheet.

These are just a couple of the ways that the latest CSS frameworks respond to those critics who complain about having to sacrifice HTML code quality to use them. Now you can have all the benefits of a well-tested layout framework, and apply them to your HTML code on your terms.

(photo: Nbauer)