开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

关于BEM样式类名嵌套深度的指导原则

BEM（Block Element Modifier）是一种前端开发中常用的命名规范，用于管理和组织CSS样式类名。BEM样式类名嵌套深度的指导原则是为了保持样式类名的可读性和可维护性，避免样式类名嵌套过深导致代码难以理解和修改。

指导原则如下：

尽量避免过深的嵌套：BEM规范建议最多只嵌套两层，即Block（块）和Element（元素）。过深的嵌套会增加选择器的复杂度，降低样式的性能。
使用Modifier（修饰符）来扩展样式：Modifier是用于修改Block或Element的外观或行为的类名。通过使用Modifier，可以避免嵌套过深的情况，同时保持样式的可读性和可维护性。
使用组合类名来表示复杂的样式：如果需要表示复杂的样式，可以使用组合类名来组合多个Block或Element的类名。这样可以避免嵌套过深，同时清晰地表达样式的含义。
使用语义化的类名：类名应该具有语义化，能够准确地描述元素的作用和含义。这样可以提高代码的可读性和可维护性。
避免使用具体的元素选择器：在BEM规范中，应该尽量避免使用具体的元素选择器（如div、span等），而是使用类名来选择元素。这样可以提高样式的复用性和灵活性。

总结起来，BEM样式类名嵌套深度的指导原则是尽量避免过深的嵌套，使用Modifier来扩展样式，使用组合类名表示复杂的样式，使用语义化的类名，避免使用具体的元素选择器。这样可以提高样式的可读性、可维护性和性能。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。...类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。不要使用 ID 选择器。在一个规则声明中应用了多个选择器时，每个选择器独占一行。...”，是一种用于 HTML 和 CSS 类名的命名约定。...BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。...嵌套选择器请不要让嵌套选择器的深度超过 3 层！ .page-container { .content { .profile { // STOP!

2.4K2 0

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

Minimizing the Depth of Applicability 最小适配深度原则，简单的例子： /* depth 1 */ .sidebar ul h3 { } /* depth 2 */...同类型的块，在显示上可能会有一定的差异，所以不要定义过多的外观显示样式，主要负责结构的呈现。这样就能确保块在不同地方复用和嵌套时，增加其扩展性。综上所述，最终我们可以把BEM规则最终定义成： ....，所有样式都为平级，嵌套只出现在 .m-block_active ，状态激活时的情况。...个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长，但经过 GZIP 等压缩后，文件的体积其实并无太大影响。...，通过在html代码中添加类名来添加属性，不必再去找相对应的选择器中的css代码来修改样式。

6993 0

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

CSS命名约定是指一套被公认的指导方针和最佳实践，用于在CSS代码中为样式命名类和ID。这些指南强制要求为这些类/ID分配的名称应保持一致和描述性，提供一种组织或层次结构的形式。...CSS命名原则和最佳实践在前一节中定义了CSS命名约定，我们将讨论在编写代码时应遵循的最佳实践以及CSS类名一致命名的准则。...创建有意义和一致的类名的指导原则简洁性和连贯性：为类分配的名称应尽可能简洁，同时提供所需的关于其目的的信息。避免使用过长的名称，这可能会使使用或阅读变得困难。...类名还应具有连贯性，连接兄弟元素或显示父子元素之间的关系。避免过度嵌套：在为类分配名称时，命名模式应保持浅层，并且选择器不应过度嵌套。这样可以提高可读性并使代码更易于维护。...使用BEM，我们还可以在CSS中编写样式时表示一个元素是特定类的子元素。

2933 0

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

CSS 在刚开始学习的时候看起来非常简单。毕竟，它仅仅就是些样式而已，事实上是这样吗？但是，随着你的不断了解。很快，你会发现 CSS 没你想象的那么简单，它复杂且有深度。...编写富有语义的 CSS 意味着在选择类型的时候，类名要传达出结构和功能信息。类名要很容易被理解。确保它们不要太具体、太特殊。这样，你就可以复用它了。...请敞开心扉去学习新的标准，用不同的思维去思考 CSS 。你可以在《深入学习 BEM 语法》、《BEM 101》和《BEM 简介》上看到更多关于 BEM 的信息。...当单一功能原则应用于你的每一个 CSS 类选择器中时，这意味着每一个类选择器都有着唯一的功能。换句话说，要根据不同关注点将样式分离到不同的类选择器中。...你可以通过阅读下列文章进一步了解单一功能原则在样式表和类中的应用。《单一功能原则在 CSS 中的应用》和《单一功能原则》。

4031 0

浅谈 Css 规范

避免样式冲突: BEM 的命名约定避免了样式冲突，每个块和元素都有独立的命名空间，不会受到外部样式的影响。缺点: 命名冗长: BEM 的命名规范较为严格，可能导致类名过长，增加了代码量和阅读难度。...样式层级深: 由于 BEM 的嵌套结构，可能导致样式层级较深，增加了 CSS 的优先级和复杂度。维护成本: 对于初学者来说，需要一定时间来适应和理解 BEM 的命名规范，可能增加学习和维护成本。...，是动态CSS更易于管理）的抽象思维，主张将元素的样式抽象成多个独立的小型样式类，来提高样式的灵活性和可重用性。...两个基本原则: 独立的结构和样式（即不要将定位、尺寸等布局样式与字体、颜色等表现样式写在一个选择器中）。...无语义化的类名: 根据两个核心的分离原则，我们代码中不可能会出现 .btn 这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要 .btn 这样的业务类名。

711 0

在大型项目中组织CSS

原因就是不加前缀的类名最终将会跟引入的样式冲突。假设你需要一个datepicker ——你肯定不愿意从头开发一个（至少我不愿意），因此你引入了一个。...现在你的样式里到处都是.prev, .next, 和 .separator这样的类名，可能会跟你自己的类名冲突——如果你不加前缀的话。...我们没有遵循完整的BEM指南——只是命名方案，这就是说类名应该是这种形式： .block__element--modifier 为此我们这样组织我们的 Sass： .pg-deadline &__date...Sass嵌套为我们创建BEM类名。...有点反直觉的是，这会产生完全扁平的css结构——没有嵌套——只有顶层的类名定义。作为法则二的一个例外，我们允许 .block--modifier 形式的类名。

7812 0

大型项目中的结构化CSS

原因是无前缀的类名最终将会导致和引入的样式冲突。例如你需要一个选色器datepicker - 你绝对不希望胡乱拼凑的去造轮子构建它（至少我不希望如此！），所以一般你会引用这个组件。...接着你可能在你的样式中随处可见类似 .prev, .next和.separator等的类名，如果你不用前缀它们可能会和你已有的类名产生潜在的冲突。...规则3: 构建组件时用边界元法（BEM）命名尽可能试着用BEM命名去创建独立的组件，我们不必完全按照BEM的规范 - 只是用命名组合，这意味着类名以如下的方式命名： .block__element--...BEM类名命名方式。...这多少有点违背常理，实际上会产生大量的扁平化CSS结构 - 没有嵌套 - 仅仅只有类名定义在头部。

1.1K4 0

CSS模块化的演进

它的核心思想是将 CSS 的组织划分为5类：基础样式基础样式包括设置默认超链接的颜色，默认字体样式和body背景。通常用来定义全局的样式，比如 CSS Reset。...BEM BEM 即Block Element Modifier；类名命名规则： Block__Element—Modifier Block 所属组件名称 Element 组件内元素名称 Modifier...BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一，同时将类选择器的语义化提升了一个新的高度。..., document.getElementById('app') ); 这种写法将结构，样式和行为写在了一起，完全违背了”关注点分离”的原则。但是，这有利于组件的隔离。...从开发体验上来看，这种做法让开发者不必在类名的命名上小心翼翼，直接使用随机编译生成唯一标识即可。

1.7K2 0

如何更优雅的编写CSS代码

非也，scss足够聪明，当你以这种方式进行命名时，它可以知道你想指代的是分块文件。这就是我们需要知道的关于变量、嵌套、分块和导入所有的新星。...CSS 代码组织方案：BEM 我曾经无数次给我的css类名提供我能想到的全部术语，你懂的，比如这些命名：.button .page-1 .page-2 。我经常不知道如何进行命名。...示例：.post--important，.post__btn--disabled 注意点当你使用 BEM 时，你的命名只有 class 类名并且只使用 class 类名，没有 id ，没有标签，就只使用...class 类名。...这种情况请使用具体的 class 类名来替代。是的，你的 HTML 文件将会因为 BEM 变得臃肿，但比起BEM带来的好处，这只是一个无足轻重的小缺点。举个例子这是给你的练习。

1.9K1 0

小而美的 css 的原子化

在例子中的 6 个样式规则中，4 个是基于上下文的新的需求与原有规则冲突，需要修改一个其中一个样式，是通过新增一个嵌套类覆盖原有的样式虽然文中的代码样例是 2013 年的，9 年过去了，发现自身的老项目中还是存在着类似问题...按照业务声明类名:比如字符过长省略的样式。多出重复。但是按照业务来命名 CSS 类又避免不了这个问题。...永远不要在 CSS 中模仿 HTML 的结构。换句话说，不要在样式表中引用标签或 ID。相反，尝试创建和应用描述相关标签使用的类。并将嵌套类保持在最低限度。...一切样式都是一个类，不能嵌套相关资料 “https://getbem.com/ ITCSS 定义 “理智、可扩展、可管理CSS架构原则:类似 SMACSS 对 CSS 元素进行了分层 “ Settings...没有了命名的烦恼，按照功能命名没有相关嵌套，整体可读性加强没有重复 CSS 类，一个功能对应一个类名，一个类名一个功能。没有重复没有新增 CSS 文件了。

7294 0

20180818_ARTS_week08

BEM 这种书写方式主要体现在： B -- Block，页面按块划分，比如头部叫 header，相应的 css 类名就叫 herder。...E -- Element，element 指块中的元素，比如头部的按钮，css 类名就叫 header-button。...M -- Modifier，这个指块中元素的不同状态，比如头部按钮有不可点击态，css 类名就叫 header-button-disabled。这个规则基本上还是比较好理解的。...之前也听说过 BEM 的命名方式，我理解一个是为了每个模块更严谨，命名更加合理和语义化，另一方面也是为了能避免样式的冲突。...不过随着 Vue 等框架支持 css scoped 之后，冲突的问题有很大的缓解。 BEM 的使用还是要根据实际情况，如果规定的太严格，样式上的重用性会降低不少。

3911 0

「前端工程四部曲」模块化的前世今生（下）

「优点：」 BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。...代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。...「缺点：」 CSS 类名会比较长而且复杂，根据 BEM 命名规则产生的 CSS 类名都会很复杂，粗暴来说就是丑。不过熟悉了命名规则之后，可以很容易理解其含义。...，并且每个样式对应一个类，这样是为了后面可以重复使用这些组件的样式，避免重复写相同的样式。...data-v 开头的自定义属性，而 CSS 为其添加样式时，通过类名+属性选择器的方法来避免命名冲突，从而实现模块化。

7012 0

CSS Modules入门教程

当然在更多的情况下，可能嵌套的层次还会更深，另外，这里单单用了类选择器，而采用类选择器的时候，可能对整个网页的渲染影响更重。.../colors.css"; font-size: 30px; line-height: 1.2; } 解决嵌套层次过深的问题因为CSS Modules只关注与组件本身，组件本身基本都可以使用扁平的类名来写...，因此确保了类名的唯一性，我们再看看浏览器中inspector中的样式应用，如下： ?...就可以发现.container类没有被转换定义哈希类名 CSS Modules默认是以[hash:base64]来进行类名转换的，可辨识度不高，因此我们需要自定义开启自定义，可以使用一个配置参数localIdentName...类名组合如果我们实现类似于Sass的继承功能，我们需要怎么做呢？

2.5K4 0

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

背景最近老大在维护别人的代码时，发现我们团队写的样式各有种的想法及风格，这在后续维护会增加一定的难度，所以老大决定统一样式的会名规范，所以就安排我去调研及实践，下面是我调研的结果。...为什么要用 BEM? 性能 CSS 引擎查找样式表，对每条规则都按从右到左的顺序去匹配，以下这段代码看起来很快，实际上很慢。..._item--active { // 省略... } .card__link{ // 省略... } .card__link:hover{ // 省略... } 从上面的代码可以看出，我们样式类没有一点嵌套关系...，嵌套关系都以从命名的方式来代替。...这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。

7191 0

您知道SASS吗？

SASS是一种预处理器及样式表语言，由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能，例如变量，嵌套规则，mixin，函数等。...SASS使嵌套/分组CSS选择器和构建样式表变得更加容易 Sass通过在其中嵌套CSS类或选择器并在后台生成CSS使其成为可能。...代码您可能已经注意到.button 这个类名，多次输入名为button的类名，可能会造成额外的精力浪费，而不是专注于.button有效地对类进行分组和样式设置。...如果您使用的是BEM体系结构，那么您就节省了一些需要重复输入CSS类和选择器来遵循该体系结构时间，因为SASS在后台已经帮您生成了完整的CSS了。...对选择器分组并创建嵌套选择器时简直轻而易举，因为Sass自动的帮我们完成了大量的工作。我可以毫不夸张的说我比使用纯CSS设置样式快了2倍。总体的感觉就是“真香”。

8951 0

React组件设计实践总结03 - 样式的管理

尤其是大型团队合作的项目, 很难确定某个特定的类或者元素是否已经赋过样式. 所以在大部分情况下我们都会绞尽脑汁新创建一个类名, 而不是复用已有的类型....如果团队没有制定合适的 CSS 规范(例如 BEM, 不直接使用标签选择器, 减少选择器嵌套等等), 代码很快就会失控解决的方向: 之前文章提到组件是一个内聚单元, 样式应该是和组件绑定的....最基本的解决办法是使用类似 BEM 命名规范来避免组件之间的命名冲突, 再通过创建优于复用, 组合优于继承的原则, 来避免组件间样式耦合; 3️⃣ 无用代码的移除由于上述’依赖’问题, 组件样式之间并没有明确的边界...因为原生 CSS 一般有开发者由配置类名(在 html 或 js 动态指定), 所以工具很难对类名进行控制. 压缩类名也会降低代码的可读性, 变得难以调试....通过组件名来标志样式, 自动生成唯一的类名, 开发者不需要为元素定义类名. 绑定组件.

7.1K2 0

CSS规范--BEM入门

BEM解决这一问题的思路在于，由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。...block__element--active，这是不合理的，因为很多时候我们无法得知元素的名称，所以这时候，我们应该统一js控制状态的类名格式，比如is-active、js-active等等，这些类名只用作标识...关于原子类(短类)与BEM BEM可以不需要用到原子类，但是如果已经引入了类似Bootstrap的框架，也没必要强制避免使用原子类，比如pull-right、ellipsis、clearfix等等类，这些类非常实用...为了覆盖前面权重过大的样式，甚至通过添加额外的类名或标签名来增加权重。可想而知，此后这个样式文件的维护难度就像雪球一样，越滚越大。...如果我们用的是BEM，要覆盖样式很简单：找到要覆盖样式的元素，得知它的类名，在媒体查询中，用它的类名作为选择器，写下覆盖样式，样式就覆盖成功了，不需要担心前面样式的权重过大。

1.1K2 0

React 设计模式 0x4：样式

CSS 框架，Bootstrap 已经内置了样式和类，可以立即应用于您的应用程序。...这些内置样式和类已经默认具有响应式功能，因此您不必担心它们的响应式。...Button> Example ); } export default Example; 优点：可复用避免了类名冲突...# BEM BEM 是一种命名约定，它可以帮助您更好地组织样式。BEM 代表块（block）、元素（element）和修饰符（modifier），它们可以组合在一起，用于将大型界面拆分为独立的块。...块（block）：用于描述，通常由类表示在第一眼看上去就告诉我们该类表示什么块（block）有以下规则块可以嵌套可以有任意数量的嵌套级别

1.3K2 0

29、地址列表

Github：https://github.com/Ewall1106/mall 1、写在开头关于vant组件的安装及引入的请移步：有赞Vant组件库的引入；对于地址列表我们使用AddressList...地址列表初步呈现效果 3、改变颜色（1）关于颜色的改变前面在做轮播图的时候我们已经处理过，当时我们的解决方法是用在开发中工具中找到它的class类名，然后我们使用vue的穿透选择器改变这个类名的基本样式...（2）这里我们说另一种更好方法我们去vant官网定制主题中可以看到，官网是这样说的： Vant提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。...其实这个我理解的也不是很透彻，不过大概就是一种设计思想，将css的命名进行了规范，然后就是抽离了css样式文件，一个样式对应一个html块，我这里丢两篇文章，大家可以看看： CSS BEM 书写规范...首先，我们新建一个overiride.css文件，专门用于覆盖组件的样式；然后，我们F12打开开发者工具，看看这个AddressList.vue的√图标类名； ?

8674 0

我的 CSS 就是这么可爱——如何组织 CSS

层级控制不超过 3 层，避免了过多嵌套层级“恶心”人遵循了 BEM 命名规范，潜在的传递了关于元素之间的层级关系总结起来就是：将代码的逻辑关注点分割个多个开发者可以轻易消化的小块，同时做到一定意义的自解释...这样可以让我们很容易定位到对应的 html 元素，从而进行样式的修改。对于这条原则的实现，社区已经有了一套很完善的方案：BEM 命名。...这套规范即避免了不同文件下的命名冲突，还很好的赋予了 CSS 类名的语义化。让我们的脑子对于 CSS 那种模糊的印象变得条理清晰。...BEM 命名将额外的页面结构信息塞到了 CSS 类名上了，让开发者不至于摸不清 CSS 的对应 DOM 结构。...例如一个用来移除默认列表样式的类，我们打算将其展示为灵活样式或者其他样式。

6143 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭