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元素应该调用＆quot; product-desc-list＆＃39;。 LI元素＆＃39; product-desc＆＃39;，因为这实际上是产品的产品描述。

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

第一个是组件定义。接下来定义可能的状态，如选中，正在进行中等。

以下是插图示例

＆＃13;

// your product in default definition. 
.product-desc {		
  &--link {
    text-decoration: underline;
  }
}

// your product in mark state definition
.mark {
    .product-description {
        &.--link{
            font-weight: bold;
        }
    }
}

＆＃13;

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

＆＃13;

如何避免BEM修饰符之类的冗余

1 个答案: