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

BEM CSS块或修饰符

是一种命名约定,用于组织和管理CSS代码,以提高代码的可维护性和可扩展性。BEM代表块(Block)、元素(Element)、修饰符(Modifier),它将页面中的每个可重用的组件或模块划分为块、元素和修饰符。

  1. 块(Block):块是一个独立的、可重用的组件或模块,它代表一个完整的功能单元。块应该具有自己的独立性,不受其他块的影响。块的命名应该简洁明了,使用小写字母和短划线分隔单词,例如:.block
  2. 元素(Element):元素是块的组成部分,它们不能独立存在,只能作为块的一部分出现。元素的命名应该以块名为前缀,使用双下划线和小写字母分隔单词,例如:.block__element
  3. 修饰符(Modifier):修饰符用于修改块或元素的外观或行为。修饰符可以是布尔类型(有或无)或键值对类型(具有不同的取值)。修饰符的命名应该以块或元素名为前缀,使用双短划线和小写字母分隔单词,例如:.block--modifier.block__element--modifier

BEM CSS的优势在于:

  1. 可维护性:BEM CSS使用清晰的命名约定,使得代码易于理解和维护。开发人员可以快速定位和修改特定的块、元素或修饰符,而不会影响其他部分的样式。
  2. 可扩展性:BEM CSS的模块化结构使得添加新的块、元素或修饰符变得简单和可控。开发人员可以根据需要创建新的组件,而不会对现有的样式产生冲突。
  3. 可重用性:BEM CSS鼓励开发人员编写可重用的组件,使得在不同的项目中可以轻松地复用样式和代码。

BEM CSS适用于任何需要组织和管理CSS代码的项目,特别是大型项目或团队合作的项目。它可以帮助开发人员更好地组织和维护样式,减少样式冲突和错误。

腾讯云相关产品和产品介绍链接地址:

  1. 腾讯云CSS:腾讯云提供的云端CSS服务,可帮助开发人员更好地管理和部署CSS代码。了解更多信息,请访问:腾讯云CSS产品介绍
  2. 腾讯云CDN:腾讯云提供的全球加速服务,可帮助加速静态资源的传输和分发,提高网站的访问速度和性能。了解更多信息,请访问:腾讯云CDN产品介绍

请注意,以上链接仅供参考,具体的产品选择应根据实际需求和项目要求进行评估和决策。

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

相关·内容

CSS规范--BEM入门

如大家有兴趣,可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名规范,官方是这么描述它的: BEM是一种让你可以快速开发网站并对此进行多年维护的技术。...BEM解决的问题 css的样式应用是全局性的,没有作用域可言。...BEM的意思就是(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。... 我们立马就能明白.media是一个,.media__img--rev是一个加了修饰符的.media__img的变体,它是属于.media的元素。...使用BEM的诀窍是,你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个的内部,但这并不意味它就是BEM中所说的元素。

1.1K20

CSSBEM 命名规范

前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论...__ 双下划线:双下划线用来连接的子元素 _ 单下划线:单下划线用来描述一个或者的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...前缀) block 代表了更高级别的抽象组件。...block--modifier 代表 .block 的不同状态不同版本。 使用两个连字符和下划线而不是一个,是为了让你自己的可以用单个连字符来界定。...层级最后不要超过 4 级,不然增加阅读的理解难度 3 总结 BEM 最难的部分之一是明确作用域是从哪开始和到哪结束的,以及什么时候使用不使用它。

2.6K31

编写模块化CSS——BEM

这给我们引入了 BEM 的下一部分 —— 修饰符修饰符(Modifier) 修饰符是改变某个的外观的标志。要使用修饰符,可以将 --modifier 添加到中。...在传统的 BEM 中,当你使用修饰符时,你应该 将修饰符添加 到 HTML 中,以便在新的 .button--secondary 中不重写 .button 样式。 ? ?...有时,我发现需要使用很多单词来命名一个 BEM 元素。举个例子 inner-section 。...所以,如果你看到一个像那样的名字,比如 form__row ,你将立即知道 .form 中有一个 row 元素。 ? ? BEM 元素有两个优点 : 你可以让 CSS 的优先级保持相对扁平。...然而,同时由于它们被一起使用,所以为 .block__list .block__item 创建一个新的是没有意义的 。你会命名什么来保持在上下文中有意义?

2.1K70

CSS命名法BEM与scoped、module

有兴趣可以看看: 百度前端编码规范 CSS命名其实挺随意的,使用驼峰、-、_都可以,并不影响使用,常用的应该是-和下划线_连接。...我一直使用的是-,因为各大UI库或者是CSS库都是使用-,这应该也成为一个标准规范。...平时我们不会关注这个,这其实是CSS的属性选择器,打包的时候给每个标签都添加一个唯一的data-v-hash。...,BEM(Block)、元素(Element)、修饰符(Modifier)组成,__元素--修饰符: B:block,对应模块名,如dialog E:element 对应模块中的节点,如button...BEM:隔离和污染做的很好,但是名字太长长,命名困难,多人协作的情况下通过人为约定约束实现BEM太过困难。

63420

BEM 简介

BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是(Block)、元素(Element)和修饰符(Modifier)。...感兴趣的可以其他解决代码样式冲突的方案:【译】CSS 模块。 基本概念 即是通常所说的 Web 应用开发中的组件模块。每个在逻辑上和功能上都是相互独立的。...中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于是独立的,可以在应用开发中进行复用,从而降低代码重复并提高开发效率。可以放置在页面上的任何位置,也可以互相嵌套。...一个页面可以 元素 元素是中的组成部分。元素不能离开来使用。在菜单中,每个菜单项是中的元素。 修饰符 修饰符用来定义元素的外观和行为。同样的在应用不同的修饰符之后,会有不同的外观。...当菜单出现在页面上的不同位置时,可以有不同的样式。菜单中的菜单项可以有选中非选中的状态。

77540

CSS架构之BEM设计模式

了解这些设计模式无疑会使css代码更具模块化,样式不依赖于页面上的其他元素,因此也较好的避免了遇到级联问题。多人协作的时候,也能高效避免命名重复问题。...BEM的简介BEM就是:B代表:Block(),独立实体,独立的意义,每个页面都可以看做是多个Block组成,见下图1-1;E代表:Element(元素),block 的一部分,没有独立意义,是组件下的一个元素...,多个元素形成一个组件,见下图1-2;M代表: Modifier (修饰符),block element 上的标记,是描述BlockElement的属性状态,同一BlockElement可以有多个...BEM全称BlockElementModifier是由Yandex(俄罗斯最著名的互联网企业)的开发团队提出的前端开发理论。...html代码更具语义使css代码更具模块化多人协作的时候,也能高效避免命名重复问题更加的规范规模化减轻CSS命名烦恼

43320

从element-ui源码来看BEM实现

BEM代表“(block),元素(element),修饰符(modifier)”,开发组件的过程中经常使用这三个实体,而在选择器中,这三个实体由以下符号来表示扩展关系: - 中划线:仅作为连字符使用...type-block__element_modifier 以上的描述是从腾讯的前端规范库中找到的,简单的来说理解了、元素、修饰符三个分类之后,就能大致理解BEM代码是什么样的结构了,可是了解结构是一方面...接下来我要讲的就是如何利用sass,编写具有可读性和可维护性的BEM规则的css代码。...#{$B} { @content; } } 为了方便大家理解代码,我现在开头贴上配置文件中定义的变量,而这时就能很清楚的看到block的生成就是基于BEM规范中,是设计布局的一部分,具有唯一地意义...利用刚刚介绍的函数,以及、元素、修饰符的实现代码,在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。

1.9K30

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

说起 CSS 命名规范,大家应该都很熟悉,或者应该听说过 BEMBEM 是由 Yandex 团队提出的一种 CSS Class 命名方法,旨在帮助开发人员创建更好的且结构一致的 CSS 模块。...BEM 将页面的类名分为(Block)、元素(Element)、修饰符(Modifier)。...通过上面的示例可以看出,与元素是通过两个下划线(__)连接的,而元素和修饰符之间是通过两个短横线(--)连接的。...修饰符是一种表示组件特定状态的类名,修饰符名称同样使用小驼峰规则来命名,并且和组件名直接需要用两个短横线(--)进行连接,这与 BEM 表现一致。...命名规则: --组件名[-后代名|--修饰符]-(CSS属性|变量名)。

94510

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

BEMCSS BEM 分别代表着:Block()、Element(元素/子/组成部分)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。...[Block ]__[Element 元素]_[Modifier 修饰符] 不同的命名模式,区别在于BEM之间的连接符号不同,依个人而定: ....Block() 是一个独立的实体,即通常所说的模块组件。 例:header、menu、search 规则 名需能清晰的表达出,其用途、功能意义,具有唯一性。名称之间用-连接。...例:header title、menu item、list item 规则 元素名需能简单的描述出,其结构、布局意义,并且在语义上与相关联。与元素之间用__连接。不能与分开单独使用。...Modifier(修饰符) 定义和元素的外观、状态类型。 例:color、disabled、size 规则 修饰符需能直观易懂表达出,其外观、状态行为。修饰符用_连接与元素。

69930

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

BEM 是 Block() Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长...) 如何使用BEM 一个独立的(语义上视觉上),可以复用而不依赖其它组件的部分,可作为一个(Block) 属于的某部分,可作为一个元素(Element) 用于修饰元素,体现出外形行为状态等特征的...,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为和元素的间隔,以单下划线 _ 来作为和修饰器 元素和修饰器 的间隔,以中划线 - 来作为 |元素|修饰器 名称中多个单词的间隔...保证各个部分只有一级 B__E_M  ,修饰器需要和对应的元素一起使用,避免单独使用 <!...,且CSS(或者SCSS编译后的CSS)中的选择器嵌套不超过2层,增加效率和复用性,减少选择器之间的耦合度 比较常见的嵌套情景:需要通过块状态对内部元素进行调整时 .search-form {

96761

怎样才能写出更好的 CSS

BEM 是一种命名约定,是英文 Block Element Modifier(元素修饰符)的缩写。 这种方法可以使我们的代码结构化,并提高模块化和可重用性。现在让我们说一说什么是、元素和修饰符。...命名:名+ __ +元素名:.block__element 示例:.post__author、.post__date、.post__text 修饰符 现在窗户已经建好了,但是你可能想要一个绿色一个小窗户...这些我们称之为修饰符。它们是元素上的标志,它们用于改变行为,外观等等。...命名:名称元素名称+ -- +修饰符名称:.block__element--修饰符,.--修饰符 示例:.post--important,.post__btn--disabled 注意事项 在使用...是的,你的 HTML 文件会超负荷,但是不用担心,与 BEM 带来的好处相比,这只是个小小的缺点。 示例 以下是一个练习。你可以去你最喜欢最常用的网站,然后想想看哪些是、元素和修饰符

1.7K10

React 设计模式 0x4:样式

# 样式化类型 在 React 和网站 Web 应用程序中,有不同的样式化应用程序的方式。...外部 CSS 是网站 Web 应用程序样式化的一种方式,它在文件中编写所有样式,并在应用程序组件内引用它。...# BEM BEM 是一种命名约定,它可以帮助您更好地组织样式。BEM 代表(block)、元素(element)和修饰符(modifier),它们可以组合在一起,用于将大型界面拆分为独立的。...(block): 用于描述,通常由类表示 在第一眼看上去就告诉我们该类表示什么 (block)有以下规则 可以嵌套 可以有任意数量的嵌套级别..."> 修饰符(modifier) 用于描述元素的外观、状态行为 修饰符元素之间使用双中划线 -- 单下划线 _ 连接 <div className="form

1.3K20

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

BEM、元素、修饰符):BEM是一种流行的CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化的CSS样式方法,提供代码可重用性,并使大规模CSS的维护成为可能。...BEM(Block)、元素(Element)和修饰符(Modifier)的首字母缩写,它们代表以下原则: (Block):是在开发过程中可能创建的独立组件。...(Modifiers):修饰符指的是对元素状态的修改,它们以双连字符前缀(—)表示。...修饰符附加在表示变体的元素名称后面。一个修饰符的示例是 --active ,用于表示元素/的活动状态。...标准化命名和前缀:采用统一的命名约定(例如,BEM名称原子CSS类)应该在整个项目中标准化,并保持一致性。

30230

如何更优雅的编写CSS代码

BEM 帮助我们解决该问题。BEM 是一种命名约定,表示“ 元素 修饰符”。 该方案可以使我们的代码更加结构化,更加模块化和更大的可复用性。现在我来解释下什么是、元素和修饰符。...命名:名称+ __ + 元素名称: block__element 示例:.post__author,.post__date,.post__text 修饰符 现在你已经建造好了窗户,你可能需要一个绿色的窗口或者小点的窗户...这些就是所谓的修饰符。它们是元素的标识,用于更改行为、外观等。...命名: 元素名称元素名称+ -- +修饰符名称: .Block__element-modifier,.Block-modifier。...你浏览那些你常逛的网址,试着分析哪些是,哪些是元素,那些是修饰符。 例如,我在谷歌商店中分析到的是这样的: ? 轮到你了,保持好奇心,想想怎样可以变得更好。和往常一样,你必须自己搜索,实验,创造。

1.9K10

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

BEM的意思就是(block)、元素(element)、修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论。....block--modifier{} /* 代表.block的不同状态不同版本 */ 上面的描述有些官方,其实 .block 就代表一个视图中的一个,而 .block__element 代表的是....block 下的元素 ,最后的 .block--modifier 代表的是 .block 修饰符。...当然也可以按照下面这种写: .site-search{} /* */ .site-search__field{} /* 元素 */ .site-search--full{} /* 修饰符 */ 唯一的区别是多了一个...而 BEM 就不一样了,虽然看上去很丑,但我们能清晰地看到有个叫 .site-search 的,它内部是 .site-search__field 和 site-search__button 两个元素。

70420

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券