如何命名具有竞争“作用域”的OOCSS类？

Question

我知道，这是一个非常固执己见的答案，以及所有命名会议相关的问题，我想。

我使用的是哈里·罗伯茨命名大会，它为面向对象的css增加前缀/名称空间。这允许使用o-前缀将类组织到对象中，以便使用对象这样的无装饰设计模式，并使用c-前缀(加上更多)来设置ui组件的样式。

下面是(泛型)示例，它经常用于解释边界元，并添加有问题的命名空间：

.o-btn {
  width: 100%;
}

在这里，竞争范围，针对相同的(Bem)块

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

引用哈里罗伯茨CSS指南的相关部分(不足以发布第二链接，对不起)：

上面，我们可以看到.btn {}类是如何简单地为元素提供结构样式的，而与任何化妆品无关。我们用第二类(如. .btn负{} )来补充.btn {}对象，以便给出特定于DOM节点的化妆品。

对我来说，这个解释听起来就像我所做的那样，是正确的理由。但是，在同一个块上使用两个不同的名称空间可能会让人感到困惑，这是不正确的。

如果两个名称空间相互竞争，我选择了哪个名称空间？

Answer 1

不要害怕在同一个DOM节点上有不同的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{}
}

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

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