Question

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

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

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

<i class="glyphicon glyphicon-ok">

我想减少HTML中使用的类数。一种方法是使用 less 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类的所有按钮将具有相同的样式，但是使用预定义样式可以扩展相同的按钮class，支持多种不同的颜色方案，而无需反复编写默认的.btn属性，因此更易于维护。如果您查看.btn-warning和所有其他按钮状态类的css，您可以看到它们只是定义了按钮的颜色和样式，并且无需再次重写按钮类;

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

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

参考来自：Here

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

1 个答案: