As I delved into using my own adaptation of the BEM methodology, I encountered a roadblock with modifiers for nested elements.
The challenge at hand is changing the link color to red when product-desc-name has the mark class.
The snippet below illustrates the issue.
How can I achieve the desired style without redundancy in class names?
.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>