对BEM感到困惑：如何处理IMG和TABLE标签

Question

我正在尝试围绕 CSS 中的 BEM 命名约定进行思考，但对于某些部分我觉得有点混乱。

在我的例子中，我的 HTML（大致上）如下所示：

<div class="wrapper">
<img src="images/img.png">
<span class="header">Heading</span>
<table>
  <tbody>
    <tr>
        <td class="itemInfo">
          <span class="item">Item</span>
          <span class="itemDetails">Item Details</span>
        </td>
        <td class="itemDate">01/01/1980</td>
    </tr>
  </tbody>
</table>
</div>

在我的 CSS 中，我为 .wrapper、.header、.item、.itemInfo、.itemDetails 和 .itemDate 类定义了样式。将这些转换为 BEM 应该很简单。

但是，我的问题与我的 HTML 中的其他一些标签有关：

1) 如何处理IMG标签？它在我的 CSS 文件中定义了样式：

img {
style definition 1;
style definition 2;
..
}

我是否应该通过在我的 HTML 文件中为图像标签提供一个具有 BEM 约定的 CSS 类并在我的 CSS 中也定义这个相同的类来对 HTML 和 CSS 文件中的这个元素进行 BEM？

2) 在我的示例中，如何在 BEM 上下文中理解 TABLE 标记？换句话说，TABLE 和 TD 选择器在我的 CSS 文件中有自己的样式定义（与 IMG 标记相同）。我是否也应该像对待 IMG 标签（带/不带 BEM）一样对待这些标签？

Answer 1

BEM 旨在为开发人员阅读代码提供清晰的信息，特别是因为 CSS/Sass 很容易变得复杂。对于您的<img> 标签，我可以做出以下两个假设之一：

1. 您有想要应用到所有图像的样式，但也 应用于此的特定样式。
2. 没有其他<img>标签，没关系。

不管怎样，你都应该像这样创建一些 CSS 类

.standard-img{
  rule1: universal-value;
  rule2: universal-value;
}

.img-to-style{
  rule1: that-only-applies-to-this-img;
}

显然，您的<img> HTML 应该是这样的，那么：

<img class="standard-img img-to-style" src="blah" />

至于表，它有什么作用？我会做这样的事情：

<table class="ItemsTable">
  <tbody>
    <tr class="table__item-row">
      <td class="item-row__info">
        <span></span>
        <span></span>
      </td>
      <td class="item-row__date">
        // Content
      </td>
    </tr>
  </tbody>
</table>

有道理，对吧？将其镜像到您的 CSS 中。