Html 如何将OOCSS类命名为具有竞争性的；范围；？

我知道这要求一个非常固执己见的答案，我想所有与命名约定相关的问题也是如此

我正在使用，它使用前缀/名称空间为面向对象的css扩展了BEM。 这允许使用

o-

前缀将类组织到对象中，用于无装饰的设计模式，如，和样式化的ui组件，使用

c-

前缀（加上更多）

下面是一个（通用）示例，该示例通常用于解释边界元法，并添加了有问题的名称空间：

.o-btn {
  width: 100%;
}

这里是竞争范围，目标是相同的（边界元法）区块

引用Harry Roberts CSS指南中的相关部分（没有足够的可信度发布第二个链接，对不起）：

在上面，我们可以看到.btn{}类如何简单地为元素提供结构样式，而不涉及任何修饰。我们用第二个类来补充.btn{}对象，例如.btn--negative{}，以便为该DOM节点提供特定的属性

对我来说，这个解释听起来像是我这样做的确切理由。 尽管如此，在同一块上使用两个不同的名称空间感觉还是不正确的，这可能会造成混淆

---

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

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

事实上，纯边界元法本身在混合的帮助下解决了这个问题（参见）

其思想是，您应该将

按钮

块作为通用组件保留，以实现最大的可重用性。然后你可以在

theme

modifier的帮助下添加所有化妆品。最后，在与父元素混合的帮助下添加定位（例如，

form\uu submit

）

所以你可能会得到这样的结果：

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

发送

如果您使用项目所需的内容，我更喜欢前缀语法（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" />

---

这不是我的问题，我可能用了令人困惑的措辞。我知道，在我的示例中，我可以毫无问题地堆叠类，但是使用我声明的具有相同类名的对象（o前缀）和组件（c前缀）感觉是错误的。

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