BS3: Require .btn-default for all standard buttons

Why

The base-modifier class approach we use just about everywhere in Bootstrap works great most of the time, but when doing any level of customization, things start to get hairy real quick. Currently, if you override .btn, you thus override .btn-default and every other modifier class. If you then want to customize .btn-default some more, you have twice the overrides on that single button class.

Impact

The impact of this goes well beyond buttons, but the immediate effects will be seen on every button. The required markup for a button will change to require two classes:

<!-- Current syntax -->
<button type="button" class="btn">Save changes</button>

<!-- Proposed syntax -->
<button type="button" class="btn btn-default">Save changes</button>

This change also applies to standard button groups—any basic button there will require two classes for a regular gray button. This is just like the primary, success, or info buttons we provide.

Improving customization

The big motivator here is improved customization. Here's a look at how you might customize buttons now, and how it could be improved with this proposed change:

/* Current approach */

/* Setting background of all buttons to red overrides .btn-primary because 
   it's the same level of specificity as .btn */
.btn {
  font-family: "Courier New", Courier, monospace;
  background-color: red;
}
/* Which means, we need to override the primary button if we want that to remain blue. */
.btn-primary {
  background-color: blue;
}

/* Proposed approach */

/* Apply common changes to the base class still. */
.btn {
  font-family: "Courier New", Courier, monospace;
}
/* But keep the specific button changes to one class to prevent another round 
   of overrides. Thus, no need to reset the .btn-primary here as it remains unaffected. */
.btn-default {
  background-color: red;
}

Benefits of LESS

While this does complicate the pre-defined classes, those who use these classes as mixins will see little change. For example, if you want to make .save-changes into a button, the required LESS code for that barely changes:

/* Current syntax */
.save-changes {
  .btn();
}

/* Proposed syntax */
.save-changes {
  .btn();
  .btn-default();
}

Looking elsewhere

Beyond the impact of all basic buttons in Bootstrap requiring this extra class, this change will set the course for all other components that use similar approaches with modifier classes. This means the following components will see a slight reworking in the same vein as the buttons here:

• Labels
• Alerts (the default alert will likely be white or gray)
• Progress bars
• Panels

Open questions and todos

I'm pretty set on this direction, but I'm probably missing a few things and I'm open to adjusting our execution before merging in. Specifically, I have the following to figure out:

• Does .btn-default make sense, or does another adjective feel more appropriate?
• Anything missing from or out of date in the docs?

<3