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

Answer 1

Because btn-primary isn't the default button. It's additional CSS that turns it blue much like btn-success turns it green.

The default button is grey.

Answer 2

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.