提问者:小点点

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


我在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>

共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的类来检查我的意思。