css - 为什么 Twitter Bootstrap 需要多个按钮类？

Question

要使用Twitter 的 Bootstrap 库制作主按钮，您需要使用两个 CSS 类，如下所示：class="btn btn-primary".

当他们可以让 btn-primary 包含 btn 包含的所有 CSS 时，他们为什么要以这种方式设计 API？纯粹是为了节省代码重复和文件大小，还是有更复杂的原因？

Answer 1

因为btn-primary不是默认按钮。将其变为蓝色就像btn-success将其变为绿色一样是附加的 CSS。

默认按钮为灰色。

Answer 2

这是因为OOCSS原则。从元素中分离某些样式可以更好地重用代码和样式，并且可以更轻松地快速修改 CSS 中的任何对象。例如，您的主.btn类使用默认灰色设置按钮样式，因此.btn该类的所有按钮都将具有相同的样式，但使用预定义样式，您可以扩展同一个按钮类以支持多种不同的配色方案，而无需.btn一遍又一遍地编写默认属性，因此更易于维护。如果您查看.btn-warning和所有其他按钮状态类的 css，您会发现它们只是定义了按钮的颜色和样式，而无需再次重写按钮类；

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

这允许更容易阅读和更短、更干净的样式表。