html - BEM 会强制您创建不必要的元素吗？

Question

<header>
  <a href="#"><img src="kitty.jpg" /></a>
  ...
</header>

例如，我将它放在 header 中，它不依赖于 header block 。为了使其对 BEM 友好，我倾向于这样做:

<header>
  <div class="logo">
    <a href="#" class="logo__link"><img src="kitty.jpg" class="logo__img" /></a>
  </div>
  ...
</header>

这是处理 BEM 的正确方法吗？

Answer 1

“它不依赖于 header block ”我假设你的意思是你在别处重用了这个标志式的结构。那么，根据定义，它是一个 block ，因为它有 "no dependency on other blocks/elements on a page" .

因此，如果我对你的问题的解释是正确的，你应该能够给你的 anchor 标记一个 logo 类和 logo__img 中的图像；包装器 div.logo 是不必要的。

要回答标题问题，不，BEM 不应该以任何方式真正强制您使用大量 HTML。它主要是一种 CSS 方法，您可以在接受类名的任何 DOM 节点上定义 block 和元素。