首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我可以在BEM CSS中的修饰符中嵌套块或元素吗?

在BEM CSS中,修饰符(Modifier)是用来修改块(Block)或元素(Element)的外观或行为的。根据BEM的规范,修饰符不能嵌套块或元素。

BEM(Block Element Modifier)是一种命名约定,用于组织和管理CSS代码。它的核心思想是将页面分解为独立的块,每个块都有自己的元素和修饰符。块是页面上的独立功能单元,元素是块的组成部分,而修饰符则用于修改块或元素的外观或行为。

在BEM中,块和元素可以嵌套,但修饰符不能嵌套。这是因为修饰符的作用是对块或元素进行修改,而不是创建新的块或元素。通过将修饰符应用于块或元素,可以改变它们的外观或行为,而无需创建新的块或元素。

举个例子,假设我们有一个块叫做"button",它有一个元素叫做"icon",我们可以这样表示:

代码语言:txt
复制
<div class="button">
  Button
  <span class="button__icon"></span>
</div>

如果我们想要给按钮添加一个带有不同颜色的修饰符,可以这样表示:

代码语言:txt
复制
<div class="button button--blue">
  Button
  <span class="button__icon"></span>
</div>

在上面的例子中,".button--blue"是一个修饰符,它修改了按钮的外观。

总结起来,根据BEM的规范,修饰符不能嵌套块或元素。它们用于修改块或元素的外观或行为。如果需要创建新的块或元素,应该使用不同的类名来表示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

怎样才能写出更好的 CSS

让我们开门见山:编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行,但是 CSS 还是算了吧。 在我创建应用的时候,从来都无法从 CSS 中享受到乐趣。...BEM 是一种命名约定,是英文 Block Element Modifier(块元素修饰符)的缩写。 这种方法可以使我们的代码结构化,并提高模块化和可重用性。现在让我们说一说什么是块、元素和修饰符。...这些我们称之为修饰符。它们是块或元素上的标志,它们用于改变行为,外观等等。...命名:块名称或元素名称+ -- +修饰符名称:.block__element--修饰符,.块--修饰符 示例:.post--important,.post__btn--disabled 注意事项 在使用...是的,你的 HTML 文件会超负荷,但是不用担心,与 BEM 带来的好处相比,这只是个小小的缺点。 示例 以下是一个练习。你可以去你最喜欢或最常用的网站,然后想想看哪些是块、元素和修饰符。

1.7K10
  • 如何更优雅的编写CSS代码

    BEM 帮助我们解决该问题。BEM 是一种命名约定,表示“块 元素 修饰符”。 该方案可以使我们的代码更加结构化,更加模块化和更大的可复用性。现在我来解释下什么是块、元素和修饰符。...这些就是所谓的修饰符。它们是块或元素的标识,用于更改行为、外观等。...命名: 块元素名称或元素名称+ -- +修饰符名称: .Block__element-modifier,.Block-modifier。...块/元素可以嵌套到其它块/元素中,但它们必须是完全独立的。记住这个词:独立。所以,不要在按钮元素上写margin,因为你想要把按钮放在标题元素下,否则你的按钮将会和标题元素强耦合。...你浏览那些你常逛的网址,试着分析哪些是块,哪些是元素,那些是修饰符。 例如,我在谷歌商店中分析到的是这样的: ? 轮到你了,保持好奇心,想想怎样可以变得更好。和往常一样,你必须自己搜索,实验,创造。

    1.9K10

    从element-ui源码来看BEM实现

    BEM代表“块(block),元素(element),修饰符(modifier)”,开发组件的过程中经常使用这三个实体,而在选择器中,这三个实体由以下符号来表示扩展关系: - 中划线:仅作为连字符使用...我在element组件库中的mixins.scss文件中找到了想要的答案。 接下来我要讲的就是如何利用sass,编写具有可读性和可维护性的BEM规则的css代码。...#{$B} { @content; } } 为了方便大家理解代码,我现在开头贴上配置文件中定义的变量,而这时就能很清楚的看到block的生成就是基于BEM规范中,块是设计或布局的一部分,具有唯一地意义...,我们应该把关注点放在if和eles分支上,为什么会出现hitAllSpecialNestRule函数判断的分支,原因是在修饰符或者其他mixin中嵌套一个元素element,会出现修饰符在前,而元素在后的编译结果...利用刚刚介绍的函数,以及块、元素、修饰符的实现代码,在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。

    1.9K30

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

    BEMCSS BEM 分别代表着:Block(块)、Element(元素/子块/组成部分)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。...由于块是独立的,可以在应用开发中进行复用,从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置,也可以互相嵌套。...同类型的块,在显示上可能会有一定的差异,所以不要定义过多的外观显示样式,主要负责结构的呈现。这样就能确保块在不同地方复用和嵌套时,增加其扩展性。综上所述,最终我们可以把BEM规则最终定义成: ....Modifier(修饰符) 定义块和元素的外观、状态或类型。 例:color、disabled、size 规则 修饰符需能直观易懂表达出,其外观、状态或行为。修饰符用_连接块与元素。...如果仅仅为了好看,规避其优点,我认为得不偿失。个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长,但经过 GZIP 等压缩后,文件的体积其实并无太大影响。

    71630

    BEM 简介

    BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Element)和修饰符(Modifier)。...感兴趣的可以其他解决代码样式冲突的方案:【译】CSS 模块。 基本概念 块 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。...块中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于块是独立的,可以在应用开发中进行复用,从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置,也可以互相嵌套。...一个页面可以 元素 元素是块中的组成部分。元素不能离开块来使用。在菜单块中,每个菜单项是块中的元素。 修饰符 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。...当菜单块出现在页面上的不同位置时,可以有不同的样式。菜单块中的菜单项可以有选中或非选中的状态。

    80940

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

    BEM 是 BlockElementModifier 的缩写 ,其中B 表示块(block)、E 表示元素(element)、M 表示修饰符(modifier)。 这三个部分通常使用__ 与--连接。...即: .块__元素--修饰符{} Block:代表了一个独立的块级元素,可以理解为功能组件块。...通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。...这有悖BEM命名规范,BEM的命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...,上面在 less 或 sass 中可以改成如下结构: .card{ // 省略...

    81410

    React 设计模式 0x4:样式

    在 React 中有不同的方法来实现这一点。 # 样式化类型 在 React 和网站或 Web 应用程序中,有不同的样式化应用程序的方式。...# 外部/引用 CSS 外部 CSS 是网站或 Web 应用程序样式化的一种方式,它在文件中编写所有样式,并在应用程序或组件内引用它。...# BEM BEM 是一种命名约定,它可以帮助您更好地组织样式。BEM 代表块(block)、元素(element)和修饰符(modifier),它们可以组合在一起,用于将大型界面拆分为独立的块。...块(block): 用于描述,通常由类表示 在第一眼看上去就告诉我们该类表示什么 块(block)有以下规则 块可以嵌套 可以有任意数量的嵌套级别..."> 修饰符(modifier) 用于描述块或元素的外观、状态或行为 修饰符与块或元素之间使用双中划线 -- 或 单下划线 _ 连接 <div className="form

    1.3K20

    浅谈 Css 规范

    块(block)是 BEM 的核心部分,它定义了一个 HTML 元素的基本结构和行为。块可以使用大写字母命名,例如 .Header、.Main、.Footer 等。...元素(element)是块的一个组成部分,它定义了块中特定内容的样式。元素可以使用小写字母命名,例如 .header、.main、.footer等。...修饰符(modifier)是针对块或元素的特定状态或行为进行配置的方法。...修饰符可以使用中划线(_)或破折号(-)进行命名,例如 .header--large、.main--centered、.footer--light 等。 命名规则 使用大写字母命名块。...使用小写字母命名元素和修饰符。 修饰符必须紧跟着元素或块。 修饰符可以使用中划线(_)或破折号(-)进行命名。

    10810

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

    举个例子: .listing { font-size: 18px; line-height: 1.2; } 选择器 在规则声明中,“选择器” 负责选取 DOM 树中的元素,这些元素将被定义的属性所修饰...如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时,每个选择器独占一行。...OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用....listing-card--featured 是一个修饰符(modifier),表示这个块与 .listing-card 有着不同的状态或者变化。...ID 选择器 在 CSS 中,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级,而且 ID 选择器是不可重用的。

    2.4K20

    CSS — BEM 命名规范

    前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论...- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线:双下划线用来连接块和块的子元素 _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...当你选择了这种局部作用域的写法时,在较小的组件中,BEM 格式可能显得没那么重要。但对于公共的、全局性的模块样式定义,还是推荐使用 BEM 格式。...2.4 避免 .block__el1__el2 的格式 在深层次嵌套的 DOM 结构下,应避免过长的样式名称定义。

    2.9K31

    面试官:了解 CSS 的 BEM规范?

    我必须立即知道一个 class 放在这个伟大工程中的什么地方,以防止大脑过载。这样我就可以快速修改 style,而不必在整个工程里前后引用。...什么是块 在规范中,块表示一个组件的意思,这样看上去有点抽象,我们可以通过例子来学习,假设你要写一个按钮的组件。...但是在实际的项目使用中,我们会发现一个按钮可能是大按钮,可能是小按钮,也可能是红色的,或者黄色的。于是就引申出了BEM的modifier。 什么是修饰符 修饰符是改变某个块的外观的标志。...要使用修饰符,可以将 --modifier 添加到块中。假如我们要添加一个默认按钮,一个主要按钮,一个大按钮,一个小按钮,一个主要的小按钮。...元素有两个优点 : 你可以让 CSS 的优先级保持相对扁平。

    55320

    如何使用CSS命名规范提高您的编码效率

    可以将Prettier或Beautify等格式化工具集成到代码编辑器中,以自动处理代码格式化。 相关的样式:与相关元素相关的样式块应放置在样式表中。...BEM(块、元素、修饰符):BEM是一种流行的CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化的CSS样式方法,提供代码可重用性,并使大规模CSS的维护成为可能。...BEM是块(Block)、元素(Element)和修饰符(Modifier)的首字母缩写,它们代表以下原则: 块(Block):块是在开发过程中可能创建的独立组件。...修饰符附加在表示变体的块或元素名称后面。一个修饰符的示例是 --active ,用于表示元素/块的活动状态。...使用BEM,我们还可以在CSS中编写样式时表示一个元素是特定类的子元素。

    40730

    两种 CSS 方法论 「详细分析」

    BEM 将页面的类名分为块(Block)、元素(Element)、修饰符(Modifier)。...块(Block):一个块是视觉上或者语义上的一个整体,它是一个具体且唯一的一个元素,例如,页面上的一个弹窗,或者是一个搜索框; 元素(Element):一般认为是块的组成部分,元素比较用它父级的块名称做为前缀...通过上面的示例可以看出,块与元素是通过两个下划线(__)连接的,而元素和修饰符之间是通过两个短横线(--)连接的。...SUIT CSS 可以说在 BEM 的基础上进行了改进,特别是去除了双下划线的设计,在观感上就比 BEM 美观了许多,而且各种名称都是通过驼峰的方式命名,省略了部分短横线,这让 SUIT CSS 的类名的长度上也会比...模块规则在官方文档没有详细的命名风格,我看了很多文章,在命名模块的时候基本都是在参考 BEM,所以这里不再单独介绍。

    98210

    开发姿势篇——基础开发

    开发过程中,我们会写无数个块级元素,那么其实每个块级元素都相当于是一个盒模型,而一张完整的页面,正是由多个盒模型组合在一起组成的。如此来讲,我们的页面布局便是重中之重:我们应该如何合理的布局呢?...就此结束吗?醒醒,工头让我喊你搬砖。根据设计,砌墙、装修、水管电线等等都要一步步的来啊,任重而道远。  在小册中,凹凸实验室此处概述重点讲解了前端另一大能力——切图。...那么在我们的css代码中,如何使用BEM呢?...BEM 的意思就模块(Block)、元素(Element)、修饰符(Modifier),使用这种命名方式可以让 CSS 的类名变得有实际意义且能自我解释,具有更高的开发友好性。...Block - 模块,名字的单词之间用 `-` 符号连接 Element - 元素,模块中的子元素,用 `__` 符号连接 Modifier - 修饰符,表示父元素或子元素的其他形态,用 `--` 符号连接

    1.1K20

    CSS模块化:提升前端开发效率与可维护性的关键

    引言 在现代Web开发中,样式表的管理变得越来越复杂。为了应对这一挑战,CSS模块化成为了一种重要的开发方法。它有助于组织和维护样式,提高开发效率,并降低了样式冲突的风险。...CSS模块化的实现方式 3.1 BEM(块、元素、修饰符) BEM是一种常用的CSS命名约定,通过块(Block)、元素(Element)、修饰符(Modifier)的组合来命名样式,以确保样式的唯一性...3.2 CSS-in-JS CSS-in-JS是一种将CSS写入JavaScript文件中的方法,它将样式局部化,确保样式只适用于特定组件或模块。...3.3 CSS预处理器 使用CSS预处理器如Sass或Less可以将样式分割成模块,并使用变量和嵌套规则来提高可维护性。 4....4.3 模块化组织 将样式表分割为模块,每个模块只包含特定组件或元素的样式,以提高可维护性。 5.

    35040

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券