Question

I am using less.js with some regular use of mixins. E.g. I do have a basic class ‘gradientBlack’ like this.

.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
} 

Then I reuse this class at several definitions, like

h3 {
    .gradientBlack;
    ...
}
.darkBox {
    .gradientBlack;
    ...
}

A disadvantage of this approach is, that it bloats the CSS with redundant definitions. E.g. the computed CSS might look similar to this.

h3 {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions

}

.darkBox {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions
}

For someone like me, who uses a lot of gradients, roundCorners etc, this adds up quickly.

Question (edited)

I found out that the known name for this topic is selector inheritance (see Sass) and as it seems isn’t implemented right now. Usage and advantages are discussed here. The computed css of this syntax might look like this.

h3,
.darkBox,
.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    ...
}

Nevertheless, I would appreciate any suggestions, when to bother and when not to – as well as any other on-topic hints how to proceed as long as selector inheritance is not an option.

Answer 1

I think there are a few issues to consider:

• Size of the style sheet
• Efficiency of style sheet execution (how fast the browser executes)
• Maintainability of the style sheet
• Maintainability of the markup (html)

The approach that Mark Gemmill advocates (in /3) is really Nicole Sullivan’s Object Oriented CSS. I used that pattern before switching to Sass, and still find some of it useful, but I think the Sass/Less way results in more maintainable CSS and more maintainable markup – there is no need to sprinkle presentational classes throughout the markup.

I think @extend (selector inheritance) is one of the main advantages that Sass has over Less and does reduce the redundancy in the compiled style sheet.

To me, the benefits of more maintainable CSS and markup outweigh any downside of a slightly larger style sheet. I think you’ll find that if you keep your selectors efficient (don’t nest in Less/Sass more than you need to) and combine and minimize in production the performance hit will be less than you might imagine.