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

使用javascript解析BEM类选择器的正则表达式

BEM(Block Element Modifier)是一种用于命名CSS类的方法,旨在提高代码的可读性和可维护性。BEM类选择器的正则表达式可以使用JavaScript来解析。

BEM类选择器的正则表达式可以如下所示:

代码语言:javascript
复制
/^(?:(?:[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)\s*)+(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?$/

这个正则表达式可以解析以下几种情况的BEM类选择器:

  1. Block:由一个或多个由连字符分隔的单词组成,例如:blockblock-name
  2. Element:位于Block之后,由两个下划线和一个或多个由连字符分隔的单词组成,例如:block__elementblock__element-name
  3. Modifier:位于Block或Element之后,由两个连字符和一个或多个由连字符分隔的单词组成,例如:block--modifierblock__element--modifier

这个正则表达式的优势在于可以准确匹配符合BEM命名规范的类选择器,确保代码的一致性和可读性。

BEM类选择器的应用场景包括但不限于:

  1. Web开发:BEM类选择器可以帮助开发者更好地组织和管理CSS类,提高代码的可维护性和可重用性。
  2. 前端框架:许多流行的前端框架(如React、Vue.js)都支持BEM类选择器,可以方便地应用于组件化开发。
  3. 多人协作:BEM类选择器的规范化命名方式可以减少团队成员之间的命名冲突,提高协作效率。

腾讯云提供了一系列与Web开发相关的产品,其中包括:

  1. 云服务器(CVM):提供可扩展的虚拟服务器,适用于部署Web应用程序。
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的关系型数据库服务,适用于存储Web应用程序的数据。
  3. 云存储(COS):提供安全、稳定的对象存储服务,适用于存储Web应用程序的静态资源。
  4. 云函数(SCF):提供事件驱动的无服务器计算服务,适用于处理Web应用程序的后端逻辑。

你可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

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

相关·内容

【编码规范】Airbnb CSS u002F Sass 编码风格指南

目录 术语 规则声明 选择器 属性CSS 格式 注释 OOCSS 和 BEM - ID 选择器 JavaScript 钩子 - 边框Sass 语法 排序 变量 Mixins 扩展指令...选择器可以匹配 HTML 元素,也可以匹配一个元素名、ID, 或者元素拥有的属性。...名建议使用破折号代替驼峰法。如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时,每个选择器独占一行。...想要了解关于这个主题更多内容,参见 CSS Wizardry 文章,文章中有关于如何处理优先级内容。 JavaScript 钩子 避免在 CSS 和 JavaScript 中绑定相同。...我们推荐在创建用于特定 JavaScript 名时,添加 .js- 前缀: Request to

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

    总的来说,这些 CSS 命名规范试图解决 3 问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 CSS 名称可以看出它们之间联系 不知你是否见过这样名...如果使用 BEM 命名规范的话,这些元素名都可以通过在两条下划线后加上元素名称来产生。...如果使用 BEM 的话,这些修饰符名都可以通过在两条连字符后加上元素名来产生。...这就是 BEM 基本用法。 个人来说,我在小项目中一般只用连字符分割法来写名,在用户界面更复杂项目中使用 BEM 方法。 为何要使用命名规范?...为了防止这种情况发生,开发者们想了很多不同策略。 1. 使用 js- 名 一种减少这类 bug 方法是使用 js- 名命名方法。

    927100

    编写模块化CSS——BEM

    BEM 中,块被写为像 class 名字一样,如下所示: ? BEM 使用 .form 而不是 元素原因是因为 允许无限可重用性,而即使是最基本元素也可能改变样式。...如果设置了一个 .button 按钮,则可以在任何 元素上选择是否使用 .button 。...即将分享第二种方法是使用普通 CSS,所以你也可以使用它! 方法 2:使用 CSS 属性选择器 第二种方法 使用CSS属性选择 器执行稍微更复杂选择。...现在,这不是你通常看到选择器,所以我来解释一下。 第一部分( [class*='button'] )告诉解析器查找包含文本 button 所有 class。...如果你使用 BEM 元素,则可以使用优先级为 10 而不是 20 选择器来为 .form__row 提供样式。

    2.1K70

    大型项目中结构化CSS

    Peergrade.io处理CSS方式 规则1: 使用前缀 (class名) 在Peergrade.io中我们在所有样式名中使用前缀 .pg。 在你CSS代码中如果不使用前缀可能会带来些麻烦。...你可以通过subtle 和 brittle ways 在CSS中通过做选择器嵌套来绑定你HTML结构。...规则3: 构建组件时用边界元法(BEM)命名 尽可能试着用BEM命名去创建独立组件,我们不必完全按照BEM规范 - 只是用命名组合,这意味着名以如下方式命名: .block__element--...为了更好理解BEM体系,可以转向这里 - 由Harry Roberts写CSS指南 :BEM形式命名。...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比无穷隧道特效 一个治愈JavaScript疲劳学习计划 全栈工程师技能大全

    1.2K40

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

    「优点:」 BEM 优点在于所产生 CSS 名都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来复杂属性级联问题。...而且需要巧妙运用,因为特定要求(强调重复使用选择器,避免使用ID选择器)如果运用不得当,反而可能会造成后续维护困难,所以使用此方案最好写上说明文档。...「优点:」 属性值灵活性,相当于通过属性值来增加命名空间,减少全局名称空间,以便更好将 CSS 模块化。 「缺点:」 属性选择器性能和名相比差别很大,过度使用可能会产生可感知性能问题。...功能相当于一个拥有多个样式集合,使用时要按需着重设计。...我们知道,CSS 选择器解析规则是层级越深,比较次数也就越多,会影响整个页面的渲染。

    72220

    HTML5中jQuery选择器querySelector使用

    这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用差不多语法,都是接收一个字符串参数,这个参数需要是合法CSS选择语法。...;elementList = document.querySelectorAll('selector1,selector2,...'); 使用这两个方法无法查找带伪状态元素,比如querySelector...querySelector 该方法返回满足条件单个元素。按照深度优先和先序遍历原则使用参数提供CSS选择器在DOM进行查找,返回第一个满足条件元素。...document.getElementById返回便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点...也就是说经历两次转义,一次是字符串当中,一次是querySelector解析参数时。 理解这点后,可以来看一个更有趣例子了。比如我们要选择名里面含反斜杠元素。是的,我们需要一共使用四个反斜杠!

    3.3K70

    js 怎么使用正则表达式-理解Javascript正则表达式

    本文基于正则表达式,结合笔者个人思考和社区内一些优秀正则表达式文章来对正则表达式进行讲解。   ...中正则表达式使用方法   简单介绍下,在中使用正则表达式有两种方式: 构造函数:使用内置RegExp构造函数;字面量:使用双斜杠(//);   使用构造函数:    var regexConst...= new RegExp('abc');   使用双斜杠:   var regexLiteral = /abc/;   匹配方法   中正则表达式对象主要有两个方法,test和exec:   test...这里有一种更简单实现方案js 怎么使用正则表达式,就是指定字符范围,比如[a-h]就是匹配字母a到字母h之间所有的字母,除了小写字母还可以匹配数字和大写字母,[0-9]匹配0到9之间数字js 怎么使用正则表达式...,还提供了三个比较常用规则更为方便写法:   使用以上内容匹配普通字符已经可以满足需求了,但像换行符、换页符和回车等特殊符号以上特殊字符无法满足需求,因此正则表达式还提供了专门用来匹配特殊符号特殊字符

    3K30

    结构伪选择器分类以及使用语法

    结构伪选择器,可以根据元素在文档中所处位置,来动态选择元素,从而减少HTML文档对ID或依赖,有助于保持代码干净整洁。...选择父元素下同种标签倒数第一个元素,相当于E:nth-last-of-type(1) E:nth-of-type(n) 与:nth-child(n)作用类似,用作选择使用同种标签第n个元素 E...:last-child或E:nth-child(1):nth-last-child(1) E:only-of-type 选择父元素下使用同种标签唯一子元素,相当于E:first-of-type:...E:nth-child(odd) 选择是奇数项,而使用:nth-last-child(odd) 选择却是偶数项 结构伪选择器很容易遭到误解,需要特别强调。...还需要注意是,结构伪选择器中,子元素序号是从 1 开始,也就是说,第一个子元素序号是 1,而不是 0。换句话说,当参数 n 计算结果为 0 时,将不选择任何元素。

    48220

    使用 Proxy 来监测 Javascript

    使用 Proxy 来调试 为了在实践中展示 Proxy 能力,我创建了一个简单监测库,用来监测给定对象或,监测项如下: 函数执行时间 函数调用者或属性访问者 统计每个函数或属性被访问次数。...这是通过在访问任意对象、、甚至是函数时,调用一个名为 proxyTrack 函数来完成。...在 React 中使用 proxyTrack 因为 React 组件实际上也是,所以你可以通过 proxyTrack 来实时监控它。...,所以我们给这个原型创建了个代理,并且创建了个构造函数拦截器。...别忘了,即使你在原型上定义了一个属性,但如果你再给这个对象赋值一个同名属性,JavaScript 将会创建一个这个属性本地副本,所以赋值改动并不会改变这个其他实例行为。

    87920

    使用 Proxy 来监测 Javascript

    , cyuamber 使用 Proxy 来监测 Javascript ?...使用 Proxy 来调试 为了在实践中展示 Proxy 能力,我创建了一个简单监测库,用来监测给定对象或,监测项如下: 函数执行时间 函数调用者或属性访问者 统计每个函数或属性被访问次数。...这是通过在访问任意对象、、甚至是函数时,调用一个名为 proxyTrack 函数来完成。...在 React 中使用 proxyTrack 因为 React 组件实际上也是,所以你可以通过 proxyTrack 来实时监控它。...别忘了,即使你在原型上定义了一个属性,但如果你再给这个对象赋值一个同名属性,JavaScript 将会创建一个这个属性本地副本,所以赋值改动并不会改变这个其他实例行为。

    1.1K20

    CSS规范--BEM入门

    除非使用BEM让代码增加了不必要维护困难,或者这么做确实让代码更难读了,那么你在使用它之前就要三思而行了。...什么时候用BEM? 当你真正使用BEM时候,重要是,请记住你没必要真的在每个地方都用上它。...关于原子类(短)与BEM BEM可以不需要用到原子类,但是如果已经引入了类似Bootstrap框架,也没必要强制避免使用原子类,比如pull-right、ellipsis、clearfix等等,这些非常实用...BEM禁止使用子代选择器,以上是原因之一。子代选择器不好地方还在于,如果层次关系过长,逻辑不清晰,非常不利于维护。...如果我们用BEM,要覆盖样式很简单:找到要覆盖样式元素,得知它名,在媒体查询中,用它名作为选择器,写下覆盖样式,样式就覆盖成功了,不需要担心前面样式权重过大。

    1.2K20

    ThreadLocal 源码解析以及使用原理

    value hash (注意 此map结构不包含next引用 所以不是使用链地址方法)。...解决了:基于级别的变量定义,每一个线程单独维护自己线程内变量值(存、取、删功能) 根据源码,画出原理图如下: ?...ThreadLocalMap是包私有的,允许在Thread中声明字段。为了帮助处理非常大且长时间使用,哈希表entry使用了对键弱引用。有助于GC回收。...关于引用,预留飞机票 public void clear() { this.referent = null; } 1.3 功能测试 开启2个线程,每个个线程都使用级别的threadLocal,...正常情况下,子线程变量值与父线程相同;然而,子线程可复写childValue方法来自定义获取父变量。

    64910

    浅谈 Css 规范

    避免样式冲突: BEM 命名约定避免了样式冲突,每个块和元素都有独立命名空间,不会受到外部样式影响。 缺点: 命名冗长: BEM 命名规范较为严格,可能导致名过长,增加了代码量和阅读难度。...OOCSS 基本概念 OOCSS(Object-Oriented CSS)即面向对象 CSS,它借鉴了 OOP(面向对象编程,OOP 已在 JavaScript 和 后端语言中得到广泛使用,不止是 JS...,使用 OOCSS的话,需要创建更多 “原子类”,并且每个样式对应一个,这样可以重复使用这些样式,避免写相同样式。...SMACSS 将 CSS 代码分为五个主要类别: 基础(Base)是 HTML 元素定义默认样式,可以包含属性、伪选择器,如 reset.css、normailze.css 之类格式化元素样式 CSS...命名规则 SMACSS 推荐使用前缀来区分不同部件: 基础规则是直接作用于元素,因此不需要前缀,一般使用元素、属性、伪选择器。不应该出: class、ID、!important 等。

    9410

    CSS Modules入门教程

    : 10px 20px; font-weight: bold; font-size: 2rem; } 在上一个元素显示上使用了7个选择器,总结起来会有以下问题: 根据CSS选择器解析规则可以知道...当然在更多情况下,可能嵌套层次还会更深,另外,这里单单用了选择器,而采用选择器时候,可能对整个网页渲染影响更重。...渲染规则可以参看这篇文章探究 CSS 解析原理 会带来代码冗余 由于CSS不能使用类似于js模块化功能,可能你在一个css文件中写了一个公共样式,而你在另外一个css也需要这样一个样式,这时候...BEM解决了模块复用、全局命名冲突等问题,配合预处理CSS使用时,也能得到一定程度扩展,但是它依然有它问题: 对于嵌套过深层次在命名上会给需要语义化体现元素造成很大困难 对于多人协作上,需要统一命名规范...Getting Started with CSS Modules Get BEM CSS Modules 用法教程 CSS Modules使用详解 探究 CSS 解析原理

    2.6K40

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

    在 css 定义时,也必须依靠层级选择器来限定约束作用域,以避免跨组件样式污染。...这里刚开始使用 bem 时候容易犯一个问题,就是把 ul 和 li 样式写成 card__content__list 和 card__content__list__item 因为这样更能体现层级关系...module.exports = {}; 为了让小伙伴编写符合 Bem 规范,这里我们使用 stylelint-selector-bem-pattern 插件,它结合了插件 postcss-bem-linter...,因为该插件未给源插件默认指定 'preset': 'bem', /** * 自定义模式规则 * 指定组合选择器检查规则....Component { display: block; } 总结 BEM 最难部分之一是明确作用域是从哪开始和到哪结束,以及什么时候使用或不使用它。

    79710
    领券