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

如何根据BEM命名子元素?

BEM(Block Element Modifier)是一种前端开发中常用的命名规范,用于标识和组织HTML和CSS代码。根据BEM命名子元素的方法如下:

  1. 块(Block):块是一个独立的、可重复使用的组件或模块,它代表一个整体的概念。块的命名应该使用单词或短语,并使用连字符(-)作为分隔符。例如,一个导航栏可以被命名为"nav"。
  2. 元素(Element):元素是块的组成部分,它们不能独立存在,只能作为块的一部分存在。元素的命名应该使用块名作为前缀,然后使用两个下划线(__)作为分隔符,再加上元素的名称。例如,导航栏中的链接可以被命名为"nav__link"。
  3. 修饰符(Modifier):修饰符用于修改块或元素的外观、状态或行为。修饰符的命名应该使用块或元素的名称作为前缀,然后使用一个连字符(-)作为分隔符,再加上修饰符的名称。例如,一个被选中的导航链接可以被命名为"nav__link--selected"。

根据BEM命名子元素的优势是:

  1. 可读性强:BEM命名规范清晰明了,易于理解和阅读代码,减少了团队成员之间的沟通成本。
  2. 可维护性高:BEM命名规范使得代码结构清晰,模块化,易于维护和扩展。
  3. 低耦合性:BEM命名规范鼓励开发者将样式和功能封装在块和元素中,减少了样式之间的耦合,提高了代码的可重用性。
  4. 高复用性:BEM命名规范使得块和元素可以在不同的上下文中重复使用,提高了代码的复用性。

BEM命名子元素的应用场景包括但不限于:

  1. 复杂的UI组件:BEM命名规范适用于构建复杂的UI组件,如导航栏、表单、卡片等。
  2. 多人协作开发:BEM命名规范使得团队成员之间的代码协作更加高效,减少了命名冲突和代码冲突的可能性。
  3. 可扩展的项目:BEM命名规范使得项目的代码结构清晰,易于扩展和维护,适用于长期发展和迭代的项目。

腾讯云相关产品和产品介绍链接地址:

  1. 腾讯云云服务器(CVM):提供弹性计算能力,满足各种业务场景的需求。详情请参考:https://cloud.tencent.com/product/cvm
  2. 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于图片、视频、音频等多媒体资源的存储。详情请参考:https://cloud.tencent.com/product/cos
  3. 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。详情请参考:https://cloud.tencent.com/product/ai

请注意,以上仅为腾讯云的部分产品示例,其他云计算品牌商也提供类似的产品和服务。

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

相关·内容

编写高质量可维护的代码:优雅命名

如何才能更好,更优雅的去解决这些命名问题呢?在这之前,先随我看一些不合适的命名示例吧。...下面根据不同的使用场景,也简单给大家介绍一些经常推荐使用的命名规范。...规范 BEM 是一种命名 CSS 样式的命名方法和规范,全称 Block(块)、 Element(元素)、Modifier(修饰符) ,想必很多人都比较熟悉了。...menu 等 Element:组成 Block 的一部分,没有具体的实际意义,一般也不独立使用,例如 menu item,list item,header title 等 Modifier:一般是块或者元素的修饰状态或者行为...命名规范可以让样式的命名更加模块化,组件之间结构独立,减少了命名之间的冲突,有着不错的易读性、维护性等等,但可能会让项目中的样式特别的长。

45820

CSS @scope 如何取代 BEM

在这篇文章中,我们将展示如何在 Chrome 中使用 @scope 特性,以及如何使用它来替换前端项目中的 BEM。我们通过几个例子进行讲解,你可以在 GitHub 上的示例项目中查看并跟随操作。...考虑到一个大型 HTML 页面有许多具有不同样式的元素。在设置了几个初始样式名称后,随着页面的扩展,要保持样式就会变得很困难。BEM 试图通过围绕实际样式来构建样式名来缓解这一问题。...最终注意到它是如何使样式更简洁、更易读的。 @scope 与 BEM 相比的其他优势 除了将 BEM 重构为 @scope 的优势外,使用 @scope 还可以更好地控制 CSS 级联。...CSS 级联是一种算法,它定义了网络浏览器如何处理组成 HTML 页面上元素的样式条件。 在处理任何前端项目时,开发者可能需要处理由于样式层叠而产生的奇怪结果。...这是 CSS 级联的副作用,因为页面样式是根据外观顺序来解释的,因此 Third Level 被认为是黄色而不是红色。

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

    BEM 是 BlockElementModifier 的缩写 ,其中B 表示块(block)、E 表示元素(element)、M 表示修饰符(modifier)。 这三个部分通常使用__ 与--连接。...即: .块__元素--修饰符{} Block:代表了一个独立的块级元素,可以理解为功能组件块。...通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。...假设我们要实现这样的一个卡片功能: 根据上面的设计图,我们用 bem 方式来给对应 class 命名,如下所示: <img class="card__img...这有悖<em>BEM</em>命名规范,<em>BEM</em>的命名中只包含三个部分,<em>元素</em>名只占其中一部分,所以不能出现多个<em>元素</em>名的情况。这样的约定可以防止当层级很深命名过长的问题。

    79710

    编写模块化CSS——BEM

    你可能还会研究如何编写可维护的 CSS。 由于我们的行业很棒,我们有很多推荐的解决方案。因为专家们的纷纷加入,于是我们有 BEM,OOCSS,SMACSS,Atomic Design 等许多选择。...在这篇文章中,我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。...在 BEM 中,块被写为像 class 的名字一样,如下所示: ? BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性,而即使是最基本的元素也可能改变样式。...所以强烈推荐你尝试它:) 我们来看看 BEM 的第三个重要部分 —— 元素元素(Elements) 元素是块的子节点。为了表明某个东西是一个元素,你需要在块名后添加 __element。...他们是: 只把子子元素链接到有意义的块 创建新的块来保存元素 链接孙元素到块 虽然 BEM 建议你将 BEM 元素写作 .block__element ,但它不会规定你的 HTML 应如何

    2.1K70

    CSS规范--BEM入门

    通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。... 光从上面的代码来看,我们根本不明白.media和.alpha两个class彼此之间是如何相互关联的?... 在这个例子里,我们也许仅仅只需要另一个class,可以叫它.headline;它的样式取决于它是如何被层叠的,因为它在.content的内部;或者它只是恰巧在.content...首先,有悖BEM命名规范,BEM的命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况,所以上述每一页的按钮名可以改成:page-btn__btn。...关于BEM修饰器 BEM修饰器代表着元素的状态,但有时候元素的状态需要js来控制,此时遵循规范没有任何好处,比如激活状态,BEM推荐的写法是: .block__element { display

    1.2K20

    CSS — BEM 命名规范

    前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论...- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线:双下划线用来连接块和块的子元素 _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...于是,通过查看 HTML 代码中的 class 属性,就能知道元素之间的关联。...2 如何使用 BEM 命名法 2.1 什么时候应该用 BEM 格式 使用 BEM 的诀窍是,你要知道什么时候哪些东西是应该写成 BEM 格式的。 并不是每个地方都应该使用 BEM 命名方式。

    2.7K31

    浅谈 Css 规范

    BEM(Block-Element-Modifier)是一种 CSS 模块化方法,旨在简化 CSS 编写并提高代码的可读性和可维护性,它将 HTML 元素划分为三个部分: 块(block)、元素(element...块(block)是 BEM 的核心部分,它定义了一个 HTML 元素的基本结构和行为。块可以使用大写字母命名,例如 .Header、.Main、.Footer 等。...可读性和可维护性: BEM 使用简洁明了的命名约定,使得 CSS 代码易于理解和维护。 增强可扩展性: BEM 的结构使得页面元素易于扩展和修改,不会影响其他部分的样式。...避免样式冲突: BEM 的命名约定避免了样式冲突,每个块和元素都有独立的命名空间,不会受到外部样式的影响。 缺点: 命名冗长: BEM 的命名规范较为严格,可能导致类名过长,增加了代码量和阅读难度。...学习成本: 如果您正在使用 OOCSS 而您的同事不熟悉它,这将需要他们在继续之前学习如何使用它,这需要时间。

    9410

    关于BEM的反思

    反思BEM 在“学习爱BEM”中,我要表明我对BEM语法的新感受。 我很高兴地报告说,经过2年以上,我仍然对我的选择感到满意。 当我们在项目中选择代码风格时,我们使用BEM和ITCSS的组合。...怎么处理孙子元素 第一个是“孙子”的概念,它不是“标准BEM”的一部分(如果有这样的话): .component /* Component */ .component...__element /* Child */ .component__element__element /* Grandchild */ 如果子元素在下面HTML中还有子元素怎么办...在我看来更好的是只给你的孙子元素们一个双重的下划线符号加上用不同的名字。 如果你发现你的结构太深,你可能需要定义一个新的组件。 缩短修饰符长度 在BEM中,修饰符类用两个连接符表示。...结论 我认为:我们不需要用很多不必要的条件来是使BEM变的更复杂,这样会使情况变得更糟糕 每个人都有自己的编码风格,这根据你的工作不同而变化,很多BEM / ITCSS规范没有意义。

    62320

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

    BEM即块(Block)、元素(Element)、修饰符(modifier),是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。...BEM命名约定更加严格,而且包含更多的信息,一般用于团队开发一个耗时的大项目中。...通过直观地阅读class属性,我们就能明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者元素,还有一些是组件其他形态或者是修饰符。我们通过下面的示例来进一步说明: <!...使用BEM我们可以获得更多的描述和更加清晰的结构,并且通过命名我们就可以知道元素之间的关联。代码如下: <!...BEM看上去有些怪怪的,但是它的好处远远超过外观上的瑕疵BEM有可能导致输入更长的文本,但是大部分编辑器都有代码自动补全的功能,而且gzip压缩将会让我们消除对文件体积的担忧 更多干货笔记关注微信公众号

    99210

    开发姿势篇——基础开发

    开发过程中,我们会写无数个块级元素,那么其实每个块级元素都相当于是一个盒模型,而一张完整的页面,正是由多个盒模型组合在一起组成的。如此来讲,我们的页面布局便是重中之重:我们应该如何合理的布局呢?...根据设计,砌墙、装修、水管电线等等都要一步步的来啊,任重而道远。  在小册中,凹凸实验室此处概述重点讲解了前端另一大能力——切图。我不再作出相关介绍,关于切图姿势、如何高效切图等,都可以查找相关介绍。...那么在我们的css代码中,如何使用BEM呢?...BEM 的意思就模块(Block)、元素(Element)、修饰符(Modifier),使用这种命名方式可以让 CSS 的类名变得有实际意义且能自我解释,具有更高的开发友好性。...根据小册提议,兼容下问题解决流程步骤如下: 确认触发的场景:什么浏览器,什么版本,什么情况下触发的问题,做到稳定复现。 找出问题原因:是什么问题导致的,具体表现如何

    1.1K20

    这些 CSS 命名规范将省下你大把调试时间(文末有福利)

    根据上述解释,那么这个组件的理想类名称即是 stick-man。 组件的样式应写成这样: .stick-man { } 在这里我们使用了连字符分隔法,很好!...E 代表元素(Elements) BEM 中的 E 代表着元素。 整体的区块设计往往并不是孤立的。 比方说,这个火柴人有一个头部(head),两只漂亮的手臂(arms)和双脚(feet)。...如果使用 BEM 命名规范的话,这些元素的类名都可以通过在两条下划线后加上元素名称来产生。...如果使用 BEM 的话,这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。...根据定义,data 属性(data attributes)是用来储存自定义数据(to store custom data) 的。 这里数据属性(data attributes)用得很妙。

    927100

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

    BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长...) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的...,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为块和元素的间隔,以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔,以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔...} /* 错误:使用了标签 */ button.search-form__button {} .search-form button {} 而在SASS文件中,也需要注意嵌套层次的意义,尽量按照 BEM...可转换成设置对应的 元素来表现,如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰,但有时候会产生代码冗余

    98161

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

    选择器可以匹配 HTML 元素,也可以匹配一个元素的类名、ID, 或者元素拥有的属性。...如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时,每个选择器独占一行。...BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。....listing-card__title 是一个元素(element),它属于 .listing-card 的一部分,因此块是由元素组成的。...想要了解关于这个主题的更多内容,参见 CSS Wizardry 的文章,文章中有关于如何处理优先级的内容。 JavaScript 钩子 避免在 CSS 和 JavaScript 中绑定相同的类。

    2.4K20

    CSS Modules入门教程

    显示顺序为: /* mix.css */ /* a.css */ .text { color: red; } /* b.css */ .text { color: blue; } 根据...7个选择器,总结起来会有以下问题: 根据CSS选择器的解析规则可以知道,层级越深,比较的次数也就越多。...BEM(Block-Element-Modifier) 如何看待 CSS 中 BEM 的命名方式?...BEM解决了模块复用、全局命名冲突等问题,配合预处理CSS使用时,也能得到一定程度的扩展,但是它依然有它的问题: 对于嵌套过深的层次在命名上会给需要语义化体现的元素造成很大的困难 对于多人协作上,需要统一命名规范...总结 至此,所有的CSS Modules用法就已经介绍完毕了,至于后续的还有如何应用于React、Vue以及Angular中,相信掌握了上面的内容之后就可以知道怎么写了,如何与预处理器一起使用相信问题也不大

    2.6K40

    Web前端进阶之路: 提升代码质量篇

    如何写出易于维护的代码? 在我看来,易于维护的代码: 有统一的代码风格(Code Style)。 合理的代码设计。 易于管理的项目版本号。 清晰明了的提交信息。...CSS 1 CSS的类名用BEM命名法 BEM 是由Yandex公司推出的一套CSS命名规范。...BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Element)和修饰符(Modifier)。 CSS 的样式应用是全局性的,没有作用域可言。...BEM 通过元素的命名遵循遵循 block-name__element-name–-modifier-name 来保证命名的唯一性。因此,BEM 能够帮助你在前端开发中实现可复用的组件和代码共享。...2 语义化CSS的类名 根据模块的功能来命名,而不是根据样式来命名。如:给红色的提示文字起类名。类名可以叫 tip,不应该叫 color-red。

    1.7K20
    领券