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

我可以在BEM CSS中的修饰符中嵌套块或元素吗?

在BEM CSS中,修饰符(Modifier)是用来修改块(Block)或元素(Element)的外观或行为的。根据BEM的规范,修饰符不能嵌套块或元素。

BEM(Block Element Modifier)是一种命名约定,用于组织和管理CSS代码。它的核心思想是将页面分解为独立的块,每个块都有自己的元素和修饰符。块是页面上的独立功能单元,元素是块的组成部分,而修饰符则用于修改块或元素的外观或行为。

在BEM中,块和元素可以嵌套,但修饰符不能嵌套。这是因为修饰符的作用是对块或元素进行修改,而不是创建新的块或元素。通过将修饰符应用于块或元素,可以改变它们的外观或行为,而无需创建新的块或元素。

举个例子,假设我们有一个块叫做"button",它有一个元素叫做"icon",我们可以这样表示:

代码语言:txt
复制
<div class="button">
  Button
  <span class="button__icon"></span>
</div>

如果我们想要给按钮添加一个带有不同颜色的修饰符,可以这样表示:

代码语言:txt
复制
<div class="button button--blue">
  Button
  <span class="button__icon"></span>
</div>

在上面的例子中,".button--blue"是一个修饰符,它修改了按钮的外观。

总结起来,根据BEM的规范,修饰符不能嵌套块或元素。它们用于修改块或元素的外观或行为。如果需要创建新的块或元素,应该使用不同的类名来表示。

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

相关·内容

怎样才能写出更好 CSS

让我们开门见山:编写优秀 CSS 代码是件十分痛苦事情。很多开发人员都不想做 CSS 开发。你让干什么都行,但是 CSS 还是算了吧。 创建应用时候,从来都无法从 CSS 享受到乐趣。...BEM 是一种命名约定,是英文 Block Element Modifier(元素修饰符缩写。 这种方法可以使我们代码结构化,并提高模块化和可重用性。现在让我们说一说什么是元素修饰符。...这些我们称之为修饰符。它们是元素标志,它们用于改变行为,外观等等。...命名:名称元素名称+ -- +修饰符名称:.block__element--修饰符,.--修饰符 示例:.post--important,.post__btn--disabled 注意事项 使用...是的,你 HTML 文件会超负荷,但是不用担心,与 BEM 带来好处相比,这只是个小小缺点。 示例 以下是一个练习。你可以去你最喜欢最常用网站,然后想想看哪些是元素修饰符

1.7K10
  • 如何更优雅编写CSS代码

    BEM 帮助我们解决该问题。BEM 是一种命名约定,表示“ 元素 修饰符”。 该方案可以使我们代码更加结构化,更加模块化和更大可复用性。现在来解释下什么是元素修饰符。...这些就是所谓修饰符。它们是元素标识,用于更改行为、外观等。...命名: 元素名称元素名称+ -- +修饰符名称: .Block__element-modifier,.Block-modifier。.../元素可以嵌套到其它/元素,但它们必须是完全独立。记住这个词:独立。所以,不要在按钮元素上写margin,因为你想要把按钮放在标题元素下,否则你按钮将会和标题元素强耦合。...你浏览那些你常逛网址,试着分析哪些是,哪些是元素,那些是修饰符。 例如,谷歌商店中分析到是这样: ? 轮到你了,保持好奇心,想想怎样可以变得更好。和往常一样,你必须自己搜索,实验,创造。

    1.9K10

    从element-ui源码来看BEM实现

    BEM代表“(block),元素(element),修饰符(modifier)”,开发组件过程中经常使用这三个实体,而在选择器,这三个实体由以下符号来表示扩展关系: - 划线:仅作为连字符使用...element组件库mixins.scss文件中找到了想要答案。 接下来要讲就是如何利用sass,编写具有可读性和可维护性BEM规则css代码。...#{$B} { @content; } } 为了方便大家理解代码,现在开头贴上配置文件定义变量,而这时就能很清楚看到block生成就是基于BEM规范是设计布局一部分,具有唯一地意义...,我们应该把关注点放在if和eles分支上,为什么会出现hitAllSpecialNestRule函数判断分支,原因是修饰符或者其他mixin嵌套一个元素element,会出现修饰符在前,而元素在后编译结果...利用刚刚介绍函数,以及元素修饰符实现代码,sass已经能非常高效率并且优雅基于BEM规范代码了。

    1.9K30

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

    BEMCSS BEM 分别代表着:Block()、Element(元素/子/组成部分)、Modifier(修饰符),是一种组件化 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。...由于是独立可以应用开发中进行复用,从而降低代码重复并提高开发效率。可以放置页面上任何位置,也可以互相嵌套。...同类型显示上可能会有一定差异,所以不要定义过多外观显示样式,主要负责结构呈现。这样就能确保不同地方复用和嵌套时,增加其扩展性。综上所述,最终我们可以BEM规则最终定义成: ....Modifier(修饰符) 定义元素外观、状态类型。 例:color、disabled、size 规则 修饰符需能直观易懂表达出,其外观、状态行为。修饰符用_连接元素。...如果仅仅为了好看,规避其优点,认为得不偿失。个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长,但经过 GZIP 等压缩后,文件体积其实并无太大影响。

    71230

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

    BEM 是 BlockElementModifier 缩写 ,其中B 表示(block)、E 表示元素(element)、M 表示修饰符(modifier)。 这三个部分通常使用__ 与--连接。...即: .__元素--修饰符{} Block:代表了一个独立元素可以理解为功能组件。...通过浏览HTML代码class属性,你就能够明白模块之间是如何关联:有一些仅仅是组件,有一些则是这些组件子孙或者是元素,还有一些是组件其他形态或者是修饰符。...这有悖BEM命名规范,BEM命名只包含三个部分,元素名只占其中一部分,所以不能出现多个元素情况。这样约定可以防止当层级很深命名过长问题。...,上面 less sass 可以改成如下结构: .card{ // 省略...

    79810

    BEM 简介

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

    80240

    React 设计模式 0x4:样式

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

    1.3K20

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

    举个例子: .listing { font-size: 18px; line-height: 1.2; } 选择器 规则声明,“选择器” 负责选取 DOM 树元素,这些元素将被定义属性所修饰...如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。 不要使用 ID 选择器。 一个规则声明应用了多个选择器时,每个选择器独占一行。...OOCSS,也就是 “Object Oriented CSS(面向对象CSS)”,是一种写 CSS 方法,其思想就是鼓励你把样式表看作“对象”集合:创建可重用性、可重复性代码段让你可以整个网站多次使用....listing-card--featured 是一个修饰符(modifier),表示这个与 .listing-card 有着不同状态或者变化。...ID 选择器 CSS ,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你规则声明带来了不必要高优先级,而且 ID 选择器是不可重用

    2.4K20

    CSSBEM 命名规范

    前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem(block)、元素(element)、修饰符(modifier)简写,由 Yandex 团队提出一种前端 CSS 命名方法论...- 划线 :仅作为连字符使用,表示某个或者某个子元素多单词之间连接记号。...__ 双下划线:双下划线用来连接元素 _ 单下划线:单下划线用来描述一个或者元素一种状态 BEM 是一个简单又非常有用命名约定。...当你选择了这种局部作用域写法时,较小组件BEM 格式可能显得没那么重要。但对于公共、全局性模块样式定义,还是推荐使用 BEM 格式。...2.4 避免 .block__el1__el2 格式 深层次嵌套 DOM 结构下,应避免过长样式名称定义。

    2.7K31

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

    可以将PrettierBeautify等格式化工具集成到代码编辑器,以自动处理代码格式化。 相关样式:与相关元素相关样式应放置样式表。...BEM元素修饰符):BEM是一种流行CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化CSS样式方法,提供代码可重用性,并使大规模CSS维护成为可能。...BEM(Block)、元素(Element)和修饰符(Modifier)首字母缩写,它们代表以下原则: (Block):开发过程可能创建独立组件。...修饰符附加在表示变体元素名称后面。一个修饰符示例是 --active ,用于表示元素/活动状态。...使用BEM,我们还可以CSS编写样式时表示一个元素是特定类元素

    39130

    面试官:了解 CSS BEM规范?

    必须立即知道一个 class 放在这个伟大工程什么地方,以防止大脑过载。这样可以快速修改 style,而不必整个工程里前后引用。...什么是 规范表示一个组件意思,这样看上去有点抽象,我们可以通过例子来学习,假设你要写一个按钮组件。...但是实际项目使用,我们会发现一个按钮可能是大按钮,可能是小按钮,也可能是红色,或者黄色。于是就引申出了BEMmodifier。 什么是修饰符 修饰符是改变某个外观标志。...要使用修饰符可以将 --modifier 添加到。假如我们要添加一个默认按钮,一个主要按钮,一个大按钮,一个小按钮,一个主要小按钮。...元素有两个优点 : 你可以CSS 优先级保持相对扁平。

    55020

    开发姿势篇——基础开发

    开发过程,我们会写无数个元素,那么其实每个元素都相当于是一个盒模型,而一张完整页面,正是由多个盒模型组合在一起组成。如此来讲,我们页面布局便是重中之重:我们应该如何合理布局呢?...就此结束?醒醒,工头让喊你搬砖。根据设计,砌墙、装修、水管电线等等都要一步步来啊,任重而道远。  小册,凹凸实验室此处概述重点讲解了前端另一大能力——切图。...那么我们css代码,如何使用BEM呢?...BEM 意思就模块(Block)、元素(Element)、修饰符(Modifier),使用这种命名方式可以CSS 类名变得有实际意义且能自我解释,具有更高开发友好性。...Block - 模块,名字单词之间用 `-` 符号连接 Element - 元素,模块元素,用 `__` 符号连接 Modifier - 修饰符,表示父元素元素其他形态,用 `--` 符号连接

    1.1K20

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

    BEM 将页面的类名分为(Block)、元素(Element)、修饰符(Modifier)。...(Block):一个是视觉上或者语义上一个整体,它是一个具体且唯一一个元素,例如,页面上一个弹窗,或者是一个搜索框; 元素(Element):一般认为是组成部分,元素比较用它父级名称做为前缀...通过上面的示例可以看出,元素是通过两个下划线(__)连接,而元素修饰符之间是通过两个短横线(--)连接。...SUIT CSS 可以 BEM 基础上进行了改进,特别是去除了双下划线设计,观感上就比 BEM 美观了许多,而且各种名称都是通过驼峰方式命名,省略了部分短横线,这让 SUIT CSS 类名长度上也会比...模块规则在官方文档没有详细命名风格,看了很多文章,命名模块时候基本都是参考 BEM,所以这里不再单独介绍。

    97110

    CSS模块化:提升前端开发效率与可维护性关键

    引言 现代Web开发,样式表管理变得越来越复杂。为了应对这一挑战,CSS模块化成为了一种重要开发方法。它有助于组织和维护样式,提高开发效率,并降低了样式冲突风险。...CSS模块化实现方式 3.1 BEM元素修饰符BEM是一种常用CSS命名约定,通过(Block)、元素(Element)、修饰符(Modifier)组合来命名样式,以确保样式唯一性...3.2 CSS-in-JS CSS-in-JS是一种将CSS写入JavaScript文件方法,它将样式局部化,确保样式只适用于特定组件模块。...3.3 CSS预处理器 使用CSS预处理器如SassLess可以将样式分割成模块,并使用变量和嵌套规则来提高可维护性。 4....4.3 模块化组织 将样式表分割为模块,每个模块只包含特定组件元素样式,以提高可维护性。 5.

    31440

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券