BEM会强迫你创建不必要的元素吗？
BEM（Block Element Modifier）是一种前端开发的命名规范和方法论，用于管理和组织CSS代码。它的目标是提高代码的可维护性和可扩展性。
BEM不会强迫你创建不必要的元素。相反，它鼓励开发者使用最少的元素来构建页面，并通过类名的方式来表示元素之间的关系。
BEM的核心概念是块（Block）、元素（Element）和修饰符（Modifier）：
- 块（Block）是一个独立的可重用组件，它代表一个完整的功能单元。块应该是自包含的，不依赖于其他元素或块。
- 元素（Element）是块的组成部分，它们只在特定的块内部存在，并且具有与块相关的语义。元素的类名应该以块的类名为前缀，用双下划线（__）连接。
- 修饰符（Modifier）是用于修改块或元素的外观、状态或行为的类名。修饰符的类名应该以块或元素的类名为前缀，用双短横线（--）连接。
通过使用BEM，开发者可以清晰地定义和组织CSS代码，避免选择器的嵌套和样式的冲突。这样可以提高代码的可读性和可维护性，并且方便团队协作开发。
BEM适用于任何规模的项目，并且特别适合大型项目和团队开发。它可以帮助开发者更好地理解和管理代码，减少错误和冲突，并提高开发效率。
在腾讯云的产品中，没有直接与BEM相关的产品或服务。然而，腾讯云提供了一系列与前端开发、云计算和互联网相关的产品，例如云服务器、云存储、人工智能服务等。您可以根据具体需求选择适合的产品，腾讯云的官方网站（https://cloud.tencent.com/）提供了详细的产品介绍和文档。
相关·内容
1回答
Html注释中的双连字符
html、css、bem
关于HTML注释中的"--“是否仍然无效，我看到了相互矛盾的文档和观点。我在这上面看到的大多数文档都有5-10年甚至更久的历史。考虑在HTML语言中使用语法的以下简化代码。
<html>
<head>
<meta charset="utf-8">
<title>Page</title>
</head>
<body>
<div>
<header>
浏览 0提问于2019-06-21得票数 1
5回答
为什么边界元通常使用两个下划线而不是一个修饰符？
css、bem
在边界元中，我理解对于修饰符，两个破折号是有意义的，这样您就可以将my-block-my-modifier中的修饰符与my-block--my-modifier区分开来。
但是为什么使用而不是 block_element**?**呢？
浏览 8提问于2014-07-10得票数 33
回答已采纳
1回答
修饰符的CSS BEM子项
css、bem
我是BEM方法论的新手，我有一个针对修饰者的孩子的问题。 假设我有这样的HTML： <div class="block-container">
<div class="block-container__element"></div>
</div> 在block-container中，我添加了修饰符block-container--modifier。 而CSS将是： .block-container {
...
}
.block-container__element {
...
}
.blo
浏览 5提问于2019-05-30得票数 1
回答已采纳
4回答
Sass BEM:当元素在修饰符内时避免修饰符复制
sass、bem
我可以以某种方式重构下面的代码片段，以消除双修饰符声明
.block {
&__element {
rule: value;
}
&--modifier {
rule: value;
}
&--modifier & {
&__element {
rule: value;
}
}
}
需要产出：
.block {
property: value;
}
.block--modifier {
property: value;
}
.block--modifier .block__el
浏览 1提问于2015-08-17得票数 8
回答已采纳
1回答
如何使用PostCSS自动重置？
css、postcss
似乎没有文档，我也不太理解上的代码示例。
我假设它会自动将重置规则附加到输出CSS文件中。文档使用了像.block这样的东西，但没有说明它们的用途。
下面的内容是什么意思？
.block {
padding: 1em;
}
.block:hover {
background-color: red;
}
.block__element {
margin: 1em;
}
.block--modifier {
border: 1em;
}
这只是普通的CSS吗？我以前没见过--modifier。如果它只是常规的CSS，那么这个插件的作用是什么，因为我可以覆盖常规CSS文件中的默
浏览 17提问于2016-08-04得票数 0
回答已采纳
3回答
使用BEM --修饰符有什么好处？
css、bem
我很难理解使用BEM的好处--修饰css命名约定。谁能告诉我为什么会这样：
.my-element--checked {
color: green;
}
比这更好吗？
.my-element.checked {
color: green;
}
使用BEM --modifier时，标记显然更加臃肿。
浏览 5提问于2016-02-03得票数 5
1回答
具有SASS的BEM公约-需要理解的问题
html、css、sass、frontend、bem
我是一个初学者，在前端，我试图吸收的概念，SASS和边界元。
我很难理解命名惯例，也很难理解它是如何用SASS组织的。
我编写了一个产品部分，其中包含三个div (列)，它们本身包含子元素。
我不知道如何组织好这些名字。例如，img是product__preview的子类，但我想将类命名为product__img .但看起来不对？如果产品部分中有几个图像，但其中一些图像必须不同，那么我们如何处理名称？(product__img似乎太模糊了)。是否需要为特殊情况添加product__preview__img类？
你能帮我纠正这个块以便我正确理解命名吗？
提前谢谢你！
<section c
浏览 3提问于2020-09-06得票数 3
3回答
CSS普通班会议
css、bem
我试着用BEM会议重塑我们的风格。在我们的页面上，我们得到了一些编写为bold的元素。
假设我们有一个startpage和一个detailpage。两个页面都包含一些文本元素。这个元素通常有一个额外的类，它只包含
.block__element {
font-weight: bold;
}
.block__element--modifier {
font-weight: bold;
}
为了避免不必要的代码重复，我在问自己如何最好地重构这个代码。定义一个公共元素(可能在我的主style.css中)是一个很好的方法吗？
.text--bold {
font-weight: bold;
浏览 1提问于2019-08-13得票数 1
回答已采纳
2回答
块元素修饰符-使用没有元素的边界元？
html、css、bem
虽然我已经使用CSS (和其他CSS预处理程序)一段时间了，但在遵循时，我仍然不太自信。
假设我们遵循这种特殊的边界元格式：
block-name__element-name_modifier-name_modifier-value
我是否可以知道在没有element-name的情况下指定类是否可以接受？这意味着我们只有块，后面跟着修饰符。
下面是一个示例：
<div class="menu_light-theme">
<!-- the other menu elements such as the buttons and icons -->
&
浏览 0提问于2019-05-13得票数 2
1回答
大型项目中的边界元方法是否正确使用？
web-development、html、css
我正在为大型项目创建SCSS，我决定使用BEM方法。我会有很多集装箱。我对BEM和最佳实践有疑问。
我现在的代码是：
.footer {
&__intro {
margin-bottom: 5em;
}
&__menu {
display: flex;
flex-wrap: wrap;
align-items: centre
}
&__menu-item {
&:not(:last-of-type) {
margin-r
浏览 0提问于2022-11-25得票数 0
1回答
BEM修饰符的子级命名困难
css、naming-conventions、naming、conventions、bem
所以我有以下的BEM课程：
.block
.block--modified
.block__child
现在，据我所见，大多数人会将修改后的.block的孩子命名如下：
.block--modified__child
我明白这是有道理的，但你为什么不能这样命名呢？
.block__child--modified
我认为这看起来更好，并且使修改更加孤立/显式，我也喜欢这样，因为这样您就可以有多个不依赖于被修改的父级的修改过的子级。
我们可以有一个.block和.block .block--modified元素。
而且两者都可以有.block__child和.block__child--modif
浏览 2提问于2016-03-10得票数 5
回答已采纳
2回答
我们能在边界元中做块修饰符的元素吗？
html、css、bem
我只想知道下面的代码是否遵循BEM方法的最佳实践？为块修饰符创建元素(在本例中为“块--mod”)是“块”块的修饰符。是否允许使用以下模式创建嵌套元素：“块-mod_elm”。
<div class="block block--mod">
<div class="block__elm block--mod__elm">
</div>
浏览 4提问于2017-11-16得票数 3
回答已采纳
1回答
DRY & BEM分类
html、sass、bem
我正在使用BEM方法，但我想知道我的scss是否因为它看起来不好，并想知道它是否对性能不好。我设置了几次'.description‘和'.title’的样式，但它在不同的修饰符节中，这会引起关注吗？我可以使用一个类来处理所有的'.title‘和'.description’吗？如果是这样，如何在BEM中使用它？
这是我的scss：
.section {
padding: 10rem 0 0 0;
@include for-tablet-landscape-up {
padding: 12rem 0 0 0;
}
//TEAM:
@in
浏览 0提问于2018-07-06得票数 0
3回答
什么是边界元方法？
css、css-selectors、bem
我最近听说了BEM方法。
边界元方法的具体用途是什么？
BEM以什么方式使我们的工作更容易？
使用边界元是一个很好的实践吗？
浏览 4提问于2016-04-18得票数 8
回答已采纳
2回答
在存在SCSS的情况下，BEM显式子类命名的意义是什么？
css、bem、smacss
我正在尝试学习和理解CSS命名约定背后的原因，比如BEM或SUITCss。在SCSS存在的情况下，我很难理解后代类名的价值。
例如：
<ul class="menu">
<li class="menu__item"></li>
<li class="menu__item"></li>
<li class="menu__item">
<a href="#" class="menu__item_
浏览 5提问于2014-07-12得票数 6
2回答
如何用边界元组织CSS？
css、bem
我刚刚学到了BEM，我想用它组织我的CSS。如何用边界元组织我的CSS？BEM网站不告诉您如何用边界元法组织CSS；该网站只告诉您如何命名块、元素和修饰符。
另外，每个网页应该使用不同的样式表，还是应该使用SASS并将所有scss.files合并到一个CSS文件中？
/********************************
BLOCKS
********************************/
/********************************
ELEMENTS
********************************/
/*******
浏览 0提问于2019-03-14得票数 3
回答已采纳
2回答
这是为嵌套元素编写边界元的正确方法吗？
html、css、reactjs、bem
所以我一直在用我认为正确的classNames来写。就像这样：
<div className="article">
<div className="article__textbox">
<h1 className="article__textbox--heading"></h1>
<p className="article__textbox--subheading"></p>
<span class
浏览 5提问于2020-09-18得票数 1
2回答
用于社交提要小部件的简单SASS & BEM模块
html、css、modules、sass、bem
过去几个月我一直在和SASS和BEM混在一起。我最近开始用模块化的方式来构建我的应用程序(为了可重用性和简单性)。
我正在使用模板伙伴在一分钟内编写模块。我已经尝试过尽可能简单地构建它，这样如果我回到我的代码中，我将能够尽可能快地找到它，而无需来回移动来尝试识别哪个元素执行什么任务。
<div class="moduleType">
<div class="moduleType__moduleName">
<div class="moduleType__moduleName__block"&
浏览 0提问于2017-02-23得票数 0
回答已采纳
3回答
scss边界元修饰符的难点
html、css、sass、bem
我很难理解如何用BEM命名约定正确地编写scss。
这里我有一些HTML：
<div class="SomeBlock">
<div class="SomeBlock__someElement">text</div>
</div>
<div class="SomeBlock">
<div class="SomeBlock__someElement--greenBG">text</div>
</div>
<div c
浏览 7提问于2016-05-14得票数 0
回答已采纳
1回答
如何使用边界元CSS修改块的多个元素
css、block、element、modifier、bem
假设我有以下的设置，
.block
.block__header
.block__content
.block__footer
现在我想显示这个块的活动状态。让我们说，块本身有一个绿色的背景，元素2和元素3应该得到粗体文本。正如我所理解的BEM的哲学，一个人不应该使用儿童选择器，以保持尽可能低的特异性。
所以这真的是做这个的方法吗？
.block.block--active
.block__header
.block__content.block__content--active
.block__footer.block__footer--active
更新:我将如何用
浏览 2提问于2015-06-10得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
