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

CSS中BEM中的命名约定嵌套块和元素

BEM(Block Element Modifier)是一种CSS命名约定,用于规范化和组织CSS代码。在BEM中,命名约定包括块(Block)、元素(Element)和修饰符(Modifier)三个部分。

  1. 块(Block):块是一个独立的、可重用的组件或模块,它代表一个完整的功能单元。块的命名应该使用小写字母和连字符(-),例如:.block
  2. 元素(Element):元素是块的组成部分,它们只在特定的块内部存在,并且不能独立使用。元素的命名应该使用双下划线()来表示其属于某个块,例如:`.blockelement`。
  3. 修饰符(Modifier):修饰符用于修改块或元素的外观、状态或行为。修饰符的命名应该使用单个连字符(-),例如:.block--modifier.block__element--modifier

BEM的命名约定有以下优势:

  • 可读性强:通过命名约定,可以清晰地了解到每个CSS类的作用和关系,提高代码的可读性。
  • 可维护性高:BEM的模块化结构使得CSS代码易于维护和扩展,减少了命名冲突和样式覆盖的问题。
  • 可重用性强:块和元素的独立性使得它们可以在不同的上下文中重复使用,提高了代码的可重用性。

BEM适用于各种规模的项目,特别适合大型项目和团队协作开发。它可以帮助开发人员更好地组织和管理CSS代码,提高开发效率和代码质量。

腾讯云相关产品中与CSS和前端开发相关的产品包括:

  • 腾讯云CDN(内容分发网络):提供全球加速、缓存加速、动态加速等功能,加速网站内容分发,提升用户访问速度。详情请参考:腾讯云CDN产品介绍
  • 腾讯云Web应用防火墙(WAF):提供Web应用安全防护,包括防护规则、漏洞扫描、访问控制等功能,保护网站免受各类网络攻击。详情请参考:腾讯云Web应用防火墙产品介绍

以上是关于CSS中BEM中的命名约定嵌套块和元素的完善且全面的答案。

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

相关·内容

CSSBEM 命名规范

前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem(block)、元素(element)、修饰符(modifier)简写,由 Yandex 团队提出一种前端 CSS 命名方法论...- 划线 :仅作为连字符使用,表示某个或者某个子元素多单词之间连接记号。...__ 双下划线:双下划线用来连接元素 _ 单下划线:单下划线用来描述一个或者元素一种状态 BEM 是一个简单又非常有用命名约定。...1.1 BEM 命名模式 BEM 命名约定模式是: .block {} .block__element {} .block--modifier {} 每一个(block)名应该有一个命名空间(...于是,通过查看 HTML 代码 class 属性,就能知道元素之间关联。

2.5K31

选择参照嵌套实体

在利用ObjectARX进行CAD二次开发时,如何选择参照嵌套实体,并进行进行下一步操作?这个问题难点是:如何判断用户选中实体到底是参照里面的非嵌套对象实体?...还是参照嵌套参照实体?本文利用全局函数acedNEnsSelP解决了这个问题,并可实现:如果用户选择参照嵌套实体,直接视为用户选择了这个嵌套参照,效果如图。...一、全局函数acedNEntSelP介绍 为了选中参照实体,ObjectARX提供了一个接口: int acedNEntSelP( const ACHAR * str, ads_name...ads_point ptres, int pickflag, ads_matrix xformres, struct resbuf ** refstkres ); const ACHAR * str:在选择参照实体时提示语...int pickflag:指定acedNEntSelP是否用于用户交互;如果为假,acedNEntSelP提示用户指定实体并忽略ptres;如果为真,使用ptres初始值去选择实体。

17430

Swift代码嵌套命名

Swift代码嵌套命名法 Swift支持与其他类型嵌套命名,尽管它还没有专用命名关键词。下面我们来看看,如何使用类型嵌套来优化我们代码结构。...这可能是因为我们在Objective-C & C,养成别无选择可怕命名习惯,被我们带到了Swift里。...我比较喜欢把父类型内容放在上面————同时还可以享受嵌套类型便利。 事实上,在Swift还有好几种其他方法可以实现命名嵌套类型。...使用extension实现嵌套类型 另一个实现嵌套类型选择就是extension。这种方法可以在实现调用时保持层级关系,同时清楚明白分开每种类型。...在原始代码里添加typealiases来实现类似嵌套类型代码(实际上并没用嵌套类型)。尽管这种方法在实现上并没有嵌套层级关系,但是却减少了冗长代码————并且调用看起来也使用嵌套类型一样。

1.7K31

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

易读性可理解性:遵循CSS命名约定使开发人员能够一目了然地识别样式目的、代码对应组件以及与其子元素、父元素兄弟元素关联形式。这减少了在代码库理解样式结构所花费时间。...BEM元素、修饰符):BEM是一种流行CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化CSS样式方法,提供代码可重用性,并使大规模CSS维护成为可能。...BEM(Block)、元素(Element)修饰符(Modifier)首字母缩写,它们代表以下原则: (Block):是在开发过程可能创建独立组件。...使用BEM,我们还可以在CSS编写样式时表示一个元素是特定类元素。...标准化命名前缀:采用统一命名约定(例如,BEM名称或原子CSS类)应该在整个项目中标准化,并保持一致性。

25030

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

BEMCSS BEM 分别代表着:Block()、Element(元素/子/组成部分)、Modifier(修饰符),是一种组件化 CSS 命名方法规范,由俄罗斯 Yandex 团队所提出。...[Block ]__[Element 元素]_[Modifier 修饰符] 不同命名模式,区别在于BEM之间连接符号不同,依个人而定: ....同类型,在显示上可能会有一定差异,所以不要定义过多外观显示样式,主要负责结构呈现。这样就能确保在不同地方复用嵌套时,增加其扩展性。综上所述,最终我们可以把BEM规则最终定义成: ....Element(元素) 是组成部分,对应元素/子节点。...情景 search 组件包含 input button,是列表一个子元素

68530

浅谈 Css 规范

元素(element)是一个组成部分,它定义了特定内容样式。元素可以使用小写字母命名,例如 .header、.main、.footer等。...使用小写字母命名元素修饰符。 修饰符必须紧跟着元素。 修饰符可以使用划线(_)或破折号(-)进行命名。...可读性可维护性: BEM 使用简洁明了命名约定,使得 CSS 代码易于理解维护。 增强可扩展性: BEM 结构使得页面元素易于扩展修改,不会影响其他部分样式。...避免样式冲突: BEM 命名约定避免了样式冲突,每个元素都有独立命名空间,不会受到外部样式影响。 缺点: 命名冗长: BEM 命名规范较为严格,可能导致类名过长,增加了代码量阅读难度。...样式层级深: 由于 BEM 嵌套结构,可能导致样式层级较深,增加了 CSS 优先级复杂度。 维护成本: 对于初学者来说,需要一定时间来适应和理解 BEM 命名规范,可能增加学习维护成本。

5910

HTML内联元素元素

元素 元素(block element)生成一个元素框,(默认地)它会填充其父级元素内容,旁边不能有其他元素,它在元素框之前之后生成了“分隔”符。...元素总是在新行上开始并占据一整行,宽度高度以及外边距内边距都可以控制,宽度始终与浏览器宽度一样,与内容无关。元素可以容纳内联元素其他元素。...内联元素元素转换 元素(block element)内联元素(inline element)都是html规范概念。在加入了CSS控制以后,可以改变元素内联元素之间差异。...CSS还有一个dipslay:inline-block,显示为内联元素,表现为同行显示并可修改宽高内外边距等属性。...内联元素元素列表 3.1 元素列表 TypeNoteaddress定义地址caption定义表格标题dd定义列表定义条目div定义文档分区或节dl定义列表dt定义列表项目fieldset

2.7K30

「前端工程四部曲」模块化前世今生(下)

BEM BEM 是一种非常有用、强大且简单命名约定,可以说是一个CSS命名规范,也可以说是一种思想。它使前端代码更易于阅读理解、更易于使用、更易于扩展、更健壮明确,并且更加严格。...BEM意思就是(block)、元素(element)、修饰符(modifier),是由 Yandex 团队提出一种前端命名方法论。...这种巧妙命名方法让你CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多信息,它们用于一个团队开发一个耗时大项目。...而 BEM 就不一样了,虽然看上去很丑,但我们能清晰地看到有个叫 .site-search ,它内部是 .site-search__field site-search__button 两个元素。...「优点:」 BEM 优点在于所产生 CSS 类名都只使用一个类别选择器,可以避免传统做法由于多个类别选择器嵌套带来复杂属性级联问题。

68520

CSS伪类元素

定义 伪类 CSS 伪类 是添加到选择器关键字,指定要选择元素特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮颜色。...伪元素元素是一个附加至选择器末关键词,允许你对被选择元素特定部分修改样式。 下例 ::first-line 伪元素可改变段落首行文字样式。 /* 每一个 元素第一行。...这个时候,被修饰 元素依然处于文档树。... p:first-letter { font-size: 5em; } 从上述例子可以看出,伪类操作对象是文档树已有的元素,而伪元素则创建了一个文档数外元素。...总结 1.伪类本质上是为了弥补常规CSS选择器不足,以便获取到更多信息; 2.伪元素本质上是创建了一个有内容虚拟容器; 3.CSS3伪类元素语法不同; 4.可以同时使用多个伪类,而只能同时使用一个伪元素

2.7K10

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

如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS BEM)。 不要使用 ID 选择器。 在一个规则声明应用了多个选择器时,每个选择器独占一行。...”,是一种用于 HTML CSS 类名命名约定。....listing-card__title 是一个元素(element),它属于 .listing-card 一部分,因此是由元素组成。...想要了解关于这个主题更多内容,参见 CSS Wizardry 文章,文章中有关于如何处理优先级内容。 JavaScript 钩子 避免在 CSS JavaScript 绑定相同类。...CSS @include 声明按照以下逻辑排序(参见下文) 属性声明排序 属性声明 首先列出除去 @include 嵌套选择器之外所有属性声明。

2.4K20

React 设计模式 0x4:样式

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

1.3K20

如何更优雅编写CSS代码

使用嵌套可以使你花费更少时间来编写复杂css选择器。 分块导入 当涉及到可维护性可读性上时,不可能将所有的代码都保存在一个大文件。...非也,scss足够聪明,当你以这种方式进行命名时,它可以知道你想指代是分块文件。 这就是我们需要知道关于变量、嵌套、分块导入所有的新星。...BEM 帮助我们解决该问题。BEM 是一种命名约定,表示“ 元素 修饰符”。 该方案可以使我们代码更加结构化,更加模块化更大可复用性。现在我来解释下什么是元素修饰符。...这些都是有命名意义命名名称:.block 示例: .card, .form, .post,.user-Navigation。 元素 现在你要怎样用你乐高积木来建造一个窗户呢?.../元素可以嵌套到其它/元素,但它们必须是完全独立。记住这个词:独立。所以,不要在按钮元素上写margin,因为你想要把按钮放在标题元素下,否则你按钮将会标题元素强耦合。

1.9K10

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.2 统一命名规范 建立命名规范并在整个项目中保持一致,以确保团队成员理解并遵循规则。 4.3 模块化组织 将样式表分割为模块,每个模块只包含特定组件或元素样式,以提高可维护性。 5.

22140

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

BEM 是 Block() Element(元素) Modifier(修饰器)简称 使用BEM规范来命名CSS,组织HTML中选择器结构,利于CSS代码维护,使得代码结构更清晰(弊端主要是名字会稍长...) 如何使用BEM 一个独立(语义上或视觉上),可以复用而不依赖其它组件部分,可作为一个(Block) 属于某部分,可作为一个元素(Element) 用于修饰元素,体现出外形行为状态等特征...,可作为一个修饰器(Modifier) 在本规范,以双下划线 __ 来作为元素间隔,以单下划线 _ 来作为修饰器 或 元素修饰器 间隔,以划线 - 来作为 |元素|修饰器 名称多个单词间隔...仅以类名作为选择器,不使用ID或标签名来约束选择器,且CSS(或者SCSS编译后CSS选择器嵌套不超过2层,增加效率复用性,减少选择器之间耦合度 比较常见嵌套情景:需要通过块状态对内部元素进行调整时...也需要注意嵌套层次意义,尽量按照 BEM三层来 /* 避免这样做 .search 不是一个独立 */ .search { /* 应该把这个提取出来 */ &-form {

95561

怎样才能写出更好 CSS

你可以利用嵌套在更短时间内写出复杂选择器。 分块与导入 从可维护性可读性角度来说,你无法将所有代码都保存在一个大文件。...如果你使用这种命名方式,聪明 SCSS 知道你指的是分块文件。 关于变量、嵌套、分块导入,我们需要了解就这么多。...BEM 是一种命名约定,是英文 Block Element Modifier(元素修饰符)缩写。 这种方法可以使我们代码结构化,并提高模块化可重用性。现在让我们说一说什么是元素修饰符。...元素可以嵌入其他元素,但是它们必须是完全独立。请记住:独立。所以如果你想将把一个按钮放在标题下的话,就不要在按钮上加边距,否则按钮就会与标题绑定。请改用工具类。...是的,你 HTML 文件会超负荷,但是不用担心,与 BEM 带来好处相比,这只是个小小缺点。 示例 以下是一个练习。你可以去你最喜欢或最常用网站,然后想想看哪些是元素修饰符。

1.7K10

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

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

91110

post-csslesssass样式嵌套与命令之&符号—BEM

li,ul + p,ul + a,ul + ul,ul + li,li + p,li + a,li + ul,li + li {  border-top: 0;}BEM 命名规范如下:/* 即是通常所说...每个在逻辑上功能上都是相互独立。 */.block {}/* 元素组成部分。元素不能离开来使用。BEM 不推荐在元素嵌套其他元素。 ...*/.block__element {}/* 修饰符用来定义元素外观行为。...同样在应用不同修饰符之后,会有不同外观 */.block--modifier {}通过 bem 命名方式,可以让我们 css 代码层次结构清晰,通过严格命名也可以解决命名冲突问题,但也不能完全避免...(&) https://blog.csdn.net/lee_magnum/article/details/12950407转载本站文章《post-css/less/sass样式嵌套与命令之"&"符号—BEM

32220
领券