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

Question

使用 Twitter's Bootstrap library 制作主按钮，您需要像这样使用两个 CSS 类:class="btn btn-primary"。

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

Answer 1

这是因为 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;
}

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