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

BEM CSS结构上的JS操作

BEM(Block Element Modifier)是一种用于组织和命名CSS类的方法,旨在提高代码的可维护性和可扩展性。它将页面分解为独立的块(Block),块内部包含元素(Element),并且可以通过修改块或元素的状态(Modifier)来改变它们的外观和行为。

BEM的主要优势包括:

  1. 可维护性:BEM的命名约定清晰明确,使得代码易于理解和维护。每个块和元素都有自己的命名空间,避免了命名冲突和样式污染。
  2. 可扩展性:BEM的模块化结构使得添加、修改或删除样式变得简单和安全。每个块和元素都是独立的,可以在不影响其他部分的情况下进行修改。
  3. 可重用性:BEM鼓励将样式定义为块和元素级别的组件,可以在不同的页面和项目中重复使用。
  4. 可读性:BEM的命名约定使得代码易于阅读和理解,减少了团队成员之间的沟通成本。

BEM适用于各种规模的项目,特别适合大型和复杂的前端应用程序。它可以帮助开发人员更好地组织和管理CSS代码,提高开发效率和代码质量。

在腾讯云的产品生态中,没有专门与BEM相关的产品或服务。然而,腾讯云提供了一系列与前端开发和云计算相关的产品,可以帮助开发人员构建和部署应用程序。以下是一些推荐的腾讯云产品和产品介绍链接地址:

  1. 云服务器(Elastic Compute Cloud,简称CVM):提供可扩展的虚拟服务器,用于部署和运行应用程序。 产品介绍链接:https://cloud.tencent.com/product/cvm
  2. 云数据库MySQL版(TencentDB for MySQL):提供高性能、可扩展的关系型数据库服务,用于存储和管理应用程序的数据。 产品介绍链接:https://cloud.tencent.com/product/cdb_mysql
  3. 云存储(Cloud Object Storage,简称COS):提供安全可靠的对象存储服务,用于存储和管理应用程序的静态资源(如图片、视频等)。 产品介绍链接:https://cloud.tencent.com/product/cos
  4. 人工智能平台(AI Platform):提供丰富的人工智能服务和工具,包括图像识别、语音识别、自然语言处理等,用于开发智能化的应用程序。 产品介绍链接:https://cloud.tencent.com/product/ai

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据项目需求和实际情况进行评估和决策。

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

相关·内容

面试官:了解 CSS BEM规范?

如果我要覆盖css样式,可能我就需要利用css优先级规则去覆盖原有的css,这样就会导致css优先级竞争。...因为专家们纷纷加入,于是我们有 BEM,OOCSS,SMACSS,Atomic Design 等许多选择。...什么是BEM 如果你从未接触过BEM,那么你第一次接触到BEM时候它是长这个样子。...我们只需要设置了一个 .button 类按钮,然后可以在任何按钮使用该类,就可以生成该组件传统样式。...但是在实际项目使用中,我们会发现一个按钮可能是大按钮,可能是小按钮,也可能是红色,或者黄色。于是就引申出了BEMmodifier。 什么是修饰符 修饰符是改变某个块外观标志。

53320

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

BEM命名约定更加严格,而且包含更多信息,一般用于团队开发一个耗时大项目中。...我们常见BEM命名方式一般都是经过改良,本文介绍是Nicolas Gallagher(Twitter前端工程师)改进版。...-- 女性右手 --> 上面的代码使用了常规CSS来表示,各个class都是有意义,但是他们之间却是脱节...hand是在表示指针(英文hand有钟表指针含义)还是一只正在玩指纸牌手呢?使用BEM我们可以获得更多描述和更加清晰结构,并且通过命名我们就可以知道元素之间关联。代码如下: <!...BEM看上去有些怪怪,但是它好处远远超过外观瑕疵BEM有可能导致输入更长文本,但是大部分编辑器都有代码自动补全功能,而且gzip压缩将会让我们消除对文件体积担忧 更多干货笔记关注微信公众号

94510

CSS规范--BEM入门

如大家有兴趣,可移步至CSS编码规范 BEM是由Yandex公司推出一套CSS命名规范,官方是这么描述它BEM是一种让你可以快速开发网站并对此进行多年维护技术。...使用BEM我们可以获得更多描述和更加清晰结构,单单通过我们代码中命名就能知道元素之间关联。BEM真是强大。...__field"> 从这种CSS写法我们就已经知道...但是,如果只是“看起来有点怪”而事实是一种有效手段,那么我们在开发之前当然应该充分考虑它。是,BEM看上去确实怪怪,但是它好处远远超过它外观那点瑕疵。...试想一下维护这类代码有多么痛苦,我们要一边检查该元素上下文DOM结构,一边对照着css文件,一一对比,找到该元素对应样式,也就是说我为了改一个元素代码,需要不断翻阅HTML文件和CSS文件,可维护性非常之差

1.1K20

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

写在前面 上文「前端工程四部曲」模块化前世今生()中我们主要介绍了JS模块化相关知识,对于JS模块化,相信很多人都不陌生,但说起CSS模块化,可能大家就没有这么清晰了。...代码清单中命名规则好处在于每个 CSS 类名都很简单明了,而且类名层次关系可以与 DOM 节点树型结构相对应。...也就是说,尽量不要去使用依赖于节点结构位置样式定义。...而 CSS Modules 则会将两个 class 名字通过 JS 手段编译最终生成两个不同 class 名附加到元素从而避免样式冲突,相当于为 CSS 搞了一个作用域。...「优点:」 优点有很多,比如 CSS in JS 本质是 JavaScript 代码,因此我们可以将复杂逻辑应用于样式规则,例如循环、条件、变量、基于状态样式等等, 这样的话如果我们需要创建有动态功能复杂

70420

简单说 通过JS控制CSS各种方式(

https://blog.csdn.net/FE_dev/article/details/77888446 说明 通过JS控制CSS,我们能做出更多漂亮页面特效,做出更炫交互效果。...今天我们来说说JS控制CSS各种方式。 解释 JavaScript、CSS、HTML是前端三剑客,我们说正事之前,先来说说CSS与HTML事。...>标签中 3、外部样式表 将CSS定义在一个外部CSS文件中,在HTML页面通过标签引用CSS文件 而JavaScript 中DOM操作,又可以控制...说到这,我们最少已经知道,三种方式,通过JS控制CSS了。 好了,我们开始说正事了。...6、通过创建 标签,引入新样式 我们可以先在元素定义好class属性,然后通过JS创建,给元素加上样式 例如: <!

4.6K20

29、地址列表

其实这个我理解也不是很透彻,不过大概就是一种设计思想,将css命名进行了规范,然后就是抽离了css样式文件,一个样式对应一个html块,我这里丢两篇文章,大家可以看看: CSS BEM 书写规范...如何看待 CSSBEM 命名方式?...F12开发者工具 同理,改变底部button颜色为我们主体色也是如此: ? override.css内容 然后我们在main.js中引入这个css文件 ?...main.js中引入override.css 4、小结 这就是我们地址列表了基本结构了,借助vantAddressList组件,我们可以快速完成地址列表功能;其次就是改变主题颜色了,你也可以自己去官网看看其他方法...参考学习 有赞Vant组件库引入 AddressList地址列表 CSS BEM 书写规范 如何看待 CSSBEM 命名方式?

87040

CSSBEM 命名规范

前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)简写,由 Yandex 团队提出一种前端 CSS 命名方法论...如: .sub-block__element {} .sub-block--modifier {} 1.2 BEM 命名法好处 BEM关键是,可以获得更多描述和更加清晰结构,从其名字可以知道某个标记含义...button> div> 复制代码 这种写法从 DOM 结构和类命名可以了解每个元素意义,但无法明确其真实层级关系。...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 一个槽点是,命名方式长而难看,书写不雅。相比 BEM 格式带来便利来说,我们应客观看待。...BEM 格式 在当前流行 Vue.js / React / Angular 等前端框架中,都有 CSS 组件级作用域编译实现,其基本原理均为利用 CSS 属性选择器特性,为不同组件生成不同属性选择器

2.6K31

精读《css-in-js 杀鸡用牛刀》

本期精读文章是:css-in-js 杀鸡用牛刀 1 引言 继 精读《请停止 css-in-js 行为》 这篇文章之后,我们又读了一篇抵制 css-in-js 文章,虽然大部分观点都有道理,但部分存在可商榷之处...如果样式与结构松耦合,一套看似相似的元素,可能拥有完全不同底层结构。然而交互必须与结构紧耦合,因为交互依赖于结构。...这样好处在于避免了 class 之间冗余,让我们更容易创建可复用 class,也不会在命名纠结。...,即便在 css-in-js 设计中,也可以参考此模式定义结构。...虽然作者呼吁我们不要只顾着 css-in-js,要放眼看看 OOCSS, SMACSS, BEM, ITCSS, 和 ECSS 等基于原生 css 解决方案,但我觉得把这些思想运用到 css-in-js

73120

在大型项目中组织CSS

并且,像这样样式定义会应用到父元素内部任何元素——而不仅仅是你写在Sass里那个层级。 对CSS选择器嵌套你所做是用 微妙 和 脆弱方式绑定CSS和HTML结构。...有点反直觉是,这会产生完全扁平css结构——没有嵌套——只有顶层类名定义。 作为法则二一个例外,我们允许 .block--modifier 形式类名。...这就允许我们只要指定区块修饰符——也就是正在编辑内容—— 不用在区块内所有子元素重复修饰符(BEME)。...为了更好地理解类似BEM命名方式,前往查看Harry RobertsCSS指南BEM命名部分。(需要提到是,我们发现Harry实际建立了一套跟我们类似的命名方案。)...展望 似乎还没有人真正找到处理CSS最佳方式,看着Hack News精选这篇文章,我对CSS现状多少有点失望,本来我们可以做得更好。

78320

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

CSS 在刚开始学习时候看起来非常简单。毕竟,它仅仅就是些样式而已,事实是这样吗? 但是,随着你不断了解。很快,你会发现 CSS 没你想象那么简单,它复杂且有深度。...编写富有语义 CSS 意味着在选择类型时候,类名要传达出结构和功能信息。类名要很容易被理解。确保它们不要太具体、太特殊。这样,你就可以复用它了。...采用统一命名规范 目前有几十个不同版本 CSS 命名规范。有些人对他们选择命名规范极其笃定,认为他们比别人更好。事实,不同的人喜欢不同命名规范。...请敞开心扉去学习新标准,用不同思维去思考 CSS 。 你可以在《深入学习 BEM 语法》、《BEM 101》和《BEM 简介》看到更多关于 BEM 信息。...更多有关组织文件结构CSS 架构文章,详见《Sass 审美 1:架构和组织样式文件》和《可扩展和可维护 CSS 架构》。

40810

这些 CSS 命名规范将省下你大把调试时间(文末有福利)

向 5 岁小孩解释 BEM 规范 BEM 规范试图将整个用户界面分解成一个个小可重复使用组件。...这就是 BEM 基本用法。 个人来说,我在小项目中一般只用连字符分割法来写类名,在用户界面更复杂项目中使用 BEM 方法。 为何要使用命名规范?...能正确命名 CSS类名可以让你代码变得更易理解和维护。 如果你选择 BEM 命名规范,在看标记语言(markup)时就更容易看清各个设计组件/区块之间关系。 感觉不错吧?...为了防止这种情况发生,开发者们想了很多不同策略。 1. 使用 js- 类名 一种减少这类 bug 方法是使用 js- 类名命名方法。...正如这条 Twitter 所说。 附加提议:写更多 CSS 注释 这跟命名规范毫无关系,但也能帮你节省时间。

913100

编写模块化CSS:命名空间

上周,我分享了如何使用BEM创建一个合理CSS架构。 虽然BEM很棒,但它只是解决方案一部分。 还有另一部分我还没有提到 —— 命名空间。...如果我们只有BEM,有太多可能因素导致。 这就是之所以引入命名空间。它可以帮助你创建一个结构来控制CSS属性写入。 如果您遵循惯例,您将能够无惧副作用地编写CSS。 这里是一个示例。...如果您还没有深入了解,那得知道OOCSS背后主要思想是表层和结构分离。 换句话说,影响块或其元素位置属性应该被抽象为一个单独类用于重复利用。 在CSS中,定位块行为也称为布局块。...那么,看看在这种情况下插入所有“必需”BEM class情况下会发生什么,你会注意到“HTML开始膨胀”: ? 最后一点:Harry使用对象命名空间(.o-)来表示这样结构布局。...以下是我样式表中典型.o-button对象示例: ? 虽然对象不能影响外部结构,但它改变其内部结构是很合理。 例如,我提到.o-countdown计时器可以具有以下HTML和CSS: ?

2.6K70

浅谈 Css 规范

块(block)是 BEM 核心部分,它定义了一个 HTML 元素基本结构和行为。块可以使用大写字母命名,例如 .Header、.Main、.Footer 等。...可读性和可维护性: BEM 使用简洁明了命名约定,使得 CSS 代码易于理解和维护。 增强可扩展性: BEM 结构使得页面元素易于扩展和修改,不会影响其他部分样式。...样式层级深: 由于 BEM 嵌套结构,可能导致样式层级较深,增加了 CSS 优先级和复杂度。 维护成本: 对于初学者来说,需要一定时间来适应和理解 BEM 命名规范,可能增加学习和维护成本。...OOCSS 基本概念 OOCSS(Object-Oriented CSS)即面向对象 CSS,它借鉴了 OOP(面向对象编程,OOP 已在 JavaScript 和 后端语言中得到广泛使用,不止是 JS...一个项目的新手可以重用他们前辈已经抽象出来东西,而不是堆积在 CSS 。 维护性: 添加或重新排列 HTML 标记不再需要您重新考虑整个 CSS 流程。这对于正在进行大型项目尤其有用。

7110

【React】:CSS 模块化

为什么 CSS 要模块化? 1.1. 难以理解 1.2. 难以维护 2. 什么是CSS模块化? 3. CSS模块化方案——BEM 4. CSS模块化方案——CSS In JS 4.1....CSS模块化方案——BEM BEM,三个字母分别代表 Block、Element、Modifier,BEM 也是在 2009 年提出,起源于 Yandex(可以说是俄语版 Google)。...CSS模块化方案——CSS In JS CSS-in-JS 是一种编程思想,即:用 JS 语言来写 CSS,而不是独立为一些 .css,.scss 或者 less 之类文件,借助 JS 语言特性来为...CSS-in-JSCSS-in-JS 有很多实现方案,常见有: styled-components:https://styled-components.com/ emotion:https:/...with BEM: https://www.integralist.co.uk/posts/bem/#4 -------------------------------------CSS in JS

1.3K20

CSS Modules入门教程

/B.js' element.innerTHML = 'xxx' 由于样式是统一加载到入口中,因此实际样式合在一起(这里暂定为mix.css)显示顺序为: /* mix.css */ /* a.css.../font' 可以实际编译之后,终究还是一个文件,因此不可避免会出现冲突样式 BEM(Block Element Modifier) There are only two hard problems...BEM(Block-Element-Modifier) 如何看待 CSSBEM 命名方式?...BEM解决了模块复用、全局命名冲突等问题,配合预处理CSS使用时,也能得到一定程度扩展,但是它依然有它问题: 对于嵌套过深层次在命名上会给需要语义化体现元素造成很大困难 对于多人协作,需要统一命名规范...,这同样也会造成额外effort CSS Modules 说了这么多,终于要到正文了 什么是CSS Modules 根据CSS Modulesrepo的话来说是这样CSS files in

2.5K40

TDesign 组件库技术方案指北

,组件抽象逻辑代码 组件库 UI 开发内容,既 HTML 结构CSS 样式(React/Vue 等多技术栈共用)TDesign 大部分技术栈仓库都参照了以上结构,微信小程序和 Flutter 等仓库因为技术栈特性限制结构略有不同...所有组件样式均采取 Less + BEM + CSS Variables 方式来开发和维护。...BEM出于降低贡献者门槛等方面的考虑,TDesign 没有额外引入插件或包来处理 CSS 全局污染问题,也没有选择 CSS in JS 等方案,这会在一定程度上降低代码可读性,增加贡献者心智负担。...在 CSS 样式命名我们遵循 BEM 命名规范:http://getbem.com/通过 BEM 很大程度上已经可以有效避免组件间样式相互污染,减少嵌套层级:BEM 使用分隔符将类名区隔成三个部分:...,都是主要维护单一框架,字节开源 Semi Design 采用了 Fundation 模式:大致实现思路是通过抽象通用、无框架、无 UI 操作类:Fundation,然后执行不同框架实现 Adapter

3K40

什么鬼,又不知道怎么命名class了

BEM 这个估计地球做前端都知道吧,实在是太火了,所以不用来解释了。优点就是你只管写你自己,99.99%几率不会去干掉别人样式,class实在太长了,能一样那得多高几率啊。...,如布局,js操作类等;而BEM我们同样可借鉴其思想,如 .class.class--name使用 --表示特殊化,以区分 -。...操作类统一加上 js-前缀 不要超过四个class组合使用,如 .a.b.c.d 关键词及规则都有了,现在可以进入本文核心核心,实战操作。...实战操作 以布局入手,大概结构如下: header.header>.inner-centersection.section-feature>.inner-center // ifsection.section-main...,以联系机构为例: 使用 ul>li结构,所以样式是另外一个独立范围,不嵌套在之前 .aside-block里面,html及css代码如下: ul.contact-list li

21710
领券