文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法让子元素继承Emmet BEM的父类？

Emmet BEM是一种前端开发中常用的命名规范，用于管理HTML和CSS的类名。它的核心思想是通过块（block）、元素（element）和修饰符（modifier）的组合来构建可复用的组件。

在Emmet BEM中，子元素不会直接继承父类的类名，因为每个元素都应该有自己独立的类名。然而，可以通过一些技巧来实现子元素与父元素之间的关联。

一种常见的方法是使用父元素的类名作为子元素的前缀。例如，如果父元素的类名是block，子元素可以使用block__element的类名来表示其属于父元素。

另一种方法是使用修饰符来表示子元素的不同状态或变体。例如，如果父元素有一个修饰符modifier，子元素可以使用block__element--modifier的类名来表示其在该修饰符下的样式。

这种方式可以帮助我们更好地组织和管理代码，使其更具可读性和可维护性。同时，这也符合BEM的设计原则，即每个元素都应该有自己独立的类名，以便于样式的复用和修改。

腾讯云相关产品和产品介绍链接地址：

相关搜索:CSS -防止子元素继承取消父元素的转换属性React |当子元素具有类时更改父元素的样式从Tree类继承Typescript (访问父元素的属性)使用BEM + Sass父选择器来确定修饰符的子元素的目标，而无需重复类名在CakePHP3中，有没有办法让一个实体继承自一个父类，但是这个父类没有对应的表？如何统计父类的子元素数量如何让flex的子元素的宽度达到父元素的100%？如何让一个类在Python中继承它的父类的值？如何让子类返回自身的副本，而不是它继承的父类？有没有办法从父类的构造函数继承参数？
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

如何写出一套可维护的CSS库？

，但目的是让其变得更易用，提高可扩展性和灵活度，如果只是为了修饰而修饰，写出大量没有任何复用性的类，便是一种弄巧成拙的做法。...BEMCSS BEM 分别代表着：Block（块）、Element（元素/子块/组成部分）、Modifier（修饰符），是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。...Element（元素） 是块中的组成部分，对应块中的子元素/子节点。...块的内部元素，都被认为是块的子元素。一个块中元素的类名必须用父级块的名称作为前缀，因此不能写成：block__elem1__elem2。...个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长，但经过 GZIP 等压缩后，文件的体积其实并无太大影响。

69830

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

BEM的方式最简单，class都唯一了，那还冲突个毛线；其次就是通过父元素限定作用域，可以搞几个层级，而不是单独一个class定义样式；还有就是追加class，来实现差异化；最后不同的页面不同的文件，你用你的我用我的...// BEM.imgslide__item__img{} // 父元素限定.imgslide .item .img{} // 追加class.img{}.img--special{} // 不同页面不同文件...第三种办法：使用父类，给一个范围，于是形成 .page-user.page-tt。 一般我们使用的是第二种和第三种办法，因为这两种都有共同的 .page-tt，可以比较方便控制一些基础共有的样式。...a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text 由上可以看出继承式一般子元素接着父元素的最后一个单词如...，至于 .aside-block与它的子元素之间则使用了我们上面说的继承式层级。

21510

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

BEM的方式最简单，class都唯一了，那还冲突个毛线；其次就是通过父元素限定作用域，可以搞几个层级，而不是单独一个class定义样式；还有就是追加class，来实现差异化；最后不同的页面不同的文件，你用你的我用我的...// BEM .imgslide__item__img{} // 父元素限定 .imgslide .item .img{} // 追加class .img{} .img--special{} //...第三种办法： 使用父类，给一个范围，于是形成.page-user .page-tt。 一般我们使用的是第二种和第三种办法，因为这两种都有共同的.page-tt，可以比较方便控制一些基础共有的样式。...a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text 由上可以看出继承式一般子元素接着父元素的最后一个单词如...class，而.block-tt,block-bd则使用了我们的修饰关键词，至于.aside-block与它的子元素之间则使用了我们上面说的继承式层级。

63980

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

BEM的方式最简单，class都唯一了，那还冲突个毛线；其次就是通过父元素限定作用域，可以搞几个层级，而不是单独一个class定义样式；还有就是追加class，来实现差异化；最后不同的页面不同的文件，你用你的我用我的...// BEM .imgslide__item__img{} // 父元素限定 .imgslide .item .img{} // 追加class .img{} .img--special{} //...第三种办法： 使用父类，给一个范围，于是形成.page-user .page-tt。 一般我们使用的是第二种和第三种办法，因为这两种都有共同的.page-tt，可以比较方便控制一些基础共有的样式。...a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text 由上可以看出继承式一般子元素接着父元素的最后一个单词如...class，而.block-tt,block-bd则使用了我们的修饰关键词，至于.aside-block与它的子元素之间则使用了我们上面说的继承式层级。

30520

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

父节点的类名是 stream ，内容是一个文章列表。它的子节点的类名是 streamItem ，内容是文章列表中的一篇具体的文章。这使我们很容易的了解到父节点和子节点之间的关系。...使用组件的思想将会使你的代码解耦。解耦的代码越多，你的类之间的依赖就越低。这会让你的代码更容易修改，并且使你的代码更长时间的工作下去而不用修改它。...BEM 代表块(block)、元素（element）和修饰符（modifier）。Yandex，在俄罗斯的相当于谷歌的搜索引擎，为了解决他们 CSS 代码库中的缩放问题而提出了它（它指BEM）。...splash 这个类不但包含了本身的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，我们可以将这段代码分离为两个新的类。...我们可以将 splash 作为一个一般的全屏类，它可以拥有任何子节点。所有子节点关注的属性，都在 splash content 中，与父节点的属性是完全解耦的。

40310

编写模块化CSS——BEM

在 BEM 中，块被写为像 class 的名字一样，如下所示： ? BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。...如果设置了一个 .button 类的按钮，则可以在任何 元素上选择是否使用 .button 类。...很具有讽刺意味，但是这个丑陋的语法让我的代码更简洁，更易于维护。所以强烈推荐你尝试它:) 我们来看看 BEM 的第三个重要部分 —— 元素。 元素(Elements) 元素是块的子节点。...BEM 元素有两个优点 ： 你可以让 CSS 的优先级保持相对扁平。 你能立即知道哪些东西是一个子元素。 为了解释以上两点，考虑使用两个单独的 class 的替代方法（许多框架这么做的）。...他们是： 只把子子元素链接到有意义的块 创建新的块来保存元素 链接孙元素到块 虽然 BEM 建议你将 BEM 元素写作 .block__element ，但它不会规定你的 HTML 应如何。

2.1K70

大型项目中的结构化CSS

现在（从css渗漏的角度）这就变得好理解了，那些基本排版、文本输入框以及全局继承的样式就显得合理了。这是HTML和CSS为何被开诚布公的、公用化地创造出来。...同样，可以在父元素内的子元素中独立定义样式 - 这并不会受到你在前一阶段Sass这层已经定义好的样式的影响。...规则3: 构建组件时用边界元法（BEM）命名 尽可能试着用BEM命名去创建独立的组件，我们不必完全按照BEM的规范 - 只是用命名组合，这意味着类名以如下的方式命名： .block__element--...这允许我们仅可以修改在特定块（block）级别的修饰符， 并且在子块中不能重复修饰符（可以理解为父子嵌套时不重名；“E”在BEM中即元素elements）。...为了更好的理解BEM体系，可以转向这里 - 由Harry Roberts写的CSS指南 ：BEM形式的命名。

1.1K40

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

这些 head、feet 和 arms 都是组件中的元素。它们可视作子组件（child components），也就是父组件的组成部分。...如果使用 BEM 命名规范的话，这些元素的类名都可以通过在两条下划线后加上元素名称来产生。...如果使用 BEM 的话，这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。...假如我们这个火柴人拥有另一个不一样的头部大小呢？ 一次元素被加上了修饰符。记住，元素指一个整体封装区块中的一个子组件。...能正确命名 CSS 中的类名可以让你的代码变得更易理解和维护。 如果你选择 BEM 命名规范，在看标记语言（markup）时就更容易看清各个设计组件/区块之间的关系。 感觉不错吧？

911100

寒假提升 ｜ Day7 CSS 第五部分

，那么这个块级元素的margin-top值会传递给父元素 margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素 折叠:...事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局: 原因是列表元素默认的CSS样式, 让它用起来不是非常方便; 比如列表元素往往有很多的限制, ul/ol中只能存放...) 属性(id属性、class属性、普通属性) {}(内容) $(数字) 隐式标签 CSS Emmet 结构伪类 - :nth-child :nth-child(1) 是父元素中的第1个子元素...0 是父元素中的第奇数个子元素(第1、3、5、7……个) 跟:nth-child(odd)同义 nth-child(-n + 2) 代表前2个子元素 结构伪类 - :nth-last-child( )...(1) :last-of-type，等同于:nth-last-of-type(1) :only-child，是父元素中唯一的子元素 :only-of-type，是父元素中唯一的这种类型的子元素 下面的伪类偶尔会使用

1K10

CSS规范--BEM入门

场景二：承接上文，由于页面和弹窗样式冲突了，所以把页面的冲突样式的选择器加上一些结构逻辑，比如子选择器、标签选择器，借此让选择器独一无二。...这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。...除非使用BEM让代码增加了不必要的维护困难，或者这么做确实让代码更难读了，那么你在使用它之前就要三思而行了。...当我们遵循了这个规定，无论父元素名发生改变，或是模块构造发生的改变，还是元素之间层级关系互相变动，这些都不会影响元素的名字。...如果我们用的是BEM，要覆盖样式很简单：找到要覆盖样式的元素，得知它的类名，在媒体查询中，用它的类名作为选择器，写下覆盖样式，样式就覆盖成功了，不需要担心前面样式的权重过大。

1.1K20

CSS笔记(3)

学习内容: CSS的引用方式: 行内样式表/内部样式表/外部样式表 Emmet语法; (一)复合选择器: 后代选择器/子选择器 (二)伪类选择器; 链接伪类选择器 CSS的引用方式 1.行内样式表(行内式...常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等等. 1.后代选择器(重要) 后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面...语法: 元素1 元素2 {样式声明} 上述语法表示选择元素1里面的所有元素1(后代元素) 例如: ul li {样式声明} 元素1和元素2中间用空格隔开 元素1是父级,元素2是子级,最终选择的是元素...语法: 元素1 > 元素2 {样式声明} 元素1和元素2之间用大于号隔开 元素1是父级,元素2是子级,最终选择的是元素2. 3.并集选择器 并集选择器可以选择多组标签,同时为他们定义相同的样式.通常用于集体声明...,他只会选择离他最近的子元素的标签,在这里,有大肘子的a标签就是div最近的子标签,所以要用子选择器.

48210

代码优雅性反映出你的思维高度

解决方案： 在写样式的时候，要充分利用样式继承（当然了前提是你能hold住这个样式而不被反覆盖），避免重复定义样式。...场景1：子元素margin没有撑开父容器，但影响到相邻元素，从而影响距离计算。 这就是著名的BFC边距折叠问题，具体原理我就不阐述了，各位自行查资料。为什么要把这个问题拿出来说？...举例如下图，父容器a其实没有margin，但子元素c的边距使得a与b之间产生了间距，这并不是我们预期的： 我们希望看到的标准输出应该如下图： 解决方案： 原理上就是要解决BFC折叠问题，一般来讲，我们可以用这两种方法解决...父元素添加overflow:hidden，但前提是该容器内没有需要“溢出容器”的内容，比如小箭头什么的。 2. 给父元素增加伪元素:after，并设置其display:table。...那照这个原理来讲，我们人为让img做底部对齐不就可以了？是的，设置verticle-align:bottom就能解决。 但是我在这里想分享另一个思路，img标签，最好使用一个父容器存放！

20920

CSS第二天

交集选择器：如果有标签选择器，标签选择器必须写在最前面 hover伪类：鼠标悬停在元素上的状态，设置样式 ---- Emmet语法：通过简写语法，快速生成代码 HTML篇： 快速生成标签带有类名的标签...：inline 行内块元素 display：inline-block 元素显示模式转换 改变元素默认的显示特点，让元素符合布局要求 ①块级元素：display：block 独占一行（一行只能显示一个...） 可以设置宽度和高度 默认宽度是父元素的宽度，默认高度是内容高度 注意：p和h里不能放块元素 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…...注意点： p标签不要嵌套div、p、h等块级元素 a标签可嵌套任意元素，但a标签不能嵌套a ---- CSS 三大特性： 1️⃣继承性: 子元素有默认继承父元素样式的特点（子承父业） 可通过调试工具判断样式是否可继承...，才能通过层叠性判断结果 3️⃣优先级： 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 <

1.3K10

多人协作开发Vue统一代码风格

向 子组件 传递数据时，通过 在子组件上动态绑定传值，然后在子组件中，通过Prop 来接收使用即可。...一般我们会直接在Prop 直接接收父组件动态绑定的key，没有类型约束，这样父组件传递任何类型数据都可以，这就存在一定的缺陷了。...官方提供了3中解决方案 scoped Style 中加入 scoped 使用CSS Modules 来设定CSS 作用域` 基于 class 的类似 BEM的策略 // 1, scoped ​...第二种方式 components/ |- MyComponent.vue 基础组件命名 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base...在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。 ​

1.2K00

CSS命名法BEM与scoped、module

module 这个没用过，也没有去弄个demo，大致意思就是可以自己定义编译的规则，把类名编译成只对当前组件有效的字符串，可以是hash字符，也可以是带组件名类名加hash字符串，最终就是得到唯一的类名...，BEM由块（Block）、元素（Element）、修饰符（Modifier）组成，块__元素--修饰符： B:block,对应模块名，如dialog E:element 对应模块中的节点，如button...scoped：做到了样式隔离在内部，但是会被外部或者子组件被父组件污染，或者得用deep进行穿透，如果dom特别多的情况下，data-v-hash会稍微导致页面渲染性能。...module：通过类名，做到了绝对隔离，但又因为绝对隔离，修改样式或者复用又变得困难。 BEM：隔离和污染做的很好，但是名字太长长，命名困难，多人协作的情况下通过人为约定约束实现BEM太过困难。...在我看来，scoped > module > BEM，引用工具来约束和人为约束肯定是选择使用工具去约束，module和scoped对比，也只是工具对类名的不同处理。

62720

HTML详解连载（6）

开始喽 CSS特性 优简代码/定位问题，并解决问题 继承性 层叠性 优先级 继承性 子级默认继承父级的文字控制属性 注意 标签自己有样式，则生效自己的样式，不继承 层叠性 特点 相同的属性会覆盖...规则 选择器优先级高的样式生效 公式 通配符选择器<标签选择器<类选择器<id选择器<行内样式<!...important 注意 选中标签的范围越大，优先级越低 叠加计算 如果是符合选择器，则需要权重叠加计算 公式（每以及之间不存在进位） 行内样式 ，id选择器个数，类选择器个数，标签选择器个数 规则 1...important权重最高 2、继承权重最低 Emmet写法分析 代码的简写方式，输入缩写 VScode会自动生成对应的代码 HTML CSS：大多数简写方式为属性单词的首字母 背景图 网页中...）的显示方式 作用 布局网页的时候，根据标签的显示模式选择合适的标签摆放内容 块级元素 位置 独占一行 宽度默认是父级的1000% 添加宽高属性生效 行内元素 位置 一行共存多个 尺寸 尺寸由内容撑开

13520
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券