为什么Twitter Bootstrap需要多个按钮类？ [英] Why does Twitter Bootstrap require multiple classes for buttons?

问题描述

要使用 Twitter的Bootstrap库创建主按钮，您需要使用两个CSS类，如： class =btn btn-primary。

To make a primary button using Twitter's Bootstrap library, you need to use two CSS classes like so: class="btn btn-primary".

API这种方式，当他们可以使btn-primary包括所有btn包括的CSS？这是因为

Why did they design the API this way, when they could have made btn-primary include all of the CSS that btn includes? Is it purely to save on code duplication and therefore file size or is there a more complex reason?

推荐答案

这是因为< a href =http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/> OOCSS 原则。从元素中分离某些样式允许更好的代码和样式重用，并且更容易地快速修改css中的任何对象。例如，你有你的 .btn 类样式你的按钮与默认的灰色，所有所有按钮与 .btn 类将具有相同的样式，但是使用预定义的样式，您可以扩展相同的按钮类以支持多种不同的颜色方案，而不需要编写默认的 .btn 属性一遍又一遍，所以它更容易维护。如果你查看css的 .btn-warning 和所有其他按钮状态类，你可以看到，他们只是定义按钮的颜色和样式，跳过需要重新重写按钮类;

This is because of OOCSS principles. Detaching certain styles from elements allows for better code and style reuse and a easier way to rapidly modify any object in your css. For example, you have your main .btn class that styles your button with the default grey color, so all buttons with the .btn class will have the same style, but with predefined styles you can extend that same button class to support multiple different color schemes without the need to write the default .btn properties over and over again, so its easier to maintain. If you look at the css for the .btn-warning and all other button state classes you can see that they just define the color and style of the button and skip the need to rewrite the button class once again;

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

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

This allows for easier to read and shorter,more cleaner stylesheets.

这篇关于为什么Twitter Bootstrap需要多个按钮类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！