更少優化代碼

Question

我有以下結構：

<div class ="shops"> 
    <div class = "shops__item_left"> 
    <div class = "shops__item_right"> 
    <div class = "shops__descr"> 
</div> 

而且可以說，我需要開始與所有塊「shops_item」有一個共同的CSS屬性一樣background: black。

我該怎麼做？ 我當然能做到這樣的：

.shops { 
    font-size: 15px; 
    &__item_left { 
     background: black; 
    } 
    &__item_right { 
     background: black; 
    } 

但我怎麼擺脫這種重複。

Answer 1

有幾個選項。您可能需要重構有點像這樣（注意多類名）：

<div class="shops"> 
    <div class="shops__item shops__item--left"> 
    <div class="shops__item shops__item--right"> 
    <div class="shops__descr"> 
</div> 

.shops { 
    font-size: 15px; 

    &__item { 
    background: black; 

    &--left { ... } 
    &--right { ... } 
    } 

} 

另外，您可以留下您的標記一樣，選擇含shops__item某處的類名所有元素他們。

[class*="shops__item"] { 
    background: black; 
}