A Body with Class

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 <body class="about history">. 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.1

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:

<body class="<%= controller_name -%> <%= action_name -%>">

…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.

  1. 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

comment feed And the ensuing discussion…

  1. 1

    Oct 22nd, 2009 at 11:49 pm james

    using class tags on your body is pretty cool, and allows you to let css do the work for detecting current page styles on menu items. A really lazy way so you dont have to do any server-side processing to add a class=”current” to menu items and can thus include a “static” tpl file with your main menu once.

    .history a#history, .about a#about, .faq a#faq { background-color:pink; /* make the current page stand out */ }

    about history faq

  2. 2

    Jan 16th, 2011 at 10:07 am Ben

    Nice tip. One thing I was wondering - how does the minus symbol impact on the output?

    I.e. any reason why not to just put:

  3. 3

    Jan 16th, 2011 at 10:10 am Ben

    Code didn’t appear in my comment. 2nd attempt:

    (minus characters removed)

  4. 4

    Jan 16th, 2011 at 11:31 am Jason Johnson

    Ben, sorry your code is not coming through. Markdown must be having an issue. The dashes on the closing erb tags prevent a newline after the code. It’s not required.

  5. 5

    Jan 19th, 2011 at 9:48 am Ben

    Thanks, good to know. I did try to Google “-%>” but it’s futile :)

Comments are closed.



Additional Resources


Tumblelog

Tumblr

Tumblr

Delicious

Delicious

Instructional

Recent Instructional Articles

Slicehost (and Linode) LAMP Cheatsheet

17.11
16

A quick list of steps I use to set up a LAMP server on Slicehost or Linode.

Terminal Tip: Prevent Creation of Mac Dot Files

07.08
2

An environment variable can prevent creation of ._filename files.

Terminal Tip: Delete Those Mac Dot Files

08.06
4

Use the find command to delete all of the ._* and .DS_Store files.

Editorial

Recent Editorial Articles

More Usable Mac: Finder Toolbar

05.12
3

I find it useful to keep a few extra items in my Finder toolbar.

No Multiple-Class Support in IE6

18.11
9

IE6 doesn’t respond to multiple class selectors.

New Skin for the Old Blogish

07.10
8

This blogish is finally back online after an extended period of http silence.

Downloadable

Recent Downloadable Articles

Gitup!

01.02
0

Gitup + Transmit = Really Simple Publishing

Leopard-Style iTerm Icon, Take 2

18.12
8

The newer, bluer version of the iTerm icon.

Leopard-Style iTerm Icon

05.12
6

An updated, Leopard-style icon for iTerm.

About This Site

About the Author

That’s me in the photo above. My current profession is web development. Therefore, it is the subject of this site.

Postpostmodern

Postpostmodern is the name of this site and my alias on most of the web. There's nothing really special about the name Postpostmodern. I studied art in college during the years after postmodernism, and nobody knew how else to classify the state of things other than silly words like postpostmodernism.

Sorta Blogish

I'd call this a blog, but I don't feel it fits the 'log' format. My goal is to publish articles on web-related topics that interest me, and while some articles may be time-sensitive, I would prefer that the organizational focus be on the categories and tags rather than chronology.

More Me

More about me can be found on the about page. Or, look me up in the usual places: