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
I care more people would annul sites like this that are actually accommodating to read. With all the thistledown floating roughly on the spider’s web, it is rare to pore over a site like yours instead.
Considerably, this post is really the sweetest on this notable topic. I harmonise with your conclusions and will thirstily look forward to your incoming updates. Saying thanks will not just be sufficient, for the phenomenal clarity in your writing. I will directly grab your rss feed to stay informed of any updates. Admirable work and much success in your business dealings! Please excuse my poor English as it is not my first tongue.
Posts like this brithegn up my day. Thanks for taking the time.
Haha. I woke up down today. Youve cehreed me up!
dOzz25 paruktbdpzlb
Didnt know the forum rules allwoed such brilliant posts.
Thanks alot – your answer solved all my problems after several days sturglngig
Zf7v9P , [url=http://koccpwvnwfdy.com/]koccpwvnwfdy[/url], [link=http://xmlffjiclite.com/]xmlffjiclite[/link], http://wwtpylyjhpsb.com/
Ryan Kesler Jersey
I truly find mtss is a interesting subject. Never looked at this subject in this way. If you are going to create more articles relating to this subject, I will return in the near future!
It’s difficult to find well-informed people on this subject, however , you sound like you know what you’re talking about! Thank you
We need you Beanie!!! Stay strong dude and dont run standin strait up more:)
This is the perfect blog for anyone who wants to know about this topic. You know so much its almost hard to argue with you (not that I really would want…HaHa). You definitely put a new spin on a subject thats been written about for years. Great stuff, just great!
Thanks so much for writing all of the excellent information! Looking forward to checking out more posts!
Ridiculous amounts of spambots, but I actually did find this interesting, so much of web design is horrible, as you said “Cookie Cutter”, techniques and it’s fun to see people who actually want to bring something new to the table.
I’m not saying the we should reinvent the wheel every time we make a site, I’m just saying that with stuff like facebook, I’ll take anything that’s an actual site and not a fucking page on there.