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

BEM和css框架

BEM(Block Element Modifier)是一种命名约定,用于组织和命名 CSS 类。它的目标是提供一种清晰、可维护和可扩展的方式来编写 CSS 代码。

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

BEM 的主要优势包括:

  1. 可读性强:BEM 的命名约定清晰明了,易于理解和阅读,使团队成员能够快速理解代码结构。
  2. 可维护性高:BEM 的模块化结构使得修改和扩展样式更加简单,减少了样式冲突和副作用。
  3. 可重用性好:BEM 的组件化思想使得样式可以在不同的地方重复使用,提高了代码的复用性。
  4. 兼容性强:BEM 不依赖于特定的框架或库,可以与各种前端技术和工具无缝集成。

BEM 的应用场景广泛,特别适用于大型项目和团队合作开发。它可以帮助开发人员更好地组织和管理 CSS 代码,减少样式冲突和维护成本。

腾讯云提供了一些与 BEM 相关的产品和服务,例如:

  1. 腾讯云 CDN(内容分发网络):提供全球加速、高可用的静态资源分发服务,可用于加速网站的 CSS 文件加载。 链接:https://cloud.tencent.com/product/cdn
  2. 腾讯云 COS(对象存储):提供安全、稳定的云端存储服务,可用于存储和分发网站的静态资源文件。 链接:https://cloud.tencent.com/product/cos
  3. 腾讯云 SCF(云函数):提供事件驱动、无服务器的计算服务,可用于处理前端或后端的业务逻辑。 链接:https://cloud.tencent.com/product/scf

以上是腾讯云提供的一些与 BEM 相关的产品和服务,可以根据具体需求选择适合的产品来支持和优化 BEM 的开发和部署。

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

相关·内容

CSS规范--BEM入门

如大家有兴趣,可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名规范,官方是这么描述它的: BEM是一种让你可以快速开发网站并对此进行多年维护的技术。...BEM解决的问题 css的样式应用是全局性的,没有作用域可言。...关于原子类(短类)与BEM BEM可以不需要用到原子类,但是如果已经引入了类似Bootstrap的框架,也没必要强制避免使用原子类,比如pull-right、ellipsis、clearfix等等类,这些类非常实用...,BEM是可以互补的。...试想一下维护这类代码有多么痛苦,我们要一边检查该元素的上下文DOM结构,一边对照着css文件,一一对比,找到该元素对应的样式,也就是说我为了改一个元素的代码,需要不断翻阅HTML文件CSS文件,可维护性非常之差

1.1K20

CSSBEM 命名规范

前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论...让你的前端代码更容易阅读理解,更容易协作,更容易控制,更加健壮明确,而且更加严密。...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 的一个槽点是,命名方式长而难看,书写不雅。相比 BEM 格式带来的便利来说,我们应客观看待。...BEM 格式 在当前流行的 Vue.js / React / Angular 等前端框架中,都有 CSS 组件级作用域的编译实现,其基本原理均为利用 CSS 属性选择器特性,为不同的组件生成不同的属性选择器...层级最后不要超过 4 级,不然增加阅读的理解难度 3 总结 BEM 最难的部分之一是明确作用域是从哪开始到哪结束的,以及什么时候使用或不使用它。

2.6K31

编写模块化CSS——BEM

在这篇文章中,我想大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。...我必须 立即知道一个组件是否使用了 JavaScript,所以如果我改变了它的 CSS,我不会意外地破坏任何组件。 在我的探索中,我发现 BEM 命名空间 符合我寻找的标准。...从 BEM 开始 BEM 是我的方法的基础。如果你以前从未听说过 BEM,它代表 block , element modifier。当你第一次接触它时,它看起来是那么的难看。 ?...当然,这意味着 CSS 的目标是 .button .button--modifier。不幸的是,这也意味着选择器也是针对 BEM 元素,这就是为什么引入第二部分的原因。...BEM 元素有两个优点 : 你可以让 CSS 的优先级保持相对扁平。 你能立即知道哪些东西是一个子元素。 为了解释以上两点,考虑使用两个单独的 class 的替代方法(许多框架这么做的)。

2.1K70

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

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

96761

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

BEM命名约定更加严格,而且包含更多的信息,一般用于团队开发一个耗时的大项目中。...... } /* 代表.block的后代,用于形成一个完整的block整体 */ .block--modifier{ ... } /* 代表block的不同状态或不同版本 */ 之所以使用两个连字符下划线而不是一个...-- 女性的右手 --> 上面的代码使用了常规CSS来表示,各个class都是有意义的,但是他们之间却是脱节的...使用BEM我们可以获得更多的描述更加清晰的结构,并且通过命名我们就可以知道元素之间的关联。代码如下: <!...BEM看上去有些怪怪的,但是它的好处远远超过外观上的瑕疵BEM有可能导致输入更长的文本,但是大部分编辑器都有代码自动补全的功能,而且gzip压缩将会让我们消除对文件体积的担忧 更多干货笔记关注微信公众号

94910

CSS框架

使用CSS框架的优点 1、加速你的开发 CSS框架帮你做好了基础工作因此你可以更快地开始开发。它能过向你提供重复的常用的任务代码——如reset——因此你不需要每次都从头开始写。...使用CSS框架的缺点 1、限制你的自由 既然CSS框架有标准的网格,选择器其它代码,它就限制了你可以设计的东西:布局大小,网格宽度,按键类型,样式,以及其它任何东西。...如果你对于CSS元素,选择器,元ID类倾向于使用自己独特的系统,这可能会带来麻烦,因为CSS框架会强迫你使用它的系统。...CSS框架优点缺点 最后,CSS框架好不好呢?当然,理由就好像自动变速的车好不好一样。意思是,大部分人都会使用自动变速的,因为它使得驾驶更简单快捷。当你有一辆新车时,你很快就能熟悉它。...大部分开发者都会得到CSS框架给Web开发设计简化带来的好处。但是还有一小部分人坚持以他们自己的方式来完成任务,以获得更精准的控制结果——就像手动驾驶适合漂移。 那么你应不应该使用CSS框架呢?

1.1K20

组件库使用BEM

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

48930

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

接下来这篇文章我们就来简单聊一聊 CSS 模块化。 为什么CSS也需模块化? 其实平常我们使用 Vue、React这类框架时,就已经使用到了CSS模块化。...BEM BEM 是一种非常有用、强大且简单的命名约定,可以说是一个CSS命名规范,也可以说是一种思想。它使前端代码更易于阅读理解、更易于使用、更易于扩展、更健壮明确,并且更加严格。... BEM 的实用性比起来,丑一点根本不值一提!! OOCSS Object Oriented CSS,面向对象的CSS,旨在编写高可复用、低耦合高扩展的CSS代码。...还是比较累的,不过好在有现成框架,像 Tailwind CSS[1] 就是一个基于 ACSS 的可定制的基础层 CSS 框架,它提供了构建定制化所需的构建块,无需重新覆盖内建于框架内中的风格。...写在最后 其实,BEM、OOCSS、AMCSS、ACSS这些对我们来说只是约束,早期我们就凭借这些约束来使开发更方便,而 CSS Modules CSS in JS 则是正经的模块化解决方案。

70420

在大型项目中组织CSS

但是就目前来说,我们还无法摆脱CSSHTML,这意味着我们不得不用一种产出可管理可维护的应用程序的方式小心地使用这些工具。...对CSS选择器嵌套你所做的是用 微妙 脆弱的方式绑定CSSHTML结构。 法则三:采用BEM命名来开发组件 在构建可隔离组件时,尽可能采用BEM命名方案给类命名。...为了更好地理解类似BEM的命名方式,前往查看Harry Roberts的CSS指南的类BEM命名部分。(需要提到的是,我们发现Harry实际上建立了一套跟我们类似的命名方案。)...---- 往期精选文章 使用虚拟domJavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全...WEB前端性能优化常见方法 一小时内搭建一个全栈Web应用框架 干货:CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 ---- ---- 小手一抖,

78520

CSS当红框架】你必须得认识 Tailwind CSS 框架

前言 一直在寻求一个能够帮助我快速编写 CSS 的工具,这样便于我快速对网页进行开发,方便我对于一些新技术的学习,而不用花太多精力去书写样式,昨天了解到 原子化 CSS,我的心头一振。...然后与 BootStrap 相比,这个 Tailwind CSS 框架强在更加原子化,而且其种类比 BootStrap 要多很多,这是一个更加细粒度的 CSS 库,且自定义程度更高。...主要是如何平滑地将已经存在的项目过渡到原子化项目,而避免过多的改造成本,这一点很重要,tailwind 基本只解决了如何新建一个原子式的项目或者页面,而大多数复杂的web场景其实大多是离散的,从而并没有如此大的原子化的负担指标

9410

CSS 框架 Bulma 教程

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。...一、简介 Bulma 框架最大的特点,就是简单好用。所有样式都基于class,只需为 HTML 元素指定class,样式立刻生效。...Bulma 是一个手机优先的框架,提供五个宽度断点,具有良好的自适应特性,可以随心所欲为不同设备设置不同样式。...,运行一下npm run build,就会生成自己的样式表css/bulma.css了。...100offer 让您可以向数百家互联网企业,匿名展示简历职业期望,省下查找职位投递简历的时间。通过这种方式,对您感兴趣的企业,主动邀请您参加面试。

1.8K40

CSS 框架 Bulma 教程

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。...Bulma 是一个手机优先的框架,提供五个宽度断点,具有良好的自适应特性,可以随心所欲为不同设备设置不同样式。...,运行一下npm run build,就会生成自己的样式表css/bulma.css了。...(全文完) ---- 往期精选文章 使用虚拟domJavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划...全栈工程师技能大全 WEB前端性能优化常见方法 一小时内搭建一个全栈Web应用框架 干货:CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 ----

2.4K30

大型项目中的结构化CSS

已经有很多CSS指南帮助人们构建可维护的CSS:SMACSS, OOCSS, BEM, ITCSS, ACSS, CCSS, Atomic Design, Maintanable CSS, rscss,...你可以通过subtle brittle ways 在CSS中通过做选择器的嵌套来绑定你的HTML结构。...为了更好的理解BEM体系,可以转向这里 - 由Harry Roberts写的CSS指南 :BEM形式的命名。...---- 往期精选文章 使用虚拟domJavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全...WEB前端性能优化常见方法 一小时内搭建一个全栈Web应用框架 干货:CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 ---- ---- 小手一抖,

1.1K40
领券