Postpostmodern » CSS

A Body with Class

Jason Johnson — Fri, 20 Feb 2009 23:07:12 +0000

This Short Version

Add a class attribute to your tag for each part of the page’s path in the URL. E.g.: The page http://example.com/about/history should have a body tag that looks like . It makes styling those sections of your site nice and simple.

The Explanation

Often times, specific styling/formatting is shared between similar pages. The traditional way to deal with this is to include additional CSS files when special formatting is needed. I’ve found body classing to be more useful and more efficient.¹

Since the pages that share styling often also share a path in the url, it’s really simple to add the path parts as classes to the body tag. For example, say the about section of a web site needs special formatting because it has an extra sidebar or maybe some sort of widget. I would add the class ‘about’ to the body tag of all of the about pages. This method continues down the hierarchy. The page at /about/history would have a body class of ‘about history’, and so on. It’s very simple and very handy.

It’s also very simple to add this functionality to your layouts whether you’re using Rails or any other framework. My PHP framework, Phooey, does it for you automatically.

For Rails, you can include this in your layout:

…or, if you’re using Haml (which I highly recommend):

%body{:class => "#{controller_name} #{action_name}"}

Agree? Disagree? Confused? Let me know down there in the comments.

I am of the opinion that you should only include one CSS file per media type in any page of your site (except for the IE stylesheets). I usually include only the following stylesheets in every page of every site: all.css, screen.css, print.css. And each one of those is minified. More on this in my forthcoming article on Sass. ↑ back up there

Pseudo Pseudo Classes

Jason Johnson — Tue, 10 Feb 2009 05:16:19 +0000

The :first-child and :last-child pseudo classes in CSS are super-handy for stying things like lists. For example, if you want a horizontal line between list items, you can set:

ul li {
  border-bottom: solid 1px #e0e0e0;
}
ul li:last-child {
  border: none;
}

Unfortunately, most current browsers can’t stomach :first-child and :last-child. :(

But just a teaspoon of jQuery will make that pseudo-class medicine go right down:

function firstLast()
{
  $('ul li:first-child').addClass('first');
  $('ul li:last-child').addClass('last');
}
jQuery(firstLast);

Global AJAX Cursor Change

Jason Johnson — Tue, 06 Jan 2009 22:08:54 +0000

I don’t know if I’ve ever mentioned this before, but in case I haven’t:

Something to this effect should be used on all AJAX web pages:

function globalAjaxCursorChange() 
{
  $("html").bind("ajaxStart", function(){
     $(this).addClass('busy');
   }).bind("ajaxStop", function(){
     $(this).removeClass('busy');
   });
}

Along with this CSS:

html.busy, html.busy * {
  cursor: wait !important;
}

The javascript above is jQuery, but I used to do the same type of thing back when I used Prototype.

Developers sometimes go to great lengths to supplement the native behavior of a system with custom ‘busy’ indicators. And that’s great, but don’t forget what’s built-in. Users instinctively know that something’s working when they see the old hourglass/watch cursor.