如何避免 BEM 修改器之类的冗余

Question

最近，当我开始使用自己的基于 BEM 的方法实现时，我坚持使用嵌套元素的修饰符。

我想在 product-desc-name 有 class mark 时将 link 颜色更改为红色。
下面的例子说明了这个问题。

我应该怎么做才能保持最终样式不变但又不会重复 class 个名称？

.product-desc {  
  &-name {
    &.mark {
      /* this section is ugly */
      .product-desc-link {
        color: red;
      }
    }
  }
}

<ul class="product-desc">
  <li class="product-desc-name">
    <a class="product-desc-link">Param1</a>
  </li>
  <li class="product-desc-name mark"> <!--add class .mark-->
    <a class="product-desc-link">Param1</a>
  </li>
</ul>

Answer 1

这是 BEM 的典型弱点。我搜索了很长时间，但没有找到任何好的解决方案，所以我自己做了。

起初我会更改 class 名称。因为 UL 元素应该调用 'product-desc-list'。 LI 元素 'product-desc'，因为这实际上正是产品的产品描述。

更重要的是产品的状况。因此首先应该提到元素的选择。这允许多个块用于一个组件。

首先是组件定义。接下来定义可能的状态，如选中、进行中等。

这里举例说明

// your product in default definition. 
.product-desc {  
  &--link {
    text-decoration: underline;
  }
}

// your product in mark state definition
.mark {
    .product-description {
        &.--link{
            font-weight: bold;
        }
    }
}

<ul class="product-desc-list">
  <li class="product-desc">
    <a class="product-desc--link">Param1</a>
  </li>
  <li class="product-desc mark"> <!--add class .mark-->
    <a class="product-desc--link">Param1</a>
  </li>
</ul>

如何避免 BEM 修改器之类的冗余

How to avoid redundant for something like BEM modifiers

css

bem