Bootstrap - why do I need two classes to style a button?

Question

This is how you style a button in Bootstrap:

<button class="btn btn-default">Do Something</button>

Two classes must be applied just to get a button. I see similar pattern in other parts of Bootstrap too:

<i class="glyphicon glyphicon-ok">

I would like to reduce the number of classes used within my HTML. One way how to do this is using less mixins:

.btn-default {
    .btn;
    .btn-default;
}
.glyphicon-ok {
    .glyphicon;
    .glyphicon-ok;
}

Then my HTML can be simplified to this:

<button class="btn-default">Do Something</button>
<i class="glyphicon-ok">

Is this a good idea? Am I losing something by combining the general class (.btn, .glyphicon) with the specific one (.btn-default, .glyphicon-ok)?

Answer 1

Your question is similar to another one on this site, where Andres Ilich has answered:

This is because of OOCSS principles. Detaching certain styles from elements allows for better code and style reuse and a easier way to rapidly modify any object in your css. For example, you have your main .btn class that styles your button with the default grey color, so all buttons with the .btn class will have the same style, but with predefined styles you can extend that same button class to support multiple different color schemes without the need to write the default .btn properties over and over again, so its easier to maintain. If you look at the css for the .btn-warning and all other button state classes you can see that they just define the color and style of the button and skip the need to rewrite the button class once again;

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    background-color: #F89406;
}

This allows for easier to read and shorter,more cleaner stylesheets.