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

Question

这是你在Bootstrap中设置按钮的样式:

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

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

<i class="glyphicon glyphicon-ok">

我想减少HTML中使用的类的数量.一种方法是使用较少的 mixins:

.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

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

这样可以更容易阅读,更简洁,更清晰的样式表.

参考来自:这里