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

嵌套微小零件的BEM命名约定

BEM命名约定是一种用于前端开发的命名规范,用于标识HTML和CSS中的组件和元素。BEM代表块(Block)、元素(Element)和修饰符(Modifier),它的目标是提供一种一致且可扩展的命名约定,以便更好地组织和管理代码。

  1. 概念:
    • 块(Block):独立的、可重复使用的组件,代表一个完整的功能单元。
    • 元素(Element):块的组成部分,不能独立存在,依赖于块的存在。
    • 修饰符(Modifier):用于修改块或元素的外观、状态或行为。
  • 分类: BEM命名约定可以分为三个主要部分:
    • 块:以独立的、有意义的名称作为前缀,例如:.header、.menu。
    • 元素:以双下划线(__)连接块和元素的名称,例如:.header__logo、.menu__item。
    • 修饰符:以单个连字符(-)连接块或元素的名称和修饰符的名称,例如:.header--dark、.menu__item--active。
  • 优势:
    • 可读性强:BEM命名约定使用有意义的名称,使代码易于理解和维护。
    • 可扩展性好:通过组合块、元素和修饰符,可以轻松创建新的组件和样式变体。
    • 避免样式冲突:每个块和元素都有自己的命名空间,减少了样式冲突的可能性。
  • 应用场景: BEM命名约定适用于任何规模的前端项目,特别适用于大型项目和团队合作开发。它可以帮助开发人员更好地组织和管理代码,提高代码的可维护性和可重用性。
  • 腾讯云相关产品:
    • 腾讯云服务器(CVM):提供可扩展的云服务器实例,满足不同规模和需求的应用场景。产品介绍链接
    • 腾讯云对象存储(COS):安全、稳定、低成本的云端存储服务,适用于图片、视频、音频等多媒体资源的存储和管理。产品介绍链接
    • 腾讯云人工智能(AI):提供丰富的人工智能服务和工具,包括图像识别、语音识别、自然语言处理等,帮助开发者构建智能化应用。产品介绍链接

以上是关于BEM命名约定的完善且全面的答案,希望能对您有所帮助。

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

相关·内容

Vue组件Prop命名约定

在编程中,有两个极具挑战性任务:缓存失效和命名事物。今天,我们将深入探讨后者,探索为Vue组件命名props艺术。 在给 props 命名时,遵循已有的变量命名惯例是非常重要。...例如,使用小驼峰命名法(isEnabled)并保持名称简短(不超过30个字符)。 然而,Vue有自己一套最佳实践,我们应该遵循。让我们根据我在使用Vue经验谈谈一些技巧。...1.内容感知命名 重要是最大限度地利用变量名传达信息,以减少混淆并使组件浏览更加容易。 对于数组,选择使用复数名词作为变量名,例如 items 。这个选择立即表明该变量代表一组相关元素集合。...使用前缀如 hasCancelButton 或 hasHeader 来表示特定UI元素是否存在或可见。 2. 描述性命名 Props 应该描述组件本身,侧重于它功能而不是为什么要这样做。...按照这些准则,我们可以为Vue应用程序建立一致且有意义 prop 命名约定。周到 prop 名称有助于提高代码可读性和可维护性,使你和团队更容易有效地合作。

29130

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

BEM即块(Block)、元素(Element)、修饰符(modifier),是由著名俄罗斯搜索引擎团队Yandex提出一种前端命名方法论。...BEM命名约定更加严格,而且包含更多信息,一般用于团队开发一个耗时大项目中。...我们常见BEM命名方式一般都是经过改良,本文介绍是Nicolas Gallagher(Twitter前端工程师)改进版。...命名约定格式如下: .block{ ... } /* 代表更高级别的抽象或组件 */ .block__element{ ... } /* 代表.block后代,用于形成一个完整block整体 */...hand是在表示指针(英文hand有钟表指针含义)还是一只正在玩指纸牌手呢?使用BEM我们可以获得更多描述和更加清晰结构,并且通过命名我们就可以知道元素之间关联。代码如下: <!

99210
  • Swift代码中嵌套命名

    Swift代码中嵌套命名法 Swift支持与其他类型嵌套命名,尽管它还没有专用命名关键词。下面我们来看看,如何使用类型嵌套来优化我们代码结构。...大多数Swift开发者习惯于用类型在结构上实际名字累命名。例如:PostTextFormatterOption(一个Text Formatter类型用于format PostsOption)。...这可能是因为我们在Objective-C & C中,养成别无选择可怕命名习惯,被我们带到了Swift里。...我比较喜欢把父类型内容放在上面————同时还可以享受嵌套类型便利。 事实上,在Swift中还有好几种其他方法可以实现命名嵌套类型。...使用extension实现嵌套类型 另一个实现嵌套类型选择就是extension。这种方法可以在实现和调用时保持层级关系,同时清楚明白分开每种类型。

    1.7K31

    CSS — BEM 命名规范

    前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)简写,由 Yandex 团队提出一种前端 CSS 命名方法论...__ 双下划线:双下划线用来连接块和块子元素 _ 单下划线:单下划线用来描述一个块或者块子元素一种状态 BEM 是一个简单又非常有用命名约定。...1.1 BEM 命名模式 BEM 命名约定模式是: .block {} .block__element {} .block--modifier {} 每一个块(block)名应该有一个命名空间(...2 如何使用 BEM 命名法 2.1 什么时候应该用 BEM 格式 使用 BEM 诀窍是,你要知道什么时候哪些东西是应该写成 BEM 格式。 并不是每个地方都应该使用 BEM 命名方式。...2.4 避免 .block__el1__el2 格式 在深层次嵌套 DOM 结构下,应避免过长样式名称定义。

    2.7K31

    PHP面向对象-命名空间嵌套和别名

    命名空间嵌套和别名命名空间可以嵌套定义,这意味着一个命名空间可以包含另一个命名空间。使用嵌套命名空间时,我们可以使用反斜杠“\”来表示命名空间层级结构。...下面是一个命名空间嵌套示例:namespace MyNamespace\SubNamespace;class MyClass{ // class code here}上面的代码定义了一个"MyNamespace...命名空间注意事项在使用命名空间时,需要注意以下几点:命名空间名称必须遵循PHP变量命名规则,只能包含字母、数字和下划线,且必须以字母或下划线开头。...命名空间可以使用多层级结构,每个层级之间使用反斜杠“\”分隔。命名空间中类、函数、常量等元素可以通过完整命名空间名称或使用use语句定义别名来访问。...命名空间定义必须在文件最前面,除非是使用条件语句来定义命名空间。命名空间可以在一个文件中定义多次,但是每次定义必须使用不同名称。

    1.2K21

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

    BEM BEM 是一种非常有用、强大且简单命名约定,可以说是一个CSS命名规范,也可以说是一种思想。它使前端代码更易于阅读和理解、更易于使用、更易于扩展、更健壮和明确,并且更加严格。...这种巧妙命名方法让你CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多信息,它们用于一个团队开发一个耗时大项目。...我们可以简单看一下这个命名约定: .block{} /* 代表了更高级别的抽象或组件 */ .block__element{} /* 代表.block后代,用于形成一个完整.block整体 */...「优点:」 BEM 优点在于所产生 CSS 类名都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来复杂属性级联问题。...其次也解决了 CSS 嵌套过深问题,正是因为全局命名冲突问题,我们不得已就要为 class 加上一些独立命名空间,书写时也会多层嵌套

    72220

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

    了解CSS命名约定 在本节中,我们将讨论CSS命名约定概念、应用优势以及它在推动清洁高效代码方面的作用。 什么是CSS命名约定?...类名还应具有连贯性,连接兄弟元素或显示父子元素之间关系。 避免过度嵌套:在为类分配名称时,命名模式应保持浅层,并且选择器不应过度嵌套。这样可以提高可读性并使代码更易于维护。...相关样式:与相关元素相关样式块应放置在样式表中。 简洁CSS选择器:CSS选择器不应过长或过于嵌套,也不应使用复杂后代选择器。 适当选择器命名:选择器应该具体命名为其应用元素。...BEM(块、元素、修饰符):BEM是一种流行CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化CSS样式方法,提供代码可重用性,并使大规模CSS维护成为可能。...标准化命名和前缀:采用统一命名约定(例如,BEM块名称或原子CSS类)应该在整个项目中标准化,并保持一致性。

    38730

    浅谈 Css 规范

    BEM 是一种命名方法,能够帮助你在前端开发中实现可复用组件和代码共享。...可读性和可维护性: BEM 使用简洁明了命名约定,使得 CSS 代码易于理解和维护。 增强可扩展性: BEM 结构使得页面元素易于扩展和修改,不会影响其他部分样式。...避免样式冲突: BEM 命名约定避免了样式冲突,每个块和元素都有独立命名空间,不会受到外部样式影响。 缺点: 命名冗长: BEM 命名规范较为严格,可能导致类名过长,增加了代码量和阅读难度。...样式层级深: 由于 BEM 嵌套结构,可能导致样式层级较深,增加了 CSS 优先级和复杂度。 维护成本: 对于初学者来说,需要一定时间来适应和理解 BEM 命名规范,可能增加学习和维护成本。...命名约定:ITCSS需要遵循一定命名约定和规范,有时可能需要花费额外时间和精力来命名和组织样式代码。 可能导致过度设计:过度遵循ITCSS规范可能导致样式表过度设计,增加不必要复杂性。

    9410

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

    书写方式解耦化,不会造成命名空间污染,如:.xxx ul li 写法带来潜在嵌套风险。命名方式化扁平,避免样式层级过多而导致解析效率降低,渲染开销变大。...规则 BEM命名模式在社区中有着不同方式,以下为 Yandex 团队所提出命名规则为(本文中代码使用该规则): ....[Block 块]__[Element 元素]_[Modifier 修饰符] 不同命名模式,区别在于BEM之间连接符号不同,依个人而定: ....同类型块,在显示上可能会有一定差异,所以不要定义过多外观显示样式,主要负责结构呈现。这样就能确保块在不同地方复用和嵌套时,增加其扩展性。综上所述,最终我们可以把BEM规则最终定义成: ....个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长,但经过 GZIP 等压缩后,文件体积其实并无太大影响。

    71230

    20180818_ARTS_week08

    本周 ARTS,做了算法题 String to Integer (atoi),看了一篇介绍 BEM 命名方式文章,Tip 记录了 css 属性 pointer-events 用法,分享了使用 python...-9df46d29b64c 作者主要介绍了 BEM 这种书写 HTML 和 CSS 约定。...之前也听说过 BEM 命名方式,我理解一个是为了每个模块更严谨,命名更加合理和语义化,另一方面也是为了能避免样式冲突。...不过随着 Vue 等框架支持 css scoped 之后,冲突问题有很大缓解。 BEM 使用还是要根据实际情况,如果规定太严格,样式上重用性会降低不少。...除此之外,还可以嵌套着用,最外层设置 pointer-events:none;,然后给里面需要点击东西设置 pointer-events:all;,里面东西时间又可以用了。

    40310

    javascript事件监听中传递匿名函数(嵌套定义命名函数)与命名函数区别

    https://blog.csdn.net/wkyseo/article/details/51352229 项目中有个需求,事件第一次执行(立即执行)与后几次执行不同,但是直接传递定义好命名函数...如果通过匿名函数内再嵌套具名函数,结果就能返回正确!...第一个fn指向匿名函数(对象),然后添加事件指向是匿名函数(对象),你改写fn并不会改写该匿名函数(对象);第二个事件是匿名函数,里面调用fn指向函数(形成闭包,取最后赋值fn)。...Object{c:3},因为a, c指向同一对象,引用传递不是复制,这个例子中b就好比fn 后记 项目中刚开始想实现此功能时候用是第一种方法,但是未能实现,经同事指点,需要嵌套一个匿名函数,形成闭包...,取最后赋值fn。

    1.2K40

    React 设计模式 0x4:样式

    (继承) Nesting(嵌套) 可以通过以下方式安装 Sass: npm install sass 使用: /* example.scss */ .example { color: red;...Tailwind CSS 是一种实用型优先框架,使用一种称为“原子类”方法,通过提供大量预定义类来帮助构建定制、响应式 UI 组件和页面。... ); } export default Example; # 样式规范 前面已经介绍了不同样式类型,现在我们将介绍编写样式一些常见约定。...# BEM BEM 是一种命名约定,它可以帮助您更好地组织样式。BEM 代表块(block)、元素(element)和修饰符(modifier),它们可以组合在一起,用于将大型界面拆分为独立块。...块(block): 用于描述,通常由类表示 在第一眼看上去就告诉我们该类表示什么 块(block)有以下规则 块可以嵌套 可以有任意数量嵌套级别

    1.3K20

    下划线在命名约定(Underscores in Python)

    下划线在命名约定(Underscores in Python) 作者: quantgalaxy@outlook.com blog: https://blog.csdn.net/quant_galaxy...介绍 在各种python编码规范中,都对命名规则做了很详细约定。 但是下划线和变量名称组合,在python中都有特定含义。...这些含义有些是一种认为约定,有些是python解释器严格执行准则。 有必要掌握这些约定,来写出专业代码。 2....此通配符导入不包括私有导入,这就是为什么在尝试访问单前下划线变量时引发异常原因。除了变量以外,函数命名也是一样规则。 所以这里它是由Python解释器强制执行。...总结: 单前下划线在类成员命名中,约定是在类内部可见。实际访问是不受限制。 单前下划线变量和函数,在py文件中定义,被其它py文件导入时是不可见,这是被Python解释器执行

    22840

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

    1.2 CSS模块化核心思想 CSS模块化是一种将样式按模块划分方法,每个模块都具有自己作用域,样式不会影响到其他模块,从而降低了样式冲突概率。 2....CSS模块化实现方式 3.1 BEM(块、元素、修饰符) BEM是一种常用CSS命名约定,通过块(Block)、元素(Element)、修饰符(Modifier)组合来命名样式,以确保样式唯一性...3.3 CSS预处理器 使用CSS预处理器如Sass或Less可以将样式分割成模块,并使用变量和嵌套规则来提高可维护性。 4....在项目中应用CSS模块化最佳实践 4.1 选择适当实现方式 根据项目需求和团队技能,选择合适CSS模块化方法。...4.2 统一命名规范 建立命名规范并在整个项目中保持一致,以确保团队成员理解并遵循规则。 4.3 模块化组织 将样式表分割为模块,每个模块只包含特定组件或元素样式,以提高可维护性。 5.

    31340

    如何更优雅编写CSS代码

    非也,scss足够聪明,当你以这种方式进行命名时,它可以知道你想指代是分块文件。 这就是我们需要知道关于变量、嵌套、分块和导入所有的新星。...CSS 代码组织方案:BEM 我曾经无数次给我css类名提供我能想到全部术语,你懂,比如这些命名:.button .page-1 .page-2 。我经常不知道如何进行命名。...BEM 帮助我们解决该问题。BEM 是一种命名约定,表示“块 元素 修饰符”。 该方案可以使我们代码更加结构化,更加模块化和更大可复用性。现在我来解释下什么是块、元素和修饰符。...示例:.post--important,.post__btn--disabled 注意点 当你使用 BEM 时,你命名只有 class 类名并且只使用 class 类名,没有 id ,没有标签,就只使用...这种情况请使用具体 class 类名来替代。 是的,你 HTML 文件将会因为 BEM 变得臃肿,但比起BEM带来好处,这只是一个无足轻重小缺点。 举个例子 这是给你练习。

    1.9K10

    CSS命名BEM与scoped、module

    有兴趣可以看看: 百度前端编码规范 CSS命名其实挺随意,使用驼峰、-、_都可以,并不影响使用,常用应该是-和下划线_连接。...CSS挺容易造成样式污染,每个模块或者页面之间,总有一些命名容易相同,解决也简单,用权重或者重写,只是这种场景有时候还是挺头疼。...test.vue .test-button{} //编译成 .test_test-button_4df1{} //或者 ._3zyde4l1yATCOkgn{} BEM模式 这个是原生命名规则,纯粹靠自我约束...M:modifier 对应节点状态,disabled 最终class名 dialog__button--disabled 使用BEMelement:el-cascader-node__label、...BEM:隔离和污染做很好,但是名字太长长,命名困难,多人协作情况下通过人为约定约束实现BEM太过困难。

    66920
    领券