title: LESS.JS Redundancy in CSS, Use of Mixins instead of selector inheritance?
body: <p>I am using less.js with some regular use of mixins. E.g. I do have a basic class 'gradientBlack' like this.</p>
  
  <pre><code>.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%);
  } 
  </code></pre>
  
  <p>Then I reuse this class at several definitions, like </p>
  
  <pre><code>h3 {
      .gradientBlack;
      ...
  }
  .darkBox {
      .gradientBlack;
      ...
  }
  </code></pre>
  
  <p>A disadvantage of this approach is, that it bloats the CSS with redundant definitions. E.g. the computed CSS might look similar to this.</p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>For someone like me, who uses a lot of gradients, roundCorners etc, this adds up quickly.</p>
  
  <h2>Question (edited)</h2>
  
  <p>I found out that the known name for this topic is <strong>selector inheritance</strong> (see <a href="http://sass-lang.com/#extend" rel="nofollow">Sass</a>) and as it seems isn't implemented right now. Usage and advantages are discussed <a href="http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend" rel="nofollow">here</a>. The computed css of this syntax might look like this.</p>
  
  <pre><code>h3,
  .darkBox,
  .gradientBlack {
      background: #333333;
      background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
      ...
  }
  </code></pre>
  
  <p>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.   </p>