Why does Bootstrap have nav and nav-stacked as different classes?

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:


    .btn {
    border: 1px solid;

The above Less code compile in to .btn,

    .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.

Leave a Reply

(will not be published)