2

Bootstrap 类非常重复： 

<a class="btn btn-large btn-block btn-primary">Simple button</a>

不能将 CSS 重写为： 

.btn { /* CSS for btn */ }

.primary.btn { /* primary btn css */ }


.block.btn { /* block btn css */ }

/* etc... */

然后对于同一个按钮： 

<a class="large primary block btn">Simple button</a>

这对我来说读起来好多了，仍然遵守 OOCSS [1]，并且是 DRYer。

我敢肯定 BS 使用这个约定是有充分理由的——有人能启发我吗？

[1]为什么 Twitter Bootstrap 需要多个按钮类？

4

3 回答 3

3

我想我读到 Bootstrap 正在阻止自己使用现有项目中可能存在的通用命名类。

例如，拥有一个.success类在框架中被认为是危险的，因为它很可能会被用作自定义类。.btn-success发生冲突的可能性较小。

然而，Bootstrap 也反驳了这一点：他们有一个.active类，在我看来这是一个非常常见的类名。

我更喜欢有更多可组合的类名，而且它还没有真正咬我。但我不是在制作一个被成千上万人使用的框架，所以我知道什么！

于 2014-11-24T14:51:46.963 回答
1

还可以在以下位置找到更多信息：https ://github.com/twbs/bootstrap/issues/10332

以按钮为例。您可以将这些类应用到标签上button，a因此无法用于button.success选择所有可能的标签/元素，这些标签/元素可以设置样式以使它们看起来像一个按钮。所以.btn-意味着像一个按钮。

正如您自己的示例所示，是primary按钮还是面板样式？

Bootstrap 使用基类和其他类来描述状态。基类设置一般属性，而状态（或大小等）类描述元素的样式和颜色。这似乎基于 OOCSS。

另一方面，当许多类共享相同的属性时，基类会阻止选择器列表（更多字节）增长。您可以在使用 Less扩展时看到这一点。一些例子；考虑以下基类（在 Less 中）：

   .button-base-class {
    color:red;
      &:hover,
      &:active,
      &:focus { color:green;
      }
    }

现在多次扩展上述基类：

button.type1 {type:1; &extend:(.button-base-class all); }
button.type2 {type:2; &extend:.button-base-class all); }
button.type3 {type:3; &extend:(.button-base-class all); }

在 CSS 中输出以下代码：

.button-base-class:hover,
.button-base-class:active,
.button-base-class:focus,
button.type1:hover,
button.type1:active,
button.type1:focus,
button.type2:hover,
button.type2:active,
button.type2:focus,
button.type3:hover,
button.type3:active,
button.type3:focus {
  color: green;
}

这将是一长串选择器，每次扩展基类时都会增长。

最后，人们可能想知道为什么不使用属性选择器而不是基类。也可以使用 选择每次btn btn-出现[class^="btn-"],[class*=" btn-"]。使用最新版本时，您不必在 HTML 中编写基类代码。出于性能原因（尤其是 IE），引导程序避免使用（部分）属性选择器。这些性能问题可以在阅读时讨论：http: //benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

于 2014-11-24T21:50:50.553 回答
0

一件事更清洁的样式表。它还通过保持类一致使维护更容易。（btn-用于按钮、dropdown-下拉菜单、label-标签等）

于 2013-09-16T18:08:31.543 回答