Why does Twitter Bootstrap require multiple classes for buttons?

Question

To make a primary button using Twitter's Bootstrap library, you need to use two CSS classes like so: class="btn btn-primary".

Why did they design the API this way, when they could have made btn-primary include all of the CSS that btn includes? Is it purely to save on code duplication and therefore file size or is there a more complex reason?

Answer 1

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.