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和CSS文件中对这个元素进行BEM，为我的HTML文件中的图像标记提供一个带有BEM约定的CSS类，并且还在我的CSS中定义这个相同的类？

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

Answer 1

BEM旨在为开发人员阅读代码提供清晰度，特别是因为CSS / Sass可以轻松搞定。对于<img>标记，我可以做出两个假设之一：

您想要应用于所有图像的样式，但也适用于此的特定样式。
没有其他<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中镜像它。

与BEM混淆：如何处理IMG和TABLE标签

1 个答案: