BEM。元素可以包含块吗？
BEM（Block Element Modifier）是一种前端开发的命名规范和方法论，用于构建可维护、可扩展的CSS代码。BEM的核心思想是将页面分解为独立的块（Block），块内部可以包含元素（Element），而元素不能包含块。
元素是块的一部分，用于描述块的组成部分或子元素。元素的命名应该以块名为前缀，用双下划线（__）连接，例如：.block__element。
块和元素的关系是一种嵌套关系，块可以包含元素，但元素不能包含块。这是为了保持代码的清晰性和可维护性，避免样式的混乱和冲突。
BEM的优势在于：
- 可维护性：通过严格的命名规范和嵌套关系，可以更容易地理解和修改代码，减少样式冲突和错误。
- 可扩展性：BEM的模块化结构使得添加新的块或元素更加简单，不会对其他部分产生影响，提高了代码的可扩展性。
- 可重用性：通过将块和元素分离，可以更好地重用样式和功能，提高代码的复用性。
BEM适用于各种规模的项目，特别适合大型项目和团队协作开发。它可以帮助开发人员更好地组织和管理CSS代码，提高开发效率和代码质量。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关·内容
2回答
</li> </li>
</ul> 在本例中，我将块list放在元素menu__item中。 我想知道，这合法吗？
浏览 22提问于2019-05-09得票数 3
回答已采纳
有人知道如何使用自定义属性正确地添加/扩展所有本机HTML元素属性吗？interface HTMLElement { element?: BEM.Element;}
但是，我在vscode 1.6.1 (最新)中
浏览 6提问于2016-10-17得票数 33
回答已采纳
我正在尝试学习和理解CSS命名约定背后的原因，比如BEM或SUITCss。在SCSS存在的情况下，我很难理解后代类名的价值。&__item { //styles }有了在SCSS中嵌套规则的能力，我看不出有什么令人信服的理由让我在代码中包含祖先类名。menu__item的规则只适用于菜单下的菜单项，那么为什么我需要在类名中包含它？如果我想咨询如何构建这个“菜单”模块，我可以只咨询CSS，并同样清楚地看到菜单中的项目是如何嵌套的。那么为什么这种BEM语法是必要的呢？
我希望
浏览 5提问于2014-07-12得票数 6
1回答
我正试图用CSS包围我的BEM，结果被卡住了。
我有一个包含元素的块，其中包含一个基本上是制表符的<ul>。系统周围的选项卡看起来都是一样的--我可以在我的<ul>上同时拥有一个<ul>类和一个block__element (比如card__tabs )吗？还是必须为所有具有选项卡的块/元素创建相同的CSS样式集？
浏览 4提问于2017-10-26得票数 0
回答已采纳
2回答
我正在尝试将BEM集成到我的sass中。我也在使用Gulp。当我不使用BEM时，我的代码运行得很好。当我包含BEM时，代码不再起作用。 这是我没有使用BEM的HTML。height: 400px; float: left; }} 这是我使用BEM<div class="poster"></div>
浏览 19提问于2019-01-31得票数 0
2回答
我有一个关于BEM结构的问题。混合元素/修饰符在语义上正确吗？我有一个英雄和投资组合模块。我想在hero模块中使用portfolio__item，但它应该使用hero__item的基本样式。这是一种正确的做法吗？“允许”混合这些元素吗？
浏览 4提问于2016-07-05得票数 0
1回答
，但是当我想要块级修饰符时，问题就开始了： +m(theme-1) color: blue.menu--theme-1__item{color: blue;}.menu--theme-1 .menu__item {color: blue;}
因此，我需要一种方法来检查元素的上下文是什么，当上下文是块时，没有问题我尝试将父选择器作为字符串，所以当e父程序是b时，它将不具有--语法，相反，当他的父对象是m时，它将具有--语法，这样我就可以<
浏览 3提问于2014-03-15得票数 2
1回答
我是新来的BEM命名惯例。从我看过的教程来看，块部分似乎是包含元素的“包装器”。我的问题是BEM是如何与覆盖整个页面的容器一起工作的？还可以叫他们“集装箱”吗？
浏览 7提问于2022-01-09得票数 2
回答已采纳
1回答
BEM负责我的类的命名约定，但是我想尝试获得一些为什么我要存储我的scss的顺序。
我想了两件事，目录结构可以用组件分隔，但考虑到块级元素和组件之间没有1到1的映射，这可能不适合BEM。我想会有某种存储_base、_variables等的结构吗？
浏览 3提问于2017-05-25得票数 0
回答已采纳
1回答
如何在BEM中使用伪类？
、、、、
我正在尝试将其转换为BEM，但我能做的最多是：/*.custom-checkbox }*/
{使用BEM创建自定义复选框的最佳实践是什么？
浏览 8提问于2021-07-08得票数 2
3回答
我希望看到一行，因为：
* {}
width: 500px; height: 37px; width: 300px;}.bem-r
浏览 0提问于2017-07-26得票数 1
1回答
我非常喜欢BEM，我通常使用BEM的一个变体，其中我使用状态类来切换子项的开/关，这使得我的SASS中的规则很容易理解，比如： &__element {如果我只在每个元素上应用状态类，那么BEM</em
浏览 5提问于2017-01-22得票数 2
回答已采纳
1回答
所以我的问题是，我知道我可以使用scss.module，但我应该像那样在每个单独的scss文件夹中使用媒体查询吗？它好用吗？
浏览 1提问于2020-01-17得票数 0
2回答
我只想知道下面的代码是否遵循BEM方法的最佳实践？为块修饰符创建元素(在本例中为“块--mod”)是“块”块的修饰符。是否允许使用以下模式创建嵌套元素：“块-mod_elm”。
浏览 4提问于2017-11-16得票数 3
回答已采纳
例如： <div class="menu__item"> </div></div>但是如果菜单有自己的标题，那么如何识别菜单的标题和菜单项的标题呢？
浏览 0提问于2018-04-26得票数 0
如果h1被认为是块，那么这会使h1块的跨元素吗？我想，它们是h1块的元素。我想知道的是，这两种密码中哪一种是准确的？在第一个，我使用下划线，在第二个，我使用破折号。哪一个是准确的？
浏览 6提问于2021-06-29得票数 0
回答已采纳
1回答
因此，我正在尝试学习边界元，基本上我有一个元素出现不止一次，但在不同的块中，元素的样式在两个块中是相同的，所以通常我会给它们两个相同的类来共享样式，但在BEM中，我不确定这是否正确，下面的示例显示了符合BEM命名约定的页眉和页脚部分的标题块： <div class="b-overlay-panel__header">footer-title
浏览 4提问于2022-03-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
