首页
学习
活动
专区
工具
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 命名规范较为严格,可能导致过长,增加了代码量和阅读难度。

5910

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

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

91910

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

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

68430

编写模块化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.1K20

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

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

25030

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

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

66410

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

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

38410

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

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

68520

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

41430

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

32220

面试官:了解 CSS BEM规范?

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

52420

React 设计模式 0x4:样式

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

1.3K20

CSS — BEM 命名规范

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

2.5K31

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对比,也只是工具对不同处理。

60620

CSS架构之BEM设计模式

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

41120

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

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

904100

大型项目中结构化CSS

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

1.1K40

关于BEM反思

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

60320

编写模块化CSS:命名空间

今天这篇文章,我想与大家分享一下为什么只用BEM还是不够,以及如何使用命名空间来弥补一些不足。 为什么BEM不能满足我们 我上周给大家展示例子很简单。...我只向大家展示了如何处理单个不同修饰符和子代(或孙子代)元素。 但是如果有多个区块咱怎么办呐? 事情有点复杂。 我们使用一个网站范围导航来说明两个之间关系。 ? 好啦。 现在有两个区块。...当涉及到布局时,我将布局分为两个不同类别 —— 全局布局和级布局。 全局布局 全局布局是应用于所有页面的布局。用例,它们通常是在任何地方都使用大型网格容器。...这被称为BEM混合,它允许我使用组件来创建一个对象,而不影响原始按钮。 组件总结 组件(.c-)是您可以整个站点中使用更大构建。...结语 本文中,我向您展示了如何使用命名空间填补BEM遗憾。通过包含命名空间,我终于实现了一个好架构寻找所有四个标准: 必须尽量少地添加避免HTML膨胀。

2.6K70
领券