为什么 Twitter Bootstrap 需要多个按钮类？答案

【问题标题】：Why does Twitter Bootstrap require multiple classes for buttons?为什么 Twitter Bootstrap 需要多个按钮类？
【发布时间】：2012-05-08 23:26:49
【问题描述】：

要使用Twitter's Bootstrap library 创建主按钮，您需要使用两个 CSS 类，如下所示：class="btn btn-primary"。

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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;
}

这使得样式表更易于阅读、更短、更简洁。

【讨论】：

这是一个公平的观点，但考虑到 Twitter 是用 LESS 编译的，因此作为开发人员，您是否可以获得所有这些 DRY 优势，只是结果是重复的。
@Steve Compiled less 应该提供与 OOCSS 相同的好处，它只是一种不同的编写方式，因此不会重复。根据roadmap，即将推出的下一个版本的引导组件正在基于此原则构建

【解决方案2】：

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

默认按钮是灰色的。

【讨论】：

对。还有史蒂夫，它是关于节省代码重复的； .btn 具有按钮外观和感觉的所有主要结构，但附加类允许很容易地改变颜色。我不使用 Twitter Bootstrap，但在我的许多项目中，无论是个人项目还是工作项目，我都使用了相同的方法，即拥有一个通用按钮类并允许其他类进行着色。