如何避免像 BEM 修饰符这样的冗余

【问题标题】：How to avoid redundant for something like BEM modifiers如何避免像 BEM 修饰符这样的冗余
【发布时间】：2017-01-29 16:35:14
【问题描述】：

最近，当我开始使用自己的基于 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>

【问题讨论】：

标签： css bem

【解决方案1】：

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

起初我会更改班级名称。因为 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>

【讨论】：