Body Classes Can Be A Smart Choice
Posted by Kurt on Saturday, May 23, 2009 in category:
At my place of work, one of my projects is to develop our department website. Because this is a major website at the university, it has to follow all the rules. These include accessibility, cross-browser support, and conservative design sensibilities. But being a non-technical corporate environment, they want to have their cake and eat it too, so I have to reconcile the JavaScript carousel and scrolling news widgets they wanted with the accessibility concerns for people with text readers or what have you.
I was poking around the internet and found the solution on another page at our university. I believe it was created by our competition, Creative Services, who we’re pretty sure take templates and butcher them to be Mason-branded. The implementation on that page was the answer no matter how much I loathe their cookie-cutter techniques. The answer is <body> classes.
In the past I had dismissed body classes as being a poor design strategy for a site. This was because I’d only ever seen poor implementations of them, parroted by Lynda.com. You should not use <body> classes automatically on every site you design. This encourages inconsistency in design between pages. It also bloats your CSS because if you’re using a <body> class, you’re using a lot of descending selectors and creating styles like .bodyclass #sidebar ul li.
But there are circumstances in which body classes can be used correctly and one of these circumstances is my problem. The idea is to first create your page without any JavaScript functionality at all, but with JavaScript functionality in mind. That carousel of images, for example, becomes a grid of images. The scrolling news shows only the top three items. The animation is not present. Then in your $(document).ready() block before anything else, you do this:
$('body').addClass('js_ready');
You’ve just added a class to your body tag with JavaScript. If the user does not have JavaScript enabled, this will not trigger. So now you can put all your JavaScript styles under the .js_ready selector. Because of the specificity of CSS, adding more information to an element selector will override any other reference to that selector. So if you have #carousel ul li and .js_ready #carousel ul li, any styling in the latter block will override the former, making your page style differently in the presence of JavaScript. This may necessitate updating the prepackaged CSS that came with your widget to include the body selector.
Well that’s a pretty cool thing, and while I was realizing how it worked I thought of another possibility. Admittedly it’s not going to be widely used, but I guess it could make a good tech demo. What if you want to have different themes for your page? Each theme is under a different body class and could be changed via JavaScript. I imagine this would be most handy if you’re pitching to a client and you’ve created a couple different designs and you wish to cycle quickly through them for comparison. The theme change would not be persistent across pages without some extra work, and who wants to create more than one completely realized style per site anyway? But it was a neat idea I had. Maybe I will implement it here on Disco Shiny…
Hi, gr8 post thanks for posting. Information is useful!
Original post by Dmitri Gromov
Hi, interest post. I’ll write you later about few questions!
i’m quite often bouncing all over the web most of the day which means I have the inclination to peruse quite a lot, which isn’t typically a beneficial matter as some of the sites I view are composed of useless crap copied from several other web pages a million times, nonetheless I’ll hand it to ya this webpage is in truth not bad at all and contains some authentic substance, so kudos for splitting the trends of basically duplicating other folks’ blogs, if you ever want to play a few hands of facebook poker together just send me a message – you have my e mail
favorites and will be back By the way this is a little off subject but I really like your