选择 CSS/LESS 中的所有 BEM 修饰符答案

【问题标题】：Select all BEM modifiers in CSS/LESS选择 CSS/LESS 中的所有 BEM 修饰符
【发布时间】：2015-10-09 06:56:27
【问题描述】：

我有以下 HTML 结构：

<div class="my-grid">
    <div class="my-grid__row item">
        <div class="item__statusA"></div>
        <div class="item__statusB"></div>
        <div class="item__statusC"></div>
    </div>
</div>

我想选择所有item__status*，但似乎无法在 LESS 中完成。到目前为止，我已经尝试过：

.item {
    &__ {
        color: red;
    }
}

知道如何选择所有类而不创建单独的类吗？

【问题讨论】：

不嵌套，可以这样做：div[class^="item__"].
.item__status { &A, &B, &C {color: red} } - Less 不能为您做任何*，因为它不知道您的 HTML 是什么。因此，类似于@robjez 建议的基于 CSS attr 的选择器（即[class^="item__status"]）会更干净。
也许你应该考虑使用三个修饰符.item__status和三个修饰符B，B，C。

标签： css less bem

【解决方案1】：

想要它是错误的，我怀疑这是可能的。

为元素创建修饰符的正确方法，HTML结构：

<div class="my-grid">
    <div class="my-grid__row item">
        <div class="item__status item__status_A"></div>
        <div class="item__status item__status_B"></div>
        <div class="item__status item__status_C"></div>
    </div>
</div>

少

.item {
    &__status {
        color: red;
    }
}

或者一个mix的元素，HTML结构：

<div class="my-grid">
    <div class="my-grid__row item">
        <div class="item__statusA item__someElemforSemantic"></div>
        <div class="item__statusB item__someElemforSemantic"></div>
        <div class="item__statusC item__someElemforSemantic"></div>
    </div>
</div>

少

.item {
    &__someElemforSemantic {
        color: red;
    }
}

【讨论】：