在嵌套结构中用边界元法命名CSS中的类

Question

我在BEM方法中有一个嵌套类的问题，例如，假设我有这些代码：

<div class="card">
  <div class="card__content">
    <div class="card__content__items">
      <div class="card__content__items__data">
        <h2>say somthing</h2>
        <p>Hello world</p>
      </div>
      <div class="card__content__items__views">
        <img src="test" alt="" />
        <p>Hello world</p>
      </div>
    </div>
  </div>
</div>

我如何将它转换成边界元的正确结构？我真的很困惑

编辑：

或

使用这种方法是正确的吗？

<div class="card">
  <div class="card__content">
    <div class="card__content_items">
      <div class="card__content_items_data">
        <h2 class="card__content_items_title">say somthing</h2>
        <p class="card__content_items_description">Hello world</p>
      </div>
      <div class="card__content_items_views">
        <img class="card__content_items_img" src="test" alt="" />
        <p class="card__content_items_description">Hello world</p>
      </div>
    </div>
  </div>
</div>

Answer 1

<div class="card">
  <div class="content">
    <div class="content__items">
      <div class="content__data">
        <h2>say somthing</h2>
        <p>Hello world</p>
      </div>
      <div class="content__views">
        <img src="test" alt="" />
        <p>Hello world</p>
      </div>
    </div>
  </div>
</div>

在我看来，你的卡是一个包装或容器，但如果它不是。我可以尝试将内容作为一个块。一般来说，我认为您必须最小化嵌套名称，即使它们是真正嵌套的。

例如：

<div class="card">
  <div class="content">
    <div class="content__items">
      <div class="content__data">
        <h2 class="content__title">say something</h2>
        <p class="content__description">Hello world</p>
      </div>
      <div class="content__views">
        <img src="test" alt="" />
        <p>Hello world</p>
      </div>
    </div>
  </div>
</div>

你可以看到h2和p的类来检查我的意思。