Question

我知道这是一个非常自以为是的答案，我想这些与命名惯例有关的问题也是如此。

我正在使用Harry Roberts BEMIT naming convention，它为面向对象的css增加了带前缀/命名空间的BEM。这允许使用o-前缀将类组织成对象，使用c-前缀（加上更多）来构造像the famous media object这样的无装饰设计模式和样式化ui组件。< / p>

这是（通用）示例，通常用于解释BEM的上下文中，并使用有问题的命名空间进行扩充：

.o-btn {
  width: 100%;
}

这里是竞争范围，针对同一个（bem）块

.c-btn {
  color: white;
  background: gray;
}
.c-btn--positive {
  background: green;
}
.c-btn--negative {
  background: red;
}

引用Harry Roberts CSS指南中的相关部分（没有足够的信息发布第二个链接，抱歉）：

上面，我们可以看到.btn {}类如何简单地为元素提供结构样式，并且不关心任何化妆品。我们使用第二个类补充.btn {}对象，例如.btn - negative {}，以便为DOM节点提供特定的化妆品。

对我来说这个解释听起来就像我做的那样正确。但是，感觉不正确，在同一个块上使用两个不同的命名空间，可能会造成混淆。

我选择哪个命名空间，如果其中两个竞争对手？

Answer 1

不要害怕在同一个DOM节点上拥有不同的BEM实体。

实际上纯粹的BEM本身在混音的帮助下解决了这个问题（见https://en.bem.info/methodology/key-concepts/#mix）。

我们的想法是，您应该将button块作为通用组件，并具有最大的可重用性。然后你可以在theme修饰符的帮助下添加所有化妆品。最后通过混合父元素（例如form__submit）来添加定位。

所以你最终会得到这样的东西：

<form class="form">
    <button class="button button--theme_awesome form__submit">Send</button>
</form>

Answer 2

您使用项目所需的内容，在我的情况下，我更喜欢使用预定义的语法（o-，c-，u-），因为您要告诉html元素它们是什么，这是一个使用sass语法的简短示例：

.c-button{
   &.c-button--dark{}
   &.c-button--orange{}
}

并且您可以覆盖引导程序类，例如，您不必关心其他类，使用此规范，您可以覆盖可能拥有的默认类，并且可以在其中混合使用css类yout hmtl元素，例如：

<input type="text" class="btn btn-primary c-button c-button-dark" />

如何使用竞争＆＃34;范围＆＃34;来命名OOCSS类？

2 个答案: