如何修改 BEM 中的几个嵌套元素？答案

【问题标题】：How to modify several nested elements in BEM?如何修改 BEM 中的几个嵌套元素？
【发布时间】：2020-09-25 12:45:13
【问题描述】：

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

【问题讨论】：

标签： html css bem

【解决方案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;
  }

【讨论】：