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

Bem嵌套命名

BEM嵌套命名是一种前端开发中常用的命名规范,用于管理和组织CSS代码。BEM是块(Block)、元素(Element)、修饰符(Modifier)的缩写,它的核心思想是将页面分解为独立的块,每个块都有自己的元素和修饰符。

  1. 概念:
    • 块(Block):独立的、可复用的组件,代表一个完整的功能模块。
    • 元素(Element):块的组成部分,不能独立存在,只有在块的上下文中有意义。
    • 修饰符(Modifier):用于修改块或元素的外观、状态或行为。
  • 分类: BEM嵌套命名没有明确的分类,它是一种命名规范,用于规范化CSS类名的命名方式。
  • 优势:
    • 可读性强:BEM命名规范清晰明了,易于理解和维护。
    • 可复用性高:块和元素的独立性使得它们可以在不同的上下文中重复使用。
    • 易于扩展:通过添加修饰符,可以轻松地修改块或元素的外观和行为。
  • 应用场景: BEM嵌套命名适用于任何需要组织和管理CSS代码的前端开发项目,特别适用于大型项目或团队合作开发。
  • 推荐的腾讯云相关产品和产品介绍链接地址:
    • 腾讯云服务器(CVM):提供可扩展的云服务器实例,满足各种规模的应用需求。产品介绍链接
    • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于图片、音视频、文档等各种类型的数据存储。产品介绍链接
    • 腾讯云云函数(SCF):无服务器计算服务,支持事件驱动的函数计算,实现按需运行和弹性扩缩容。产品介绍链接

注意:以上推荐的腾讯云产品仅为示例,实际选择应根据具体需求进行评估和决策。

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

相关·内容

CSS — BEM 命名规范

前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论...1.1 BEM 命名模式 BEM 命名约定的模式是: .block {} .block__element {} .block--modifier {} 每一个块(block)名应该有一个命名空间(...2 如何使用 BEM 命名法 2.1 什么时候应该用 BEM 格式 使用 BEM 的诀窍是,你要知道什么时候哪些东西是应该写成 BEM 格式的。 并不是每个地方都应该使用 BEM 命名方式。...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 的一个槽点是,命名方式长而难看,书写不雅。相比 BEM 格式带来的便利来说,我们应客观看待。...此时使用 BEM 格式也会大显其彩。 2.4 避免 .block__el1__el2 的格式 在深层次嵌套的 DOM 结构下,应避免过长的样式名称定义。

2.7K31

CSS命名BEM与scoped、module

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

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

    BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长...) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的...__input { font-size: 12px; } .search-form__button_hover {} /* 避免:避免使用不必要的嵌套(此处只是简单的嵌套,没有必要) *...,尽量按照 BEM三层来 /* 避免这样做 .search 不是一个独立的块 */ .search { /* 应该把这个块提取出来 */ &-form { &__button...可转换成设置对应的 元素来表现,如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰,但有时候会产生代码冗余

    98161

    内联和嵌套命名空间

    命名空间在C++98标准中已经引入,它的概念以及用法这里就不再赘述,现在来介绍的是现代C++标准新增的功能:内联命名空间(C++11)和嵌套命名空间(C++17),以及在C++20中的改进。...嵌套命名空间嵌套命名空间在C++98中已有,如上节中的代码就定义了一个嵌套命名空间,但它的写法比较冗余,如果要定义多重的嵌套则显得更加冗余,特别是在代码缩进时,比如:namespace A { namespace...,因此C++17标准中引入了更简洁的嵌套命名空间的定义方式,如:namespace A::B::C { void foo() {}}这样代码就显得简洁得多,它也更符合我们的使用习惯。...当遗憾的是,在C++17中没有解决在嵌套命名空间中定义内联命名空间,也就是说在上面的嵌套命名空间中没法加入inline关键字,使得子命名空间成为内联的,直到C++20标准中完善了这个功能。...此篇文章同步发布于我的微信公众号:内联和嵌套命名空间如果您感兴趣这方面的内容,请在微信上搜索公众号iShare爱分享或者微信号iTechShare并关注,以便在内容更新时直接向您推送。

    15420

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

    BEM即块(Block)、元素(Element)、修饰符(modifier),是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。...BEM命名约定更加严格,而且包含更多的信息,一般用于团队开发一个耗时的大项目中。...我们常见的BEM命名方式一般都是经过改良的,本文介绍的是Nicolas Gallagher(Twitter前端工程师)的改进版。...使用BEM我们可以获得更多的描述和更加清晰的结构,并且通过命名我们就可以知道元素之间的关联。代码如下: <!...BEM看上去有些怪怪的,但是它的好处远远超过外观上的瑕疵BEM有可能导致输入更长的文本,但是大部分编辑器都有代码自动补全的功能,而且gzip压缩将会让我们消除对文件体积的担忧 更多干货笔记关注微信公众号

    99210

    Python动态参数命名空间函数嵌套

    2.2 全局名称空间 -- 我们直接在py文件中, 函数外声明的变量都属于全局命名空间   2.3 局部名称空间 -- 在函数中声明的变量会放在局部命名空间 加载顺序:内置命名空间 >>>...全局命名空间 >>> 局部命名空间(函数被执行的时候) 取值顺序: 局部命名空间 >>> 全局命名空间 >>> 内置命名空间   作用域: 作用域: 作用域就是作用范围, 按照生效范围来看分为 全局作用域和局部作用域...    全局作用域: 包含内置命名空间和全局命名空间....函数嵌套   函数可以互相的嵌套 def fun1(): print(111) def fun2(): print(222) fun1() fun2() print...(111) # 函数的嵌套 def fun2(): print(222) def fun3(): print(666) print(444) fun3(

    80930

    BEM 简介

    BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Element)和修饰符(Modifier)。...这三个不同的组成部分称为 BEM 实体。 解决的问题 当一个项目比较大的时候,容易产出样式冲突的问题。BEM 主要解决样式的冲突的问题,以此帮助你在前端开发中实现可复用的组件和代码共享。...块可以放置在页面上的任何位置,也可以互相嵌套。同一个块可以在页面上存在多个实例。块的不同实例具有相似的结构。一个典型的块的示例是菜单。一个项目中可以有多个不同的菜单,具体相似的结构和样式。...101 Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them BEM FAQ BEMIT: Taking...the BEM Naming Convention a Step Further Healthchecks 这块挺有意思。

    80240

    Swift代码中的嵌套命名

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

    1.7K31

    嵌套命名实体识别任务简介

    来自:哈工大讯飞联合实验室 本期导读:嵌套命名实体是一种特殊形式的命名实体,由于其复杂的层次化结构,传统的基于序列标注的命名实体模型不能很好地解决嵌套命名实体识别的任务。...本文简要介绍了两类经典的解决嵌套命名实体识别任务的模型及其优缺点,并介绍了一个近期的与嵌套命名实体识别任务相关的工作。...对于这种具有嵌套结构的命名实体,传统的基于序列标注的命名实体模型是难以直接有效地处理的。因此,越来越多的研究者们开始关注嵌套命名实体识别的问题,提出了一些专门适用于嵌套命名实体识别任务的模型。...为了下文叙述的方便,本文将普通的非嵌套命名实体称为Flat NER,将嵌套命名实体称为Nested NER。...嵌套命名实体识别任务数据集 比较常用的含有嵌套命名实体的数据集主要有以下几个:新闻领域的数据集ACE 2004,ACE 2005;生物医学领域的数据集GENIA 。

    2.1K30

    CSS规范--BEM入门

    这段时间在整理前端部分的代码规范,前面提到的CSS规范里面会涉及到选择器的命名,就参考BEM命名规范,内容整理如下,供大家参考,请斧正!...如今提到的BEM主要是指其中的规范,在BEM最新的推广页中,对其的描述为: BEM是一种命名方法,能够帮助你在前端开发中实现可复用的组件和代码共享。...BEM命名中包含了模块名,长长的命名会让HTML标签会显得臃肿。...因为命名长,我们是不是可以用子代选择器来代替BEM命名?这样至少在HTML编写时,让HTML标签看起来美观一点。 3. 什么时候用BEM?...首先,有悖BEM命名规范,BEM命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况,所以上述每一页的按钮名可以改成:page-btn__btn。

    1.2K20

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

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

    1.2K21

    【C++ 语言】命名空间 ( namespace | 命名空间定义 | 命名空间嵌套 | 域作用符 | 与 include 对比 )

    文章目录 命名空间简介 自定义命名空间 自定义嵌套命名空间 域作用符 命名空间 与 include 区别 命名空间定义与使用完整代码 命名空间简介 ---- 命名空间 ( namespace )...---- 自定义嵌套命名空间 ---- 自定义嵌套命名空间 : 1.嵌套命名空间简介 : 命名空间内部再定义一个命名空间 , 这种情况就是嵌套命名空间 ; 如下代码 , myinnernamespace...执行结果 : 自定义嵌套命名空间 myinnernamespace say_hi_inner() 方法 : Hi Inner!...自定义嵌套命名空间 myinnernamespace say_hi_inner() 方法 : Hi Inner!...自定义嵌套命名空间 myinnernamespace say_hi_inner() 方法 : Hi Inner!

    2K30

    关于BEM的反思

    反思BEM 在“学习爱BEM”中,我要表明我对BEM语法的新感受。 我很高兴地报告说,经过2年以上,我仍然对我的选择感到满意。 当我们在项目中选择代码风格时,我们使用BEM和ITCSS的组合。...一旦你开始应用它,虽然你会发现这导致代码太长; 当你想改变你的HTML结构时,你需要重命名很多。 在我看来更好的是只给你的孙子元素们一个双重的下划线符号加上用不同的名字。...举个例子:如果你的类命名为c-button--large,如果你想去除它,你可以在项目中包括javascript,html, css中搜索使用到这个字符串的地方。 使用这种方法,你能寻找到什么?...为什么BEM是如此的伟大?,就在于它提供了一个清晰的命名空间来说明自身的作用。无论是手动还是编程(即通过linters)。...翻译自Overthinking BEM

    62320

    组件库使用BEM

    bem的优势 最近在开发一个组件库,选择了BEM作为css的组织形式,主要考虑了以下三个方面的优势: 逻辑分层,容易理解。...BEM基于block、element、modify的组织形式,基本与组件的组织形式吻合。只要遵循了BEM命名方式,对于开发和修改组件,哪些元素和状态已经存在,都可以直观的看出来。...反过来,通过html标记的BEM命名,可以直观地理解组件的功能和依赖关系。 强约束,便于团队协作。...只要定义好了大的框架和命名,那么团队其他成员基于BEM的规范进行开发,理解成本降低,而且基本不存在样式冲突的问题。...预编译器支持 目前常用的css预编译器,如sass、less、stylus,基本对BEM的支持都很好,举个例子(语法差异暂时忽略): .block { &__element { }

    50930

    编写模块化CSS——BEM

    在我的探索中,我发现 BEM命名空间 符合我寻找的标准。 从 BEM 开始 BEM 是我的方法的基础。如果你以前从未听说过 BEM,它代表 block , element 和 modifier。...(BEM 元素具有 .block__element 语法)。 在这一点上,你仍然可能不喜欢 BEM 丑陋的 --modifier 语法。我知道为什么,但我爱上这个语法是因为我很讨厌命名。...有时,我发现需要使用很多单词来命名一个 BEM 块或元素。举个例子 inner-section 。...有两种方法可以绕过长长的 BEM 链式命名。...在我的 CSS(Sass)中,我在 .block__item 中嵌套 .item 元素,赋予了它所需的上下文。 ? 你可能会说,“但这是违反 BEM 惯例的!”是的,但请阅读下一篇文章 。

    2.1K70
    领券