html - 如何修改 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;
  }

在这种情况下，要将某些项目标记为活动，我只需将“活动”类添加到父标记。

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 方法是否正确实施？有没有办法使用一个修饰符来改变嵌套元素的样式？

标签： htmlcssbem

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