Bootstrap - 为什么我需要两个类来设置按钮样式？

Question

这是在 Bootstrap 中设置按钮样式的方式：

<button class="btn btn-default">Do Something</button>

必须应用两个类才能获得一个按钮。我在 Bootstrap 的其他部分也看到了类似的模式：

<i class="glyphicon glyphicon-ok">

我想减少在我的 HTML 中使用的类的数量。一种方法是使用 less 混合：

.btn-default {
    .btn;
    .btn-default;
}
.glyphicon-ok {
    .glyphicon;
    .glyphicon-ok;
}

那么我的HTML可以简化成这样：

<button class="btn-default">Do Something</button>
<i class="glyphicon-ok">

这是个好主意吗？将普通类（.btn、.glyphicon）与特定类（.btn-default、.glyphicon-ok）结合起来，我是否会失去一些东西？

Answer 1

您的问题类似于此站点上的another one，其中Andres Ilich 具有answered：

这是因为 OOCSS 原则。从元素中分离某些样式可以更好 代码和样式重用以及快速修改任何对象的更简单方法 你的CSS。例如，您的主要 .btn 类具有样式 您的按钮默认为灰色，因此所有按钮都带有 .btn 类将具有相同的样式，但您可以使用预定义的样式 可以扩展同一个按钮类以支持多种不同的颜色 无需编写默认 .btn 属性的方案 一遍又一遍，所以它更容易维护。如果你看一下css .btn-warning 和所有其他按钮状态类，您可以看到 他们只是定义按钮的颜色和样式并跳过需要 再次重写按钮类；

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

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