将 BEM 类添加到 html TAG答案

【问题标题】：Adding BEM classes to html TAG将 BEM 类添加到 html TAG
【发布时间】：2020-11-13 14:24:21
【问题描述】：

最近我开始学习 BEM 方法，但我正在为一件事苦苦挣扎：如果我使用 BEM 对网页进行编码，我应该在每个 html TAG 中使用 BEM 类，还是只在我认为它们有用的地方使用它们？假设我们有这段代码：

<ul class="menu__item-list">
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon" src="" alt="">link-1</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon" src="" alt="">link-2</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon"src="" alt="">link-3</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon"src="" alt="">link-4</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon"src="" alt="">link-5</a></li>
        </ul>

或者如果我不需要这个，我可以删除 menu__icon 类并保持这样：

<ul class="menu__item-list">
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-1</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-2</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-3</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-4</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-5</a></li>
</ul>

我检查了许多不同的网站，其中一个网站几乎包含 BEM 中的所有标签，但其他网站只有一些选定的标签，所以我有点困惑 ;) 请帮助 :)

【问题讨论】：

标签： class methodology bem

【解决方案1】：

如果它是一个图标，最好也给它相应的 CSS 类。所以你的第一个解决方案似乎是正确的。也许你想给它一个自己的块，这样你就可以在另一个上下文中使用它。我认为这在图标的情况下是有意义的。

【讨论】：

【解决方案2】：

为每个 HTML 元素添加类是一种很好的实践。但是，在使用 BEM 标准时，并不总是必须为每个 HTML 标签添加一个类。

例如，假设您有一个手风琴，它总是包含顶部标题和一些内容。在这种情况下，您无需每次都在 h4 或 p 标签上上课。但是，我仍然相信它的完整场景基础以及您想要创建的良好、有组织或可扩展的组件。

下面是一些代码示例：代码写在SCSS以便更好理解，但是下面的实际CSS代码已经特意注释了，如果有人想测试它可以测试它。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  
  &__panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  }
  
  & .active,
  &::hover
  {
    background-color: #ccc; 

  }
}

/*
.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion__panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
*/

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="accordion__panel">
<h4> Content Heading 1 </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="accordion__panel">
<h4> Content Heading 2 </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="accordion__panel">
<h4> Content Heading 3 </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


</body>
</html>

【讨论】：