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

Question

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

当 product-desc-name 具有类 mark 时，我想将链接颜色更改为红色。
下面的例子说明了这个问题。

我应该怎么做才能保持最终样式相同但又不重复类名？

.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 的典型弱点。我搜索了很长时间，但没有找到任何好的解决方案，所以我自己做了。

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

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

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

这里有一个例子来说明

// 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>