Sneaky Abstractions

A couple of years ago there were a lot of people who wanted to provide “style switching” for their web sites. People came up with all sorts of (well, some) crazy solutions for injecting a new stylesheet into the browser window while removing the old one, even though it’s perfectly valid to provide several stylesheets, marking some as “alternate”.

<link rel="stylesheet" href="style1.css" type="text/css" />
<link rel="alternate stylesheet" href="style2.css" type="text/css" />

Most browsers will provide a way for the user to switch between the two stylesheets, but most users don’t know about it and if they do they usually won’t bother to check if there actually are alternate stylesheets for a page. So developers started adding links or buttons to their sites that dynamically switched the stylesheets.

Of course, this is still the preferred and kosher way of providing alternate stylesheets, but there’s another way to achieve the same thing that might be a bit more flexible. In my previous post I wrote about a pattern I use on elements in which class names tell us something about the element’s state. If you expand that to encompass the entire page, you can use the power of CSS to provide “virtual” stylesheets for parts of or the entire page. For example, with a stylesheet like this:

body.foo h1 { color: #f00; }

body.bar h1 { color: #0f0; }

And some javascript to change the class name on the body element:

MySite = {
  toggleStyle: function(){
    var body = $$('body').first(),
        classes = ['foo', 'bar', 'baz];
    return function(newClass){
      classes.each(function(c){ body.removeClassName(c); });
      body.addClassName(newClass);
    };
  }()
};

You can swicth the entire page from one style to another. The benefit of doing it like this is that you can be as granular as you like; you can change the style for the entire page or just one part of it just by adding and/or removing class names (yes, you can do that with separate files too, but it gets cumbersome). You can make use of the cascading nature of CSS to have a base style and then layer some extra style on top of it. The downside, at least for the “entire page” scenario, is that you will have to do a lot of repetition to narrow your style declarations to work only for body.foo or body.bar. But if you use something like SASS to write your stylesheets – which you should anyway, it takes away a lot of the work – you don’t have to repeat this stuff over and over again.