The entire point of @extend is so that you don't get the extreme code duplication of mixins. I can't speak authoritatively on LESS since I stopped using it a long time ago, but what happens when you apply that `.media` pattern to another selector? It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does.
And the point is even @extend can get bloaty when nested, but placeholder tags avoid that problem, and remove the extra pattern classes from the output.
So the article is actually advocating that you stop using mixins. Mixins aren't OOCSS, they're just copy and paste made easier.
When you want a button in HTML you have to add the btn class, as well as an additional class for that button's styling. IE: btn-large, btn-primary, btn-info
Bootstrap could have made this happen with just one class by implementing mixins, but that would result in each btn-primary, btn-info, etc repeating those 50 lines from the btn class.
If Bootstrap used @extend instead, that large btn class could be replaced with a multiple selector, IE: .btn-large, .btn-small, .btn-primary, etc. Then the independent styles could be defined below, as they already are, and we would just need one class to add the appropriate button style.
I guess they could do that today by just using the long selector instead of .btn, but that makes the file harder to maintain.
It's quite easy to create duplicate styles in the output with mixins - the compiler isn't that smart yet, do placeholders avoid all of that? I haven't seen a lot of comparisons or examples that really drive it home so far.
I'm actually working on a css post-processor script that optimizes css output. Grouping styles in the most efficient way possible is quite tricky.
@extend avoids duplication, but by itself it has some other bloat problems. @extend + %placeholders completely avoid duplication. Thing is @mixins aren't supposed to avoid duplication, they just inject, and should keep the declaration in the same position in the stylesheet.
The effect is the same (it's composition vs inheritance) but the SASS CSS is going to be more space efficient. The way I think about it is that @extend copies the selector while mixins copy their contents.
This is what I was thinking as well. Apparently in SASS they only had mixins that work like classes and are included in the output and now the new "placeholders" act like .mixin () {} in LESS.
The example also combines
hr {/* style /}
.separator {/ style /}
into one selector
hr, .separator {/ style */}
but maybe that is something a CSS minifier should be able to do?
No, SASS had @mixins and @extend. And now it has @extend with %placeholders, which is the least bloaty solution of them all. Lots of the use cases mixins are touted as solving are actually much better solved by @extend'ing %placeholders.
But it also used to annoy me how much it was overlooked. Not for Sass so much, but LESS is horrible compared to either Sass or Stylus.
That being said, Stylus doesn't have the ability to extend selectors that don't appear in markup, the way @extend'ing %placeholders works in Sass. (Not that I blame TJ, the guy's awesome repo ratio is the best on github!)
The thing that gets me frustrated with both Stylus and Jade is that they go a bit too far in the minimal syntax direction at the cost of other syntax improvements (since going minimal means its harder to differentiate pieces). The Sass syntax is more than simple enough, and the option to drop semi-colons is a cool thought experiment, but not so useful in real scenarios.
And then there's momentum too. I mostly just wish that we could all get behind one pre-processor, and Sass is the one with the best momentum. (I say best, because LESS has some momentum, but it's syntax is way less thought through, and it has less active committers.) I don't blame TJ at all for this, but he definitely has less time to devote to Stylus than the multiple Sass contributors do. Mostly it's just a question of putting your chips with the player with the most momentum because that will bring you the fastest updates.
This is the key that I missed when I first read the article. Mixins will always be repeated when compiled. Placeholders result in combined selectors so the styles aren't repeated in the compiled CSS.
In many ways, it seems like placeholders would almost always be preferred to mixins. Though, I'm sure there are exceptions.
I don't see how SASS is doing something unique here that other preprocessors can't do as well.