少ない私が構造次のコードしている

Question

を最適化：

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

を私は「shops_item」で始まるすべてのブロックがbackground: blackのような一つの共通のCSSプロパティを持っている必要があると言うことができます。

どうすればよいですか？

.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; 
}