The “Why does Bootstrap have nav and nav-stacked as different classes?” was original posted on stackoverflow. You could ask the same for the .btn and .btn-* classes or the .navbar classes and many other classes in Bootstrap’s Less code.
In short: CSS size (there’re hundreds of such specific-class/base-class tiers so if each .btn-sm would inherit its .btn stuff even via extend, the size of the resulting CSS increases dramatically. Now counting that there was no extend when Bootstrap started, so each sub-class would have to copy the properties, the resulting CSS size becomes just unexpectedly enormous (literally tens-to-hundreds times larger then it is now)). Other reasons may exist as well. – seven-phases-max
I think @seven-phases-max is right in the above comment.
When you extend the same class many time the selector list become relative long:
Example:
.btn {
border: 1px solid;
}
.btn-small:extend(.btn){};
.btn-medium:extend(.btn){};
.btn-large:extend(.btn){};
The above Less code compile in to .btn,
.btn-small,
.btn-medium,
.btn-large {
border: 1px solid;
}
In the preceding the long (and growing) list is: .btn-small, .btn-medium, .btn-large.
The “best” (or most logic way) to solve the above seems to use a using attribute selectors as follows:
[class^="btn-"], [class*=" btn-"] {
border: 1px solid;
}
Bootstrap does not use attribute selectors because of performance issues, see also: https://github.com/twbs/bootstrap/issues/10332. Read also http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
Because of attribute selectors are not allowed, using base classes seems to be the way to prevent the selector list grows to set only a small amount of shared properties.