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

BEM -将上下文样式应用于另一个块中的块

BEM(Block Element Modifier)是一种前端开发的命名约定,用于将上下文样式应用于另一个块中的块。它的目的是提供一种结构化的方式来组织和管理CSS代码,以便更好地维护和扩展。

BEM的命名约定由三个部分组成:块(Block)、元素(Element)和修饰符(Modifier)。块代表一个独立的可重用组件,元素是块的一部分,修饰符用于修改块或元素的外观或行为。

BEM的命名约定如下:

  • 块:使用独一无二的类名来表示块,例如:.block
  • 元素:使用双下划线()来连接块和元素,例如:`.blockelement`。
  • 修饰符:使用双短横线(--)来连接块或元素和修饰符,例如:.block--modifier.block__element--modifier

BEM的优势包括:

  1. 可读性强:BEM的命名约定清晰明了,易于理解和阅读,减少了团队成员之间的沟通成本。
  2. 可维护性高:BEM将样式与特定的块或元素关联,使得修改样式更加直观和安全,减少了样式冲突和副作用。
  3. 可重用性强:BEM鼓励组件化开发,使得块和元素可以在不同的地方重复使用,提高了代码的复用性和开发效率。

BEM适用于各种前端开发场景,特别是大型项目和团队协作开发。它可以帮助开发人员更好地组织和管理CSS代码,提高代码的可维护性和可扩展性。

腾讯云提供了一系列与前端开发相关的产品和服务,例如:

  • 云服务器(CVM):提供可扩展的虚拟服务器,用于部署和运行前端应用。
  • 云存储(COS):提供高可靠、低成本的对象存储服务,用于存储前端应用的静态资源。
  • 云函数(SCF):提供事件驱动的无服务器计算服务,用于处理前端应用的后端逻辑。
  • 云网络(VPC):提供安全可靠的网络环境,用于连接前端应用和后端服务。

更多关于腾讯云产品和服务的信息,请访问腾讯云官方网站:腾讯云

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

相关·内容

编写模块化CSS:命名空间

在今天的这篇文章中,我想与大家分享一下为什么只用BEM还是不够的,以及如何使用命名空间来弥补一些不足。 为什么BEM不能满足我们 我上周给大家展示的例子很简单。...当涉及到布局时,我将布局分为两个不同的类别 —— 全局布局和块级布局。 全局布局 全局布局是应用于所有页面的布局。在我的用例中,它们通常是在任何地方都使用的大型网格容器。...:) 组件是上下文感知的(一般而言) 组件是相当大的,所以您需要特别注意将它们放置在不同的地方。 例如,这个.c-form组件可以放在整个宽度栏中或侧边栏中。 以下是放在侧栏上下文中的表单: ?...如果你有一个元素,但决定用.h3来写样式它会发生什么? 接管你的代码库的另一个开发人员可能会遇到一个最初的不和他们去“为什么是.h3 和写在一起了?...,进一步加强了样式表中的层次结构

2.7K70

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

BEM(块、元素、修饰符):BEM是一种流行的CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化的CSS样式方法,提供代码可重用性,并使大规模CSS的维护成为可能。...BEM是块(Block)、元素(Element)和修饰符(Modifier)的首字母缩写,它们代表以下原则: 块(Block):块是在开发过程中可能创建的独立组件。...使用BEM,我们还可以在CSS中编写样式时表示一个元素是特定类的子元素。...假设一个类 title 是另一个类 card 的子元素,我们可以按照下面的代码块中所示进行样式设置: .card { /* Styles for the card block */ &__title...它涉及定义小的、单一用途的可重用类单元,将特定的样式或属性应用于所附加的元素。

40730
  • CSS规范--BEM入门

    如今提到的BEM主要是指其中的规范,在BEM最新的推广页中,对其的描述为: BEM是一种命名方法,能够帮助你在前端开发中实现可复用的组件和代码共享。...BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。...使用BEM的诀窍是,你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部,但这并不意味它就是BEM中所说的元素。...这个例子中,网站logo完全是恰巧在.header的内部,它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文,因此你要确定只在你需要用到BEM的地方你才使用它。...如果我们用的是BEM,要覆盖样式很简单:找到要覆盖样式的元素,得知它的类名,在媒体查询中,用它的类名作为选择器,写下覆盖样式,样式就覆盖成功了,不需要担心前面样式的权重过大。

    1.2K20

    编写模块化CSS——BEM

    在这种情况下,这个表单可以是一个块。在 BEM 中,块被写为像 class 的名字一样,如下所示: ?...BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性,而即使是最基本的元素也可能改变样式。 按钮很好地阐释了可以包含不同样式的块。...在传统的 BEM 中,当你使用修饰符时,你应该 将块和修饰符添加 到 HTML 中,以便在新的 .button--secondary 中不重写 .button 样式。 ? ?...然而,同时由于它们被一起使用,所以为 .block__list 或 .block__item 创建一个新的块是没有意义的 。你会命名什么来保持在上下文中有意义?...但是,在.block__item中有连接到 .item 的元素中。 在我的 CSS(Sass)中,我在 .block__item 中嵌套 .item 元素,赋予了它所需的上下文。 ?

    2.1K70

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

    BEM 是 BlockElementModifier 的缩写 ,其中B 表示块(block)、E 表示元素(element)、M 表示修饰符(modifier)。 这三个部分通常使用__ 与--连接。...即: .块__元素--修饰符{} Block:代表了一个独立的块级元素,可以理解为功能组件块。...为什么要用 BEM? 性能 CSS 引擎查找样式表,对每条规则都按从右到左的顺序去匹配,以下这段代码看起来很快,实际上很慢。...这有悖BEM命名规范,BEM的命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...实战 配置完成后,我们就需要动手验证一下了 首先,我们需要定义一个上下文,这样插件才知道对 CSS 进行校验。

    81410

    浅谈 Css 规范

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

    10810

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

    BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长...) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的...,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为块和元素的间隔,以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔,以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔...-- 块中可嵌套着另一个块 --> 样式 */ .search-form { .my-img { &__logo {} } } /* 但一般来说,不建议,因为这破坏了块的独立性。

    98361

    React 设计模式 0x4:样式

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

    1.3K20

    CSS @scope 如何取代 BEM

    即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分,从而进一步提高了 BEM 的性能。这将使样式表更易于维护,同时对 CSS 级联进行更严格的控制。...在即将发布的 Chrome 118 版本中,@scope 特性创建了 CSS 样式的块级作用域。...块 = sample-page 样式就是 block 样式,因为它包裹了一组元素 元素 = 在为 元素设计样式时,该元素被视为 element ,因此会在样式名称中添加额外的 __ ,从而创建...,所以: 块为 sample-page 元素是 first-section 修饰词是 first-line BEM 的扩展性很好,尤其是在使用 SASS 将样式分组并使用 & 操作符创建类似内容时:...在 GitHub 上的示例应用程序中, react-example 文件夹中有一个项目,其中的页面首先使用 BEM 进行了样式设计,然后使用 @scope 进行了重构。

    12210

    BEM 简介

    这三个不同的组成部分称为 BEM 实体。 解决的问题 当一个项目比较大的时候,容易产出样式冲突的问题。BEM 主要解决样式的冲突的问题,以此帮助你在前端开发中实现可复用的组件和代码共享。...感兴趣的可以其他解决代码样式冲突的方案:【译】CSS 模块。 基本概念 块 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。...同一个块可以在页面上存在多个实例。块的不同实例具有相似的结构。一个典型的块的示例是菜单。一个项目中可以有多个不同的菜单,具体相似的结构和样式。 块的名称应该是全局唯一的。...一个页面可以 元素 元素是块中的组成部分。元素不能离开块来使用。在菜单块中,每个菜单项是块中的元素。 修饰符 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。...当菜单块出现在页面上的不同位置时,可以有不同的样式。菜单块中的菜单项可以有选中或非选中的状态。

    80940

    CSS — BEM 命名规范

    - 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线:双下划线用来连接块和块的子元素 _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...当需要明确关联性的模块关系时,应当使用 BEM 格式。 比如只是一条公共的单独的样式,就没有使用 BEM 格式的意义: .hide { display: none !...当你选择了这种局部作用域的写法时,在较小的组件中,BEM 格式可能显得没那么重要。但对于公共的、全局性的模块样式定义,还是推荐使用 BEM 格式。...另外,对于对外发布的公共组件来说,一般为了风格的可定制性,都不会使用这种局部作用域方式来定义组件样式。此时使用 BEM 格式也会大显其彩。

    2.9K31

    为什么我们不擅长 CSS

    编写 CSS 就是将同一套视觉样式反复应用于各种不同的环境中,直到你死去 尽管 CSS 技术取得了最新进展,但许多人仍停留在这种 BEM 思维模式中,试图完美地封装一切,以免在进行更改时出现意想不到的结果...如果我们想更改我们的品牌颜色用于背景的值,我们可以更改一个标记,将其应用于不同的组件,而无需查找 与其让开发人员访问所有令牌,不如将它们抽象到我们的类中,开发人员可以根据不同的上下文使用相应的类。...在本设计中,flex 只在视口宽度超过一定值时才会应用,因此我们可以创建另一个只在某个断点以上应用的 flex 工具。...实际上,我们必须将 .cool-flex 的 --flex-align 属性重新设置为默认的 stretch,以支持引用块(blockquote)中的文本高度超过图片的情况。...,更容易解析类的作用,而且在不同的上下文中重复使用这些样式时可以减少重复。

    20210

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

    BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论。....block 块下的元素 ,最后的 .block--modifier 代表的是 .block 块的修饰符。...「优点:」 BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。...BEM 命名规则中,所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性(specificity)都是相同的,也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。...「优点:」 优点有很多,比如 CSS in JS 本质上是 JavaScript 代码,因此我们可以将复杂的逻辑应用于样式规则,例如循环、条件、变量、基于状态的样式等等, 这样的话如果我们需要创建有动态功能的复杂

    73820

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

    BEM 代表块(block)、元素(element)和修饰符(modifier)。Yandex,在俄罗斯的相当于谷歌的搜索引擎,为了解决他们 CSS 代码库中的缩放问题而提出了它(它指BEM)。...BEM 是一个极其简单——又极其严格——的命名规范。 .block {} .block__element {} .block--modifier {} 块(Blocks)代表高级别的类。.../base   |- application.css   |- typography.css   |- colors.css   |- grid.css 在这个例子中,每个相关的样式被分离到自己的样式文件中...当单一功能原则应用于你的每一个 CSS 类选择器中时,这意味着每一个类选择器都有着唯一的功能。换句话说,要根据不同关注点将样式分离到不同的类选择器中。...你可以通过阅读下列文章进一步了解单一功能原则在样式表和类中的应用。《单一功能原则在 CSS 中的应用》和《单一功能原则》。

    45710

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

    这种方式可以直观地看到 CSS 如何应用于每个元素,并且实时预览更改效果。 View Source:显示页面的原始 HTML 代码。...审查 CSS 在开发者工具的“元素”面板中,你可以查看选定元素的所有 CSS 样式。点击某个元素后,右侧的样式面板会列出该元素应用的所有 CSS 规则及其来源。...你可以通过以下操作审查 CSS: 查看所有样式:展开每个 CSS 规则,查看所有应用的样式属性。 计算样式:在“计算”面板中查看该元素的最终计算样式,了解实际渲染的属性值。...solid grey; } BEM(块、元素、修饰符) BEM(块级元素修饰符,Block Element Modifier)是一种 CSS 命名规范。...在 BEM 中,一个“块”指的是独立的组件,比如按钮、菜单或徽标。一个“元素”则是属于某个块的子组件,例如列表项或标题。修饰符用于标识块或元素的不同状态或变体,从而改变它们的样式或行为。

    6000

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

    css编写的时候复用性不高,当存在多个样式一致的时候,我们可能会选择减少命名空间的方式来提升当前css的作用范围,但是可能会导致css样式冲突的问题。 由于我们的行业很棒,我们有很多推荐的解决方案。...什么是BEM 如果你从未接触过BEM,那么你第一次接触到BEM的时候它是长这个样子的。...什么是块 在规范中,块表示一个组件的意思,这样看上去有点抽象,我们可以通过例子来学习,假设你要写一个按钮的组件。...但是在实际的项目使用中,我们会发现一个按钮可能是大按钮,可能是小按钮,也可能是红色的,或者黄色的。于是就引申出了BEM的modifier。 什么是修饰符 修饰符是改变某个块的外观的标志。...要使用修饰符,可以将 --modifier 添加到块中。假如我们要添加一个默认按钮,一个主要按钮,一个大按钮,一个小按钮,一个主要的小按钮。

    55320

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

    BEM 将页面的类名分为块(Block)、元素(Element)、修饰符(Modifier)。...块(Block):一个块是视觉上或者语义上的一个整体,它是一个具体且唯一的一个元素,例如,页面上的一个弹窗,或者是一个搜索框; 元素(Element):一般认为是块的组成部分,元素比较用它父级的块名称做为前缀...但是,如果你们业务中不存在第三方的样式,则可以不带命名空间。...    }复制代码 布局规则 CSS 的本质上来说就是布局页面中的元素的,但是,页面各个元素也是有主次之分的。...SMACSS 中允许在布局样式中,使用 ID 选择器,有助于在 HTML 中一眼区分出节点在布局中的位置。其他的非 ID 选择器的类,需要添加 l- 前缀,表示这属于布局样式。

    98210

    大型项目中的结构化CSS

    我的样式不仅仅是抽象渗漏法则能hold住的了, 它们像洪水般涌进我应用中的所有角落和缝隙。...Peergrade.io处理CSS的方式 规则1: 使用前缀 (class类名) 在Peergrade.io中我们在所有样式名中使用前缀 .pg。 在你的CSS代码中如果不使用前缀可能会带来些麻烦。...当你写它的时候,你也许会想这里仅有一个.profile-description的列表命名,但一两个月后, 你必须要增改另一个列表时,混乱的结构已经超出你能想到的范围。...同样,可以在父元素内的子元素中独立定义样式 - 这并不会受到你在前一阶段Sass这层已经定义好的样式的影响。...这允许我们仅可以修改在特定块(block)级别的修饰符, 并且在子块中不能重复修饰符(可以理解为父子嵌套时不重名;“E”在BEM中即元素elements)。

    1.2K40

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

    BEMCSS BEM 分别代表着:Block(块)、Element(元素/子块/组成部分)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。...[Block 块]__[Element 元素]_[Modifier 修饰符] 不同的命名模式,区别在于BEM之间的连接符号不同,依个人而定: ....同类型的块,在显示上可能会有一定的差异,所以不要定义过多的外观显示样式,主要负责结构的呈现。这样就能确保块在不同地方复用和嵌套时,增加其扩展性。综上所述,最终我们可以把BEM规则最终定义成: ....Element(元素) 是块中的组成部分,对应块中的子元素/子节点。...,通过在html代码中添加类名来添加属性,不必再去找相对应的选择器中的css代码来修改样式。

    71630

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券