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

修饰符的CSS BEM子项

修饰符是CSS BEM (Block-Element-Modifier) 模块化命名方法中的一个概念,它用于对特定块或元素进行样式修饰。

CSS BEM是一种前端开发规范,用于组织和命名CSS类,以实现模块化和可维护的代码。它的命名约定由三个部分组成:块(Block)、元素(Element)和修饰符(Modifier)。

在CSS BEM中,修饰符用来定义一种状态或变体,它在块或元素的基础样式上提供了额外的样式修饰。通过添加修饰符类,可以在不改变原有样式的情况下改变块或元素的外观或行为。

修饰符的类名通常由块或元素的类名加上双短横线(--)和修饰符名称组成。例如,如果有一个块类名为 "header",并且需要添加一个修饰符来表示其变体样式,可以使用类名 "header--variant"。

修饰符在前端开发中有很多应用场景,例如:

  1. 样式变化:通过为块或元素添加修饰符类,可以轻松地改变它们的外观,例如改变颜色、背景、字体大小等。
  2. 状态切换:通过添加修饰符类,可以在不同的状态间切换,例如显示/隐藏、禁用/启用等。
  3. 响应式设计:使用修饰符可以根据不同的屏幕尺寸或设备类型为块或元素应用不同的样式。

腾讯云的相关产品中,与CSS BEM修饰符概念直接相关的可能是其Web开发相关服务,如腾讯云Web+或腾讯云Web应用防火墙(WAF)。这些产品可帮助开发者进行Web应用的构建和保护,但具体与CSS BEM修饰符的相关性较小。

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

相关·内容

CSS规范--BEM入门

这段时间在整理前端部分代码规范,前面提到CSS规范里面会涉及到选择器命名,就参考BEM命名规范,内容整理如下,供大家参考,请斧正!...如大家有兴趣,可移步至CSS编码规范 BEM是由Yandex公司推出一套CSS命名规范,官方是这么描述它BEM是一种让你可以快速开发网站并对此进行多年维护技术。...BEM解决问题 css样式应用是全局性,没有作用域可言。...BEM意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出一种前端命名方法论。...这种巧妙命名方法让你CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多信息,它们用于一个团队开发一个耗时大项目。

1.2K20

CSSBEM 命名规范

前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)简写,由 Yandex 团队提出一种前端 CSS 命名方法论...在 css 定义时,也必须依靠层级选择器来限定约束作用域,以避免跨组件样式污染。...命名方式,模块层级关系简单清晰,而且 css 书写上也不必作过多层级选择。...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 一个槽点是,命名方式长而难看,书写不雅。相比 BEM 格式带来便利来说,我们应客观看待。...BEM 格式 在当前流行 Vue.js / React / Angular 等前端框架中,都有 CSS 组件级作用域编译实现,其基本原理均为利用 CSS 属性选择器特性,为不同组件生成不同属性选择器

2.7K31
  • CSS @scope 如何取代 BEM

    即将在 Chrome 浏览器中实施 @scope 允许在样式表中对样式进行块级作用域划分,从而进一步提高了 BEM 性能。这将使样式表更易于维护,同时对 CSS 级联进行更严格控制。...CSS @scope 是什么? 在即将发布 Chrome 118 版本中,@scope 特性创建了 CSS 样式块级作用域。...这给了开发者对 CSS 样式更多控制权,因为我们现在可以在 CSS 文件中直接为视图不同部分明确定义作用域。...最终注意到它是如何使样式更简洁、更易读。 @scope 与 BEM 相比其他优势 除了将 BEM 重构为 @scope 优势外,使用 @scope 还可以更好地控制 CSS 级联。...通过 Bram.us 原文中图表,我们可以看到 CSS 级联评估选择器和样式顺序: 如果不使用 @scope ,CSS 级联将直接从 "特定性 "转为 "外观顺序"。

    11410

    面试官:了解 CSS BEM规范?

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

    55020

    CSS命名法BEM与scoped、module

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

    66920

    CSS架构之BEM设计模式

    为什么需要CSS架构?其实在日常开发CSS当中,会遇到许多问题,使用设计模式能够很好解决。例如在日常开发项目,需要组件化时,组件内部class样式类管理就非常杂乱。...CSS架构也能让html与css更好解耦,能更好抽取样式中可复用部分,使你html代码更具语义,也符合了HTML5中想让日常开发更具有语义化理念。...BEM简介BEM就是:B代表:Block(块),独立实体,独立意义,每个页面都可以看做是多个Block组成,见下图1-1;E代表:Element(元素),block 一部分,没有独立意义,是组件下一个元素...,多个元素形成一个组件,见下图1-2;M代表: Modifier (修饰符),block 或 element 上标记,是描述Block或Element属性或状态,同一Block或Element可以有多个...BEM全称BlockElementModifier是由Yandex(俄罗斯最著名互联网企业)开发团队提出前端开发理论。

    45620

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

    BEM 是 Block(块) Element(元素) Modifier(修饰器)简称 使用BEM规范来命名CSS,组织HTML中选择器结构,利于CSS代码维护,使得代码结构更清晰(弊端主要是名字会稍长...) 如何使用BEM 一个独立(语义上或视觉上),可以复用而不依赖其它组件部分,可作为一个块(Block) 属于块某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征...(或者SCSS编译后CSS)中选择器嵌套不超过2层,增加效率和复用性,减少选择器之间耦合度 比较常见嵌套情景:需要通过块状态对内部元素进行调整时 .search-form { position...,尽量按照 BEM三层来 /* 避免这样做 .search 不是一个独立块 */ .search { /* 应该把这个块提取出来 */ &-form { &__button...可转换成设置对应 元素来表现,如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰,但有时候会产生代码冗余

    98161

    关于BEM反思

    前几天我遇到了Spatie指南网站。 在CSS部分,我发现了几个让我想到部分。...逻辑会说你会用这个孙子方法。 我经验告诉我,这导致不必要长类名(BEM已经有错,并且没有必要尝试在CSS中反映HTML结构。 解决这个问题花了我很长一段时间。...在我看来更好是只给你孙子元素们一个双重下划线符号加上用不同名字。 如果你发现你结构太深,你可能需要定义一个新组件。 缩短修饰符长度 在BEM中,修饰符类用两个连接符表示。...基本思想是你用“ - ”编写修饰符,并且他们有一个责任,即他们应该只修改一件事情。 使用这种做法可以缩短HTML,但我认为这是有问题BEM是如此强大之处在于重构。...我希望这篇文章不被视为直接批评他们CSS指南,而是作为对我们所做选择讨论一种方式。 翻译自Overthinking BEM

    62320

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

    说起 CSS 命名规范,大家应该都很熟悉,或者应该听说过 BEMBEM 是由 Yandex 团队提出一种 CSS Class 命名方法,旨在帮助开发人员创建更好且结构一致 CSS 模块。...BEM 将页面的类名分为块(Block)、元素(Element)、修饰符(Modifier)。...另外,现在网上已经有非常多文章在介绍 BEM 了,耐心找,肯定能找到优秀教程。今天文章会分享比较少人介绍两种 CSS 方法论:SUIT CSS 和 SMACSS。...命名规则: --组件名[-后代名|--修饰符]-(CSS属性|变量名)。...SUIT CSS 可以说在 BEM 基础上进行了改进,特别是去除了双下划线设计,在观感上就比 BEM 美观了许多,而且各种名称都是通过驼峰方式命名,省略了部分短横线,这让 SUIT CSS 类名长度上也会比

    97010

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

    向 5 岁小孩解释 BEM 规范 BEM 规范试图将整个用户界面分解成一个个小可重复使用组件。...比如说: .stick-man__head { }.stick-man__arms { } .stick-man__feet { } M 代表修饰符(Modifiers) M 在 BEM 命名法中代表修饰符...如果使用 BEM 的话,这些修饰符类名都可以通过在两条连字符后加上元素名来产生。...假如我们这个火柴人拥有另一个不一样头部大小呢? 一次元素被加上了修饰符。记住,元素指一个整体封装区块中一个子组件。...能正确命名 CSS类名可以让你代码变得更易理解和维护。 如果你选择 BEM 命名规范,在看标记语言(markup)时就更容易看清各个设计组件/区块之间关系。 感觉不错吧?

    927100

    从element-ui源码来看BEM实现

    以前看过一些CSS编码规范,也照着规范编写代码,但是还是觉得自己CSS编码风格不是很好,在平时开发中使用各个知名组件库时候,发现现在挺多组件库都是BEM命名风格了,于是找了比较知名element...饿了么前端组件库源码,想从看饿了么组件库代码入手,学习学习大厂CSS BEM规范代码书写风格。...type-block__element_modifier 以上描述是从腾讯前端规范库中找到,简单来说理解了块、元素、修饰符三个分类之后,就能大致理解BEM代码是什么样结构了,可是了解结构是一方面...我在element组件库中mixins.scss文件中找到了想要答案。 接下来我要讲就是如何利用sass,编写具有可读性和可维护性BEM规则css代码。...利用刚刚介绍函数,以及块、元素、修饰符实现代码,在sass中已经能非常高效率并且优雅基于BEM规范代码了。

    1.9K30

    BEM 简介

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

    80240

    浅谈 Css 规范

    BEM(Block-Element-Modifier)是一种 CSS 模块化方法,旨在简化 CSS 编写并提高代码可读性和可维护性,它将 HTML 元素划分为三个部分: 块(block)、元素(element...修饰符(modifier)是针对块或元素特定状态或行为进行配置方法。...使用小写字母命名元素和修饰符修饰符必须紧跟着元素或块。 修饰符可以使用中划线(_)或破折号(-)进行命名。...可读性和可维护性: BEM 使用简洁明了命名约定,使得 CSS 代码易于理解和维护。 增强可扩展性: BEM 结构使得页面元素易于扩展和修改,不会影响其他部分样式。...样式层级深: 由于 BEM 嵌套结构,可能导致样式层级较深,增加了 CSS 优先级和复杂度。 维护成本: 对于初学者来说,需要一定时间来适应和理解 BEM 命名规范,可能增加学习和维护成本。

    9410

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

    什么是 BEM 命名规范 BEM 由 Yandex 团队提出一种前端 CSS 命名方法论。...BEM 是 BlockElementModifier 缩写 ,其中B 表示块(block)、E 表示元素(element)、M 表示修饰符(modifier)。 这三个部分通常使用__ 与--连接。...即: .块__元素--修饰符{} Block:代表了一个独立块级元素,可以理解为功能组件块。...为什么要用 BEM? 性能 CSS 引擎查找样式表,对每条规则都按从右到左顺序去匹配,以下这段代码看起来很快,实际上很慢。...通过浏览HTML代码中class属性,你就能够明白模块之间是如何关联:有一些仅仅是组件,有一些则是这些组件子孙或者是元素,还有一些是组件其他形态或者是修饰符

    79610

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

    BEMCSS BEM 分别代表着:Block(块)、Element(元素/子块/组成部分)、Modifier(修饰符),是一种组件化 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。...规则 BEM命名模式在社区中有着不同方式,以下为 Yandex 团队所提出命名规则为(本文中代码使用该规则): ....[Block 块]__[Element 元素]_[Modifier 修饰符] 不同命名模式,区别在于BEM之间连接符号不同,依个人而定: ....Modifier(修饰符) 定义块和元素外观、状态或类型。 例:color、disabled、size 规则 修饰符需能直观易懂表达出,其外观、状态或行为。修饰符用_连接块与元素。...个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长,但经过 GZIP 等压缩后,文件体积其实并无太大影响。

    71230

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

    for CSS (SMACSS) Atomic 我最喜欢命名规范是 BEM。...BEM 代表块(block)、元素(element)和修饰符(modifier)。Yandex,在俄罗斯相当于谷歌搜索引擎,为了解决他们 CSS 代码库中缩放问题而提出了它(它指BEM)。...元素(Elements)是块子模块。修饰符(modifiers)代表不同状态。...如果你想要更改按钮状态,我们可以为按钮增加一个修饰符,例如 active 。 关于命名规范要记住一件事是,无论你喜欢哪种命名规范,你会经常继承或者工作在不同标准代码库上。...请敞开心扉去学习新标准,用不同思维去思考 CSS 。 你可以在《深入学习 BEM 语法》、《BEM 101》和《BEM 简介》上看到更多关于 BEM 信息。

    44410

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

    BEM BEM 是一种非常有用、强大且简单命名约定,可以说是一个CSS命名规范,也可以说是一种思想。它使前端代码更易于阅读和理解、更易于使用、更易于扩展、更健壮和明确,并且更加严格。...BEM意思就是块(block)、元素(element)、修饰符(modifier),是由 Yandex 团队提出一种前端命名方法论。....block 块下元素 ,最后 .block--modifier 代表是 .block 块修饰符。...- 符号,这个是为了让你自己视图块可以用单个连字符来界定,__ 代表元素,-- 代表修饰符。...参考 BEM[2] AMCSS[3] BEM —— 源自YandexCSS 命名方法论[4] 浅谈CSS模块化[5] Reference [1]Tailwind CSS: https://tailwindcss.com

    72220
    领券