Вложенности в CSS?

Question

[Ibishka]

<div class="products__sort_type products__sort">
          <button class="products__sort-item active">
            Headphones
          </button>
          <button class="products__sort-item">
            Earphones
          </button>
          <button class="products__sort-item">
            Speakers
          </button>
        </div>
        <div class="products__sort_color products__sort">
          <h3 class="products__text">
            Colors
          </h3>
          <div class="products__sort-items">
            <button class="products__sort-item active">
              Black
            </button>
            <button class="products__sort-item">
              Red
            </button>
            <button class="products__sort-item">
              Green
            </button>
            <button class="products__sort-item">
              Yellow
            </button>
          </div>
        </div>

.products__sort-item {...}
.products__sort_type .products__sort-item {...}
.products__sort_color .products__sort-item {...}

Или писать дополнительный класс для .products__sort_color .products__sort-item

Comments

[Сергей delphinpro]

Вложенность одного уровня от модификатора допустима.