如何修改 BEM 中的幾個嵌套元素？

Question

不是 BEM html 和 CSS：

  <div class="item active">
    <div class="square"></div>
    <div class="text">Step 1</div>
  </div>
  <div class="item">
    <div class="square"></div>
    <div class="text">Step 2</div>
  </div>

.item {
    display: flex;
    margin: 10px 0;
  }
  .item .text {
    color: gray;
  }
  .item .square {
    height: 20px;
    width: 20px;
    border: 1px solid gray;
  }
  .item.active .text {
    color: red;
  }
  .item.active .square {
    border-color: red;
  }

在這種情況下，要將某些項目標記為活動，我只需將 class '活動' 添加到父標記。

BEM 版本：

  <div class="item">
    <div class="item__square item__square_active"></div>
    <div class="item__text item__text_active">Step 1</div>
  </div>
  <div class="item">
    <div class="item__square"></div>
    <div class="item__text">Step 1</div>
  </div>

.item {
    display: flex;
    margin: 10px 0;
  }
  .item__text {
    color: gray;
  }
  .item__square {
    height: 20px;
    width: 20px;
    border: 1px solid gray;
  }
  .item__text_active {
    color: red;
  }
  .item__square_active {
    border-color: red;
  }

在這種情況下，我必須將兩個類 item__text_active 和 item__square_active 添加到適當的子元素。 它看起來很尷尬。

問題：BEM 方法是否正確實施？ 有沒有辦法對一個塊使用一個修飾符來改變嵌套元素的 styles？

Answer 1

從論壇獲得答案（ https://ru.bem.info/forum/1608/ ）：允許從塊修飾符到元素的級聯（例如，用於主題）

<div class="item item_active">
  <div class="item__square"></div>
  <div class="item__text">Step 1</div>
</div>
<div class="item">
  <div class="item__square"></div>
  <div class="item__text">Step 1</div>
</div>

.item__text {
    color: gray;
  }
  .item__square {
    border: 1px solid gray;
  }
  .item_active .item__text {
    color: red;
  }
  .item_active .item__square {
    border-color: red;
  }