BEMモディファイアのようなものを冗長にする方法を避ける

Question

最近BEMベースの方法論の独自の実装を使用し始めたとき、入れ子になった要素のモディファイアを付けました。

product-desc-nameのクラスがmarkの場合、リンクの色を赤に変更したいと考えています。
次の例は、この問題を示しています。

最後のスタイルを同じにしてもクラス名を重複しないようにするにはどうすればよいですか？

.product-desc { \t \t 
 
    &-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'。これは実際には製品の製品記述です。

より重要なのは製品の状態です。したがって、要素の選択を最初に述べる必要があります。これにより、1つのコンポーネントに複数のブロックを使用できます。

最初はコンポーネント定義です。等進行中の、選択されたような次の定義可能な状態ここ

は図

// your product in default definition. 
 
.product-desc { \t \t 
 
    &--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>

の例です