首页
学习
活动
专区
工具
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...它涉及定义小、单一用途可重用类单元,将特定样式或属性应用于所附加元素。

38530
  • 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 进行校验。

    79610

    浅谈 Css 规范

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

    9410

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

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

    98161

    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 进行了重构。

    11410

    BEM 简介

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

    80240

    CSS — BEM 命名规范

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

    2.7K31

    为什么我们不擅长 CSS

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

    19410

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

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

    72220

    进阶 | 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 应用》和《单一功能原则》。

    44410

    面试官:了解 CSS BEM规范?

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

    55020

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

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

    97010

    大型项目中结构化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代码来修改样式

    71230

    CSS命名法BEM与scoped、module

    CSS挺容易造成样式污染,每个模块或者页面之间,总有一些命名容易相同,解决也简单,用权重或者重写,只是这种场景有时候还是挺头疼。...scoped vue,style都会加上scoped,打包之后标签上面会有很多data-v-4df10a14,而CSS是.test[data-v-65a7937e]。...,BEM(Block)、元素(Element)、修饰符(Modifier)组成,__元素--修饰符: B:block,对应模块名,如dialog E:element 对应模块节点,如button...每种方法都各自有优缺点,无非就是从样式污染、样式覆盖、命名规范。...module:通过类名,做到了绝对隔离,但又因为绝对隔离,修改样式或者复用又变得困难。 BEM:隔离和污染做很好,但是名字太长长,命名困难,多人协作情况下通过人为约定约束实现BEM太过困难。

    66920

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券