The recomendations of @extend are concerning

[jamesmacfie]

I like what you've got going here, but by using @extend when nested inside a descendent selector, the final comma separated CSS selectors can be a nightmare. Keeping final CSS output in mind is vital to successfully scaling any CSS/Sass solution.

If you're going to use @extend in different files for different components, then the final CSS selector can not only be a mess of selectors, but you also potentially create a relationship between classes that shouldn't have a relationship. You've advised putting all components in their own file (nice), but by linking classes via @extend then your final CSS and selectors are no longer grouped by component only; they're also grouped by some shared properties.

If you've decided that you want all the CSS properties of a class, then just add the class to the component instead of using @extend. You're final CSS output will be smaller, there's less need for sourcemaps to figure out where a rule came from (actually, I don't even know how well source maps deal with @extend to be honest), and the HTML becomes much clearer to any developer that views it.

Ignoring that .search-button wouldn't be an ideal class name in the first place here, the HTML in your @extend example might become something like:

<div class='search-form'>
  <input class='input' type='text'>
  <button class='submit search-button -red -large'></button>
</div>

[rstacruz]

I partially agree... @extend cleans up the markup at the cost of a bit of extra complexity.

I'm considering changing the recommendation to mixins. It should be very easy in Less:

.submit {
  .search-button;
}

...but not so much on Sass or Stylus. Comments welcome on that one.

[rstacruz]

Semi-relevant: http://ricostacruz.com/til/extend-sucks

[juanbrujo]

@jamesmacfie I agree with your example, but that markup makes useless the use of @extend at all. I think the example from @rstacruz isn't the best to explain the need for @extent (or mixins) for nested components.

[davidkpiano]

Take a look at this: http://www.smashingmagazine.com/2015/05/extending-in-sass-without-mess

It's very much inline with RSCSS and the selectors can easily adapt RSCSS syntax to fit the guidelines suggested above. @extend is very useful when used correctly.