[toolate]

If this is object oriented then his approach can best be likened to multiple inheritance. Because CSS doesn't offer any kind of native inheritence he's forced to redefine each and every class for each instance. This is the equivalent of defining code like:

    var foo = new Animal Brown Quadruped Barking();

Even if styles could be inherited, this seems to be taking the wrong approach. Most of use realise that classes should be used to denote identity, and not behaviour (or in this case, styling). CSS preprocessors seem to fix the same problem in a much nicer way.

    /* Define classes used in HTML */
    .sidebar {
      @include bordered-box;
    }

    #special-offer {
      @include bordered-box;
      position: absolute;
      top: 0;
      right: 0;  
    }
     
    /* Define theme information */
    @mixin bordered-box {
      h3 {
        background: red;
        color: white;
      }
      border: 1px solid red;
    }

[Groxx]

That multiple-inheritance comparison as you showed it is just about perfect, thanks! And yes, preprocessors make a ridiculous amount of sense. That mixins and variables aren't part of CSS seems almost like an oversight.

At least there's Less. Anyone use it, or know of a better system?

[roryokane]

I have tried out both Less (http://lesscss.org/) and Sass (http://sass-lang.com/), but not used either in a big website. It looks like Sass is better – it is more powerful in that it supports more functions and you can optionally use an alternative, less-redundant syntax with significant whitespace and no semicolons. The 2009 post http://nex-3.com/posts/83-sass-and-less by the creator of Sass compares the two, and the two deficiencies in Sass mentioned in that post have since been fixed. From what I can tell from looking quickly at the Less website, it hasn’t really improved since I last saw it. I’m using Sass for my very simple personal website, and it works fine for me.