如何在组件结构中使用 BEM？

Question

我目前正在尝试在培训项目中使用 BEM。首先。我喜欢 CSS 中有结构。但是，我在正确使用 BEM 时遇到问题。在当前情况下，我不知道我是否正确理解了 M = 修饰符。

用例：我有一个文档列表。我迭代此列表并将单个文档（名称、大小、路径、mime）传递给组件“DocumentItem”。我已经想到了以下结构：

DocumentListing.vue (parent)
<div  v-for="item in list" class="documentListing">
  <DocumentItem :data="item"/>
</div>


DocumentItem.vue (child)
<div class="listItem">
  <img class="listItem__image" />
  <div class="listItem__name">abc</div>
  <div class="listItem__size">0 KB</div>
</div> 

问题：我的ChildComponent现在只是BE而不是BEM。或者我必须从整体上考虑结构？因此，B 在 ParentComponent (documentListing) 中，而 EM 在我的 ChildComponent 中。就像“

documentListing__listItem-image

”我现在有点困惑，希望你能提出一些好的意见。

Answer 1

您当前的结构对于 BEM 风格来说是正确的。

您不必一直使用 M。 如果您需要修改当前样式，则可以使用它。
一个很好的例子是，如果其中一个的图像不同，那么您会得到类似的结果：

<div class="listItem">
  <img class="listItem__image" />
  <div class="listItem__name">abc</div>
  <div class="listItem__size">0 KB</div>
</div>
<div class="listItem">
  <img class="listItem__image listItem__image--large" />
  <div class="listItem__name">cde</div>
  <div class="listItem__size">0 KB</div>
</div> 

此外，如果您愿意，您也不需要创建新的块。

元素不需要是其块的直接子代。
下面的例子也是有效的 BEM。

<div class="documentListing">
  <div class="documentListing__item">
    <img class="documentListing__img" />
    <div class="documentListing__name">abc</div>
    <div class="documentListing__size">0 KB</div>
  </div>
</div>