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

在使用BEM (块、元素、修饰符)命名约定时,是否必须将类名应用于HTML中的每个元素?

在使用BEM (块、元素、修饰符)命名约定时,不必将类名应用于HTML中的每个元素。BEM是一种命名约定,旨在提高代码的可维护性和可扩展性。它将页面分解为块(blocks)、元素(elements)和修饰符(modifiers)三个层次。

块是页面上的独立可重用的组件,它们具有明确定义的功能。块的类名应该以一个单词作为前缀,例如"header"或"sidebar"。

元素是块的组成部分,它们不能独立存在,并且只在特定的块内部使用。元素的类名应该以块的类名作为前缀,用两个下划线连接,例如"header__logo"。

修饰符是用于修改块或元素外观或行为的标志。修饰符的类名应该以块或元素的类名作为前缀,用一个连字符连接,例如"header--dark"或"button__text--bold"。

在使用BEM命名约定时,只有块是必须在HTML中应用类名的,因为块是独立的组件。元素和修饰符可以根据需要选择性地应用类名。这样做的好处是可以更好地组织和管理代码,减少命名冲突,并且使样式的重用更加灵活。

对于BEM命名约定的应用场景,它适用于任何需要构建可重用组件的项目,特别是大型项目或团队合作的项目。通过使用BEM,开发人员可以更容易地理解和维护代码,减少样式冲突和错误,并提高开发效率。

腾讯云相关产品中,与前端开发和命名约定相关的产品包括云服务器(ECS)、云存储(COS)和内容分发网络(CDN)。这些产品可以帮助开发人员部署和托管前端应用程序,并提供高可用性和快速访问的服务。具体产品介绍和链接地址可以参考腾讯云官方文档。

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

相关·内容

浅谈 Css 规范

块(block)是 BEM 的核心部分,它定义了一个 HTML 元素的基本结构和行为。块可以使用大写字母命名,例如 .Header、.Main、.Footer 等。...元素(element)是块的一个组成部分,它定义了块中特定内容的样式。元素可以使用小写字母命名,例如 .header、.main、.footer等。...修饰符可以使用中划线(_)或破折号(-)进行命名,例如 .header--large、.main--centered、.footer--light 等。 命名规则 使用大写字母命名块。...使用小写字母命名元素和修饰符。 修饰符必须紧跟着元素或块。 修饰符可以使用中划线(_)或破折号(-)进行命名。...避免样式冲突: BEM 的命名约定避免了样式冲突,每个块和元素都有独立的命名空间,不会受到外部样式的影响。 缺点: 命名冗长: BEM 的命名规范较为严格,可能导致类名过长,增加了代码量和阅读难度。

10810

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

BEM 将页面的类名分为块(Block)、元素(Element)、修饰符(Modifier)。...命名规则:[命名空间>-]名>[-后代名][--修饰符],这样的命名方式,在编写 HTML 和 CSS 的时候有几个好处: 有助于区分组件的根元素,后代元素,以及用来修饰的类; 降级类名重复的几率...: #409EFF; }复制代码 SUIT CSS 小结 SUIT CSS 除了定义了工具类、组件类的命名方式外,还提供了完整的基础类,以及测试套件用来检测你的 CSS 类名是否符合规范,具体使用方法可以查看官方文档...SMACSS 中允许在布局样式中,使用 ID 选择器,有助于在 HTML 中一眼区分出节点在布局中的位置。其他的非 ID 选择器的类,需要添加 l- 前缀,表示这属于布局样式。...状态规则 状态是用来描述模块在不同状态下的外观,使用 is- 前缀,这有助于我们在 HTML 中区分元素的状态。

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

    每个块名前应增加一个前缀,这前缀在 CSS 中有命名空间(如:m-、u-、分别代表:mod 模块、ui 元件)。每个块在逻辑上和功能上都相互独立。...[命名空间]-[组件名/块]__[元素名/元素]--[修饰符] 情景 需要构建一个 search 组件。...块的内部元素,都被认为是块的子元素。一个块中元素的类名必须用父级块的名称作为前缀,因此不能写成:block__elem1__elem2。...个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长,但经过 GZIP 等压缩后,文件的体积其实并无太大影响。...,通过在html代码中添加类名来添加属性,不必再去找相对应的选择器中的css代码来修改样式。

    71630

    编写模块化CSS——BEM

    我必须 立即知道一个组件是否使用了 JavaScript,所以如果我改变了它的 CSS,我不会意外地破坏任何组件。 在我的探索中,我发现 BEM 和 命名空间 符合我寻找的标准。...BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性,而即使是最基本的元素也可能改变样式。 按钮很好地阐释了可以包含不同样式的块。...如果设置了一个 .button 类的按钮,则可以在任何 元素上选择是否使用 .button 类。...修饰符(Modifier) 修饰符是改变某个块的外观的标志。要使用修饰符,可以将 --modifier 添加到块中。...在传统的 BEM 中,当你使用修饰符时,你应该 将块和修饰符添加 到 HTML 中,以便在新的 .button--secondary 中不重写 .button 样式。 ? ?

    2.1K70

    CSS规范--BEM入门

    BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。...BEM的命名中包含了模块名,长长的命名会让HTML标签会显得臃肿。...首先,有悖BEM命名规范,BEM的命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况,所以上述每一页的按钮名可以改成:page-btn__btn。...*/ } 这还仅仅只有两个组件而已,实际项目中,十几个或几十个组件,难道我们要每个组件都检查一下来“新组件名是否和以往组件的子元素命名冲突了”么?...如果我们用的是BEM,要覆盖样式很简单:找到要覆盖样式的元素,得知它的类名,在媒体查询中,用它的类名作为选择器,写下覆盖样式,样式就覆盖成功了,不需要担心前面样式的权重过大。

    1.2K20

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

    无论你是否意识到,在编码测试或技术面试中,你的命名习惯都会传达关于你开发实践的信息。它们可以用来评估你的行为和效率。因此,在本文中,我们将展示CSS命名的最佳实践,以提高代码质量。...遵循命名规范:在工作流程中采用CSS命名规范,以帮助创建结构化和描述性的类名。 分离结构和呈现:在组织CSS时,将与元素的布局和定位相关的样式与覆盖其呈现的其他样式(如颜色、字体、边框等)分开。...BEM(块、元素、修饰符):BEM是一种流行的CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化的CSS样式方法,提供代码可重用性,并使大规模CSS的维护成为可能。...BEM是块(Block)、元素(Element)和修饰符(Modifier)的首字母缩写,它们代表以下原则: 块(Block):块是在开发过程中可能创建的独立组件。...使用BEM,我们还可以在CSS中编写样式时表示一个元素是特定类的子元素。

    40730

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

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

    81410

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

    语义是指单词的含义和他们间的关系。在 HTML 编程中,意味着你需要使用一个合适的标签名字来标记。下面是一个经典的例子。 类可以在每一个有文章功能的页面中使用。 你可以像阅读一本书一样读 HTML 和 CSS。它会给你讲一个故事。通过故事你可以了解故事中的每一个角色和他们之间的关系。...BEM 代表块(block)、元素(element)和修饰符(modifier)。Yandex,在俄罗斯的相当于谷歌的搜索引擎,为了解决他们 CSS 代码库中的缩放问题而提出了它(它指BEM)。...元素(Elements)是块的子模块。修饰符(modifiers)代表不同的状态。...当单一功能原则应用于你的每一个 CSS 类选择器中时,这意味着每一个类选择器都有着唯一的功能。换句话说,要根据不同关注点将样式分离到不同的类选择器中。

    45710

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

    BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论。....block 块下的元素 ,最后的 .block--modifier 代表的是 .block 块的修饰符。...「优点:」 BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。...代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了,而且类名的层次关系可以与 DOM 节点的树型结构相对应。...AM 是一种使用 HTML 属性及其值而非样式元素的类的技术。这样每个属性都可以有效地声明一个单独的命名空间来封装样式信息,从而使 HTML 和 CSS 更具可读性和可维护性。

    73820

    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 代码层次结构清晰,通过严格的命名也可以解决命名冲突的问题,但也不能完全避免

    37520

    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 代码层次结构清晰,通过严格的命名也可以解决命名冲突的问题,但也不能完全避免

    46330

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

    什么是块 在规范中,块表示一个组件的意思,这样看上去有点抽象,我们可以通过例子来学习,假设你要写一个按钮的组件。...使用.button而不是用button的原因是因为类允许无限的可重用性,而即使是最基本的元素也可能改变样式。...但是在实际的项目使用中,我们会发现一个按钮可能是大按钮,可能是小按钮,也可能是红色的,或者黄色的。于是就引申出了BEM的modifier。 什么是修饰符 修饰符是改变某个块的外观的标志。...要使用修饰符,可以将 --modifier 添加到块中。假如我们要添加一个默认按钮,一个主要按钮,一个大按钮,一个小按钮,一个主要的小按钮。...为了表明某个东西是一个元素,你需要在块名后添加 __element。 所以,如果你看到一个像那样的名字,比如 form__row ,你将立即知道 .form 块中有一个 row 元素。

    55320

    【Web前端】理解调试和组织 CSS

    DOM 视图:显示当前页面的实时结构,你可以直接在这个视图中查看和修改 HTML 元素及其属性。这种方式可以直观地看到 CSS 如何应用于每个元素,并且实时预览更改效果。...(块、元素、修饰符) BEM(块级元素修饰符,Block Element Modifier)是一种 CSS 命名规范。...在 BEM 中,一个“块”指的是独立的组件,比如按钮、菜单或徽标。一个“元素”则是属于某个块的子组件,例如列表项或标题。修饰符用于标识块或元素的不同状态或变体,从而改变它们的样式或行为。...你可以通过 BEM 的命名规则识别代码,因为它在 CSS 类名中使用了双下划线和双连字符。...例如,以下是来自关于 BEM 命名约定页面的 HTML 示例类: /* BEM 示例 */ .button { background-color: blue; color: white; }

    6000

    CSS — BEM 命名规范

    前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论...- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线:双下划线用来连接块和块的子元素 _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...于是,通过查看 HTML 代码中的 class 属性,就能知道元素之间的关联。...button> div> 复制代码 这种写法从 DOM 结构和类命名上可以了解每个元素的意义,但无法明确其真实的层级关系。

    2.9K31

    React 设计模式 0x4:样式

    学习如何轻松构建可伸缩的 React 应用程序:样式 # 组件样式 在每个 Web 应用程序中,样式化非常重要,因为样式使其对用户非常有吸引力,并为用户提供良好的体验。...CSS 框架,Bootstrap 已经内置了样式和类,可以立即应用于您的应用程序。...# BEM BEM 是一种命名约定,它可以帮助您更好地组织样式。BEM 代表块(block)、元素(element)和修饰符(modifier),它们可以组合在一起,用于将大型界面拆分为独立的块。...元素(element) 用于描述块的一部分,通常由类表示 元素与块之间使用双下划线 __ 连接 修饰符(modifier) 用于描述块或元素的外观、状态或行为 修饰符与块或元素之间使用双中划线 -- 或 单下划线 _ 连接 <div className="form

    1.3K20

    CSS命名法BEM与scoped、module

    CSS挺容易造成样式污染的,每个模块或者页面之间,总有一些命名容易相同,解决也简单,用权重或者重写,只是这种场景有时候还是挺头疼。...module 这个没用过,也没有去弄个demo,大致意思就是可以自己定义编译的规则,把类名编译成只对当前组件有效的字符串,可以是hash字符,也可以是带组件名类名加hash字符串,最终就是得到唯一的类名...,BEM由块(Block)、元素(Element)、修饰符(Modifier)组成,块__元素--修饰符: B:block,对应模块名,如dialog E:element 对应模块中的节点,如button...module:通过类名,做到了绝对隔离,但又因为绝对隔离,修改样式或者复用又变得困难。 BEM:隔离和污染做的很好,但是名字太长长,命名困难,多人协作的情况下通过人为约定约束实现BEM太过困难。...在我看来,scoped > module > BEM,引用工具来约束和人为约束肯定是选择使用工具去约束,module和scoped对比,也只是工具对类名的不同处理。

    67920

    CSS架构之BEM设计模式

    其实在日常开发CSS当中,会遇到许多的问题,使用设计模式能够很好的解决。例如在日常开发项目,需要组件化时,组件内部的class样式类管理就非常的杂乱。...大部分公司的命名规则还是只有大小驼峰、使用英文等这些基础的命名规则。经常会自己都忘了自己命名的css是啥,使用设计模式就能很好的解决该问题。...CSS架构也能让html与css更好的解耦,能更好的抽取样式中可复用的部分,使你的html代码更具语义,也符合了HTML5中想让日常开发更具有语义化的理念。...了解这些设计模式无疑会使css代码更具模块化,块样式不依赖于页面上的其他元素,因此也较好的避免了遇到级联问题。多人协作的时候,也能高效避免命名重复问题。...BEM的简介BEM就是:B代表:Block(块),独立实体,独立的意义,每个页面都可以看做是多个Block组成,见下图1-1;E代表:Element(元素),block 的一部分,没有独立意义,是组件下的一个元素

    46720

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

    总的来说,这些 CSS 命名规范试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 CSS 类的名称可以看出它们之间的联系 不知你是否见过这样的类名...它们可视作子组件(child components),也就是父组件的组成部分。 如果使用 BEM 命名规范的话,这些元素的类名都可以通过在两条下划线后加上元素名称来产生。...如果使用 BEM 的话,这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。...这就是 BEM 的基本用法。 个人来说,我在小项目中一般只用连字符分割法来写类名,在用户界面更复杂的项目中使用 BEM 方法。 为何要使用命名规范?...为了防止这种情况发生,开发者们想了很多不同的策略。 1. 使用 js- 类名 一种减少这类 bug 的方法是使用 js- 的类名命名方法。

    929100

    大型项目中的结构化CSS

    Peergrade.io处理CSS的方式 规则1: 使用前缀 (class类名) 在Peergrade.io中我们在所有样式名中使用前缀 .pg。 在你的CSS代码中如果不使用前缀可能会带来些麻烦。...同样,可以在父元素内的子元素中独立定义样式 - 这并不会受到你在前一阶段Sass这层已经定义好的样式的影响。...规则3: 构建组件时用边界元法(BEM)命名 尽可能试着用BEM命名去创建独立的组件,我们不必完全按照BEM的规范 - 只是用命名组合,这意味着类名以如下的方式命名: .block__element--...类名命名方式。...这允许我们仅可以修改在特定块(block)级别的修饰符, 并且在子块中不能重复修饰符(可以理解为父子嵌套时不重名;“E”在BEM中即元素elements)。

    1.2K40

    关于BEM的反思

    反思BEM 在“学习爱BEM”中,我要表明我对BEM语法的新感受。 我很高兴地报告说,经过2年以上,我仍然对我的选择感到满意。 当我们在项目中选择代码风格时,我们使用BEM和ITCSS的组合。...逻辑会说你会用这个孙子的方法。 我的经验告诉我,这导致不必要的长类名(BEM已经有错,并且没有必要尝试在CSS中反映HTML的结构。 解决这个问题花了我很长一段时间。...在CSS中反映HTML的底层结构似乎是一个干净的想法。 一旦你开始应用它,虽然你会发现这导致代码太长; 当你想改变你的HTML结构时,你需要重命名很多。...在我看来更好的是只给你的孙子元素们一个双重的下划线符号加上用不同的名字。 如果你发现你的结构太深,你可能需要定义一个新的组件。 缩短修饰符长度 在BEM中,修饰符类用两个连接符表示。...举个例子:如果你的类命名为c-button--large,如果你想去除它,你可以在项目中包括javascript,html, css中搜索使用到这个字符串的地方。 使用这种方法,你能寻找到什么?

    62820

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券