将BEM类添加到html标记
将BEM类添加到html标记
提问于 2020-07-24 03:02:47
最近我开始学习BEM方法，我正在为一件事而苦苦挣扎，换句话说:如果我用BEM编写网页代码，我应该在每个html标签中使用BEM类，还是只在我认为有用的地方使用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中的所有标签，但另一些网站只有一些选定的标签，所以我有点困惑;)请帮助:)
回答 2
Stack Overflow用户
发布于 2020-08-18 05:49:01
如果它是一个图标，最好也给它相应的CSS类。因此，您的第一个解决方案似乎是正确的。也许你想给它一个自己的块，这样你就可以在另一个上下文中使用它。我认为这在图标的情况下是有意义的。
Stack Overflow用户
发布于 2021-05-12 04:51:55
为每个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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63061383
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号