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

相关·内容

ABB 3HAB8101-1809A 可以包含不同的元素

ABB 3HAB8101-18/09A 可以包含不同的元素图片在当今紧迫的期限和日益增加的产品复杂性环境中，满足最高质量标准和法规变得更加困难。客户需要完美无瑕的商品。...公司可以使用人工智能来检测生产过程中可能导致质量问题的故障。这些缺陷可大可小，但它们都会对整体性能产生影响，可以及早消除。...它可以与基于云的数据处理平台结合使用以产生自动响应。制造商还可以在产品首次投放市场时收集有关其产品性能的数据，以便他们在未来做出更好的战略决策。

2021 0

一道面试题来看伪元素、包含块和高度坍塌

通过上述的描述，可以知道margin-top margin-bottom margin-left margin-right 百分比的长度是由当前元素的包含块的宽度来决定的。...，称为元素的包含块。...因此满足第一种情况，取它最近的祖先元素，也就是包含块为 container....Case3 当前元素为 position:fixed ，此时的包含块为视口。...每一个问题都对应着一个知识块。 ::after 伪元素有什么特殊的魔法吗？ -> 伪元素(Pseudo elements) margin-top:100% 为什么能够自适应宽度？

1.1K2 0

编写模块化CSS——BEM

在这种情况下，这个表单可以是一个块。在 BEM 中，块被写为像 class 的名字一样，如下所示： ?...BEM 使用 .form 而不是元素的原因是因为类允许无限的可重用性，而即使是最基本的元素也可能改变样式。按钮很好地阐释了可以包含不同样式的块。...第二部分（ :not([class*='button__']) ）告诉解析器将包含.button__任何东西排除在外，于是排除了 BEM 元素。...所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。 ? ? BEM 元素有两个优点：你可以让 CSS 的优先级保持相对扁平。...创建新的块来保存孙元素在上述情况下，你可以轻松地将 .comments__comment 拆为 .comments 和 .comment ： ? 这更有意义，不是吗？

2.1K7 0

python抛出异常和捕获异常_在try块中可以抛出异常吗

Python抛出异常【1】程序运行过程中 Python解释器遇到一个错误会停止程序的运行并且提示一些错误信息这个就是异常程序停止并且提示错误信息的动作叫做抛出异常抛出异常原因主动捕获异常可以增加健壮性...ArithmeticError 算术错误的基类 ZeroDivisionError 算数错误的子类，除法或模运算的第二个参数是零 BufferError 缓冲区错误注意如果不确定需要打印异常种类只是单纯不想让程序暂停可以使用基类...… 是固定的语法格式打印traceback信息 finally 后的代码不管是否抛出异常都会执行 except 的原理调用sys中 exc.info 方法返回基本信息所以抛出异常的第一步拓展可以在这里开始

4.5K6 0

怎样才能写出更好的 CSS

BEM 可以帮助我们解决这个问题。BEM 是一种命名约定，是英文 Block Element Modifier（块元素修饰符）的缩写。这种方法可以使我们的代码结构化，并提高模块化和可重用性。...现在让我们说一说什么是块、元素和修饰符。块你可以把块视为组件。还记得你小时候玩过乐高积木吗？让我们回忆一下小时候。如果需要建造一个简单的房子，你会怎么做？...这些就是我们的元素。它们是块的一部分，它们对于建块必不可少。但是，在块外面的时候，它们便无用武之地。...块和元素可以嵌入其他块和元素，但是它们必须是完全独立的。请记住：独立。所以如果你想将把一个按钮放在标题下的话，就不要在按钮上加边距，否则按钮就会与标题绑定。请改用工具类。...是的，你的 HTML 文件会超负荷，但是不用担心，与 BEM 带来的好处相比，这只是个小小的缺点。示例以下是一个练习。你可以去你最喜欢或最常用的网站，然后想想看哪些是块、元素和修饰符。

1.7K1 0

团队分享，Bem规范调研及实践

BEM 是 BlockElementModifier 的缩写，其中B 表示块（block）、E 表示元素（element）、M 表示修饰符（modifier）。这三个部分通常使用__ 与--连接。...即： .块__元素--修饰符{} Block：代表了一个独立的块级元素，可以理解为功能组件块。...语义化 BEM 的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。...这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...上面我们每个样式都要写一遍 card，如果 card 换成一个比较长的单词，这样也太冗长了，这也是大家不太喜欢 bem 的一个原因，但这个 sass 或 less 是很好的解决的，我们可以用 & 表示根元素

7981 0

如何更优雅的编写CSS代码

BEM 帮助我们解决该问题。BEM 是一种命名约定，表示“块元素修饰符”。该方案可以使我们的代码更加结构化，更加模块化和更大的可复用性。现在我来解释下什么是块、元素和修饰符。...块块通常被视为一个组件。还记得小时候玩的乐高吗？好的，让我们回到小时候。你打算如何建造一座简单的房子？你需要一个窗户，一个屋顶，一扇门，一些墙，就这些东西，这些就是我们需要的块。...这就是我们的元素。它们是“块”的一部分，它们是建造“块“的必需品，但离开了”块“，它们什么都不是。...它们是块或元素的标识，用于更改行为、外观等。命名: 块元素名称或元素名称+ -- +修饰符名称: .Block__element-modifier，.Block-modifier。...块/元素可以嵌套到其它块/元素中，但它们必须是完全独立的。记住这个词：独立。所以，不要在按钮元素上写margin，因为你想要把按钮放在标题元素下，否则你的按钮将会和标题元素强耦合。

1.9K1 0

CSS命名规范之BEM-源自Yandex的CSS命名方法论

BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。...BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。...，如： .myHeader-search{ ... } /* 自定义的某个块 */ .myHeader-search__textElement{ ... } /* 自定义块中的textElement元素...*/ .myHeader-search--full{ ... } /* 自定义块中的full修饰符 */ BEM的关键在于，光凭名字就可以告诉其他开发者某个标记(class)是用来干什么的。...使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下： <!

9921 0

编写模块化CSS：命名空间

换句话说，影响块或其元素的位置的属性应该被抽象为一个单独的类用于重复利用。在CSS中，定位块的行为也称为布局块。在一般意义上，定位是布局。...响应式排版的付款表单在上面的设计中，您可以看到该表单包含两行输入元素。第一行中有两个相等大小的输入框，第二行中有两个不同大小的输入框。为了区分这三个不同大小的输入框，我选择了布局前缀： ?...仍然被认为是一个对象，因为它不包含对象和组件。倒计时器的HTML结构如下： ? 注意.o-countdown包含三层HTML元素。虽然它很大了，但它仍然是一个对象，因为它不包含任何其他对象或组件。....你可以选择任何的对象，并把它放在你喜欢的地方，而且并不会破坏你的网站的结构。这也意味着对象不应该更改外部任何结构。因此，对象块不能包含任何这些属性/值： absolute 和 fixed 定位。...这被称为BEM混合，它允许我使用组件的类来创建一个对象，而不影响原始按钮。组件的总结组件（.c-）是您可以在整个站点中使用的更大的构建块。

2.7K7 0

【React】：CSS 模块化

或者他们之间真的有关系吗？你应该在 bio 旁边添加 pro-user 吗？ image 和 profile 写在同一部分 CSS 吗？可以在其他地方使用 avatar 吗？...你会发现页面里包含的是 logo，搜索栏，导航，照片列表，辅助导航，标签框，视频播放器等。这些是可以网站的任何位置都可以独立使用的内容。它们只是碰巧在这个特定页面以这种方式组合。 3....CSS模块化方案——BEM BEM，三个字母分别代表 Block、Element、Modifier，BEM 也是在 2009 年提出，起源于 Yandex（可以说是俄语版的 Google）。...BEM的核心概念是 —— 块（Block）由子元素（Element）构成，并且可以修改（Modified）。...BEM 命名约定： .block-name__element--modifier 名称以小写字母书写名称中的单词用连字符（-）分隔元素由双下划线（__）分隔修饰符由双连字符（--）分隔一个 BEM

1.3K2 0

浅谈 Css 规范

块（block）是 BEM 的核心部分，它定义了一个 HTML 元素的基本结构和行为。块可以使用大写字母命名，例如 .Header、.Main、.Footer 等。...元素（element）是块的一个组成部分，它定义了块中特定内容的样式。元素可以使用小写字母命名，例如 .header、.main、.footer等。...使用小写字母命名元素和修饰符。修饰符必须紧跟着元素或块。修饰符可以使用中划线（_）或破折号（-）进行命名。...避免样式冲突: BEM 的命名约定避免了样式冲突，每个块和元素都有独立的命名空间，不会受到外部样式的影响。缺点: 命名冗长: BEM 的命名规范较为严格，可能导致类名过长，增加了代码量和阅读难度。...SMACSS 将 CSS 代码分为五个主要类别: 基础（Base）是 HTML 元素定义默认样式，可以包含属性、伪类等选择器，如 reset.css、normailze.css 之类的格式化元素样式 CSS

941 0

CSS规范--BEM入门

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。...BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。...BEM的命名中包含了模块名，长长的命名会让HTML标签会显得臃肿。...使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。...首先，有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况，所以上述每一页的按钮名可以改成：page-btn__btn。

1.2K2 0

进阶 | CSS进阶：提高你前端水平的 4 个技巧

BEM 代表块(block)、元素（element）和修饰符（modifier）。Yandex，在俄罗斯的相当于谷歌的搜索引擎，为了解决他们 CSS 代码库中的缩放问题而提出了它（它指BEM）。...BEM 是一个极其简单——又极其严格——的命名规范。 .block {} .block__element {} .block--modifier {} 块（Blocks）代表高级别的类。...元素（Elements）是块的子模块。修饰符（modifiers）代表不同的状态。...你可以在《深入学习 BEM 语法》、《BEM 101》和《BEM 简介》上看到更多关于 BEM 的信息。想要了解不同的命名规范，参见《OOCSS、ACSS、BEM、SMACSS：这些是什么？...splash 这个类不但包含了本身的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，我们可以将这段代码分离为两个新的类。

4461 0

BEM 简介

BEM 是一种前端项目开发的方法学，由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。...块中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于块是独立的，可以在应用开发中进行复用，从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置，也可以互相嵌套。...同一个块可以在页面上存在多个实例。块的不同实例具有相似的结构。一个典型的块的示例是菜单。一个项目中可以有多个不同的菜单，具体相似的结构和样式。块的名称应该是全局唯一的。...一个页面可以元素元素是块中的组成部分。元素不能离开块来使用。在菜单块中，每个菜单项是块中的元素。修饰符修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。...当菜单块出现在页面上的不同位置时，可以有不同的样式。菜单块中的菜单项可以有选中或非选中的状态。

8024 0

CSS — BEM 命名规范

前言：最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论...- 中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。...如： .sub-block__element {} .sub-block--modifier {} 1.2 BEM 命名法的好处 BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义

2.7K3 1

CSS @scope 如何取代 BEM

即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分，从而进一步提高了 BEM 的性能。这将使样式表更易于维护，同时对 CSS 级联进行更严格的控制。...block 是一个包含 HTML 元素。...，所以：块为 sample-page 元素是 first-section 修饰词是 first-line BEM 的扩展性很好，尤其是在使用 SASS 将样式分组并使用 & 操作符创建类似内容时：...可以使用 @scope 替换 BEM 样式，使样式定义更小、更易于管理。...通过使用@scope，可以通过紧密限定元素范围来控制层叠的副作用。文件 no_scope.html 的样式和一些元素定义如下： <!

1141 0

【编码规范】Airbnb CSS u002F Sass 编码风格指南

选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。.... */ } 属性最后，属性决定了规则声明里被选择的元素将得到何种样式。属性以键值对形式存在，一个规则声明可以包含一或多个属性定义。...BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。....listing-card__title 是一个元素（element），它属于 .listing-card 的一部分，因此块是由元素组成的。...虽然 mixin 可以不接收参数，但要注意，假如你不压缩负载（比如通过 gzip），这样会导致最终的样式包含不必要的代码重复。

2.4K2 0

如何写出一套可维护的CSS库？

todolist作为一个模块，包含了title，image，article等组件，同时还可以加上如.todolist-background-danger等修饰类，在模块内可以使用其名称做前缀任意组织模块结构...BEMCSS BEM 分别代表着：Block（块）、Element（元素/子块/组成部分）、Modifier（修饰符），是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。...[Block 块]__[Element 元素]_[Modifier 修饰符] 不同的命名模式，区别在于BEM之间的连接符号不同，依个人而定： ....同类型的块，在显示上可能会有一定的差异，所以不要定义过多的外观显示样式，主要负责结构的呈现。这样就能确保块在不同地方复用和嵌套时，增加其扩展性。综上所述，最终我们可以把BEM规则最终定义成： ....情景 search 组件中包含 input 和 button，是列表中的一个子元素。

7123 0

使用BEM命名规范来组织CSS代码

BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长...）如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block）属于块的某部分，可作为一个元素（Element）用于修饰块或元素，体现出外形行为状态等特征的...，可作为一个修饰器（Modifier）在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器或元素和修饰器的间隔，以中划线 - 来作为块|元素|修饰器名称中多个单词的间隔...，如果非常有必要，可以嵌套写样式 */ .search-form { .my-img { &__logo {} } } /* 但一般来说，不建议，因为这破坏了块的独立性。...可转换成设置对应的元素来表现，如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰，但有时候会产生代码冗余

9816 1

面试官：了解 CSS 的 BEM规范？

什么是块在规范中，块表示一个组件的意思，这样看上去有点抽象，我们可以通过例子来学习，假设你要写一个按钮的组件。...于是就引申出了BEM的modifier。什么是修饰符修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。...元素是块的子节点。...为了表明某个东西是一个元素，你需要在块名后添加 __element。所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。...元素有两个优点：你可以让 CSS 的优先级保持相对扁平。

5502 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云