html - 如何使用竞争 "scopes"命名 OOCSS 类？

Question

我知道这是在要求一个非常自以为是的答案，我想所有与命名约定相关的问题也是如此。

我正在使用 Harry Roberts BEMIT naming convention ，它使用面向对象的 css 的前缀/命名空间来增强 BEM。这允许使用 o- 前缀将类组织到对象中，以实现像 the famous media object 这样的无装饰设计模式。 , 以及样式化的 ui-components，使用 c- 前缀(再加上一些)。

这是(通用)示例，经常在解释 BEM 的上下文中使用，并增加了有问题的 namespace :

.o-btn {
  width: 100%;
}

这里是竞争范围，针对相同的 (bem) block

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

引用 Harry Roberts CSS Guidelines 中的相关部分(没有足够的信誉发布第二个链接，抱歉):

Above, we can see how the .btn {} class simply provides structural styling to an element, and doesn’t concern itself with any cosmetics. We supplement the .btn {} object with a second class, such as .btn--negative {} in order to give that DOM node specific cosmetics.

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

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

Answer 1

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

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

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

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

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