如何避免像边界元修饰符这样的冗余
如何避免像边界元修饰符这样的冗余
提问于 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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-29 17:06:39
这是BEM的一个典型弱点。我已经寻找了很长时间，但没有看到任何好的解决办法，所以我自己做。
一开始我会更改类名。因为UL元素应该被称为“product list”。LI元素‘product’，因为这实际上正是一个产品的产品描述。
更重要的是产品的状况。因此，应该首先提到元素的选择。这允许一个组件使用几个块。
第一个是组件定义。下一个定义可能的状态，如选择、正在进行等。
这里有一个例子来说明
// 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41923222
复制相关文章
相似问题
腾讯云开发者
