The biggest problem of using @extend this way is that it makes the CSS file grow really _really_ fast. I’ve done things in similar way in the past in a medium-sized project (though with Blueprint and custom utility styles since Bootstrap doesn’t existed back then) and ended up with selectors that looks like this after compilation, but for the whole file:
Then I hit the 4095 selectors limit[1] in Internet Explorer. That pretty much force me to cleanup the whole CSS. In the end I took similar approach to Bootstrap classes, which make the CSS file size and number of selectors much more manageable.
I know that /* ... */ is obviously a placeholder for more code, but I find the fact that it looks like a "dead" or "paralyzed" face to be much more amusing (and, for that matter, relevant)
I don't think this is quite what I want to say, what I meant to say was that using @extend will increase the number of CSS selectors by the number of selector it extends to when compiled (including nested selectors.)
For example, .form-control in Bootstrap total of 9 selectors, the login example from the article extends from it twice, now the compiled CSS ended up with at least 18 selectors. Another example would be .btn the author used in the login example, which has another 9 more selectors for .btn alone, then 16 more selectors in each .btn-variant. The example extend from both .btn and .btn-variant twice, this result in 50 more selectors that will be added. From my very quick counting, the login form example alone will create about 71 more selectors for a simple login form.
This might not be a problem for a small site, but the number could become unmanageable very quickly once the site grow.
[1]: http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164...