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