css - 正确使用方块和修饰符

Question

我有一个网站，我已经实现了 ABEM（BEM 的替代品，具有原子设计命名系统），现在经过长时间的编码狂欢，我的大脑非常混乱......我有一个命名问题<div>

我有一个我命名的块：.a-pipe里面有一些文本和一些样式。由于使用了许多不同的“管道”变体，我现在使用修饰符来改变它的颜色。所以即：.--grey, .--blue, .--green. 现在有了这个以及我对使用块、元素和修饰符的困惑，我遇到了以下问题：是否应该.a-pipe是一个块，如果是，那么该块的变体是否应该有修饰符来改变颜色和其他样式？

的HTML：

<div class="a-pipe --grey">some normal text <span class="a-pipe --lgText">Some larger text</span></div>

<div class="a-pipe --green">some normal text <span class="a-pipe --lgText">Some larger text</span></div>

CSS：

.a-pipe {
 padding: 10px 3.5rem 10px 0;
 border-radius: 0px 10rem 10rem 0px / 0px 8.1rem 8.1rem 0px;
 text-align: right;
 color: white;
}

.a-pipe.--green {
 background-color: green;
}

标签： cssbem