开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

BEM是否有区分状态选择器和子类选择器的约定？

BEM（Block Element Modifier）是一种前端开发的命名约定，用于组织和命名CSS类。它的目标是提供一种清晰、可维护和可扩展的方式来编写CSS代码。

BEM约定中确实有区分状态选择器和子类选择器的规定。

状态选择器：BEM约定中使用双下划线（__）来表示一个块元素的不同状态。状态选择器用于表示块元素在不同状态下的样式变化。例如，一个按钮块元素可以有不同的状态，如激活、禁用等。在BEM约定中，我们可以使用类似button__state--active的命名来表示按钮块元素的激活状态。
子类选择器：BEM约定中使用单连字符（-）来表示一个块元素的子元素。子类选择器用于表示块元素内部的子元素。例如，一个导航栏块元素可以包含多个导航项子元素。在BEM约定中，我们可以使用类似navbar-item的命名来表示导航栏块元素的导航项子元素。

BEM约定的优势包括：

可读性强：BEM约定使用清晰的命名规则，使得代码易于理解和维护。开发人员可以快速了解一个元素的作用和关系。
可扩展性好：BEM约定提供了一种模块化的方式来组织CSS代码，使得代码的扩展和重用更加容易。开发人员可以独立地修改和扩展每个块元素，而不会影响其他元素。
低耦合性：BEM约定鼓励使用块元素和子元素的组合方式来构建页面，减少了CSS选择器的嵌套和依赖关系，从而降低了代码的耦合性。

BEM约定适用于各种前端开发场景，特别是大型项目和团队协作。它可以帮助开发人员更好地组织和管理CSS代码，提高开发效率和代码质量。

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

腾讯云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于图片、视频、文档等各种类型的文件存储。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等，帮助开发人员构建智能化应用。详情请参考：https://cloud.tencent.com/product/ai

相关搜索:是否有"以前的兄弟"CSS选择器？是否有类前缀的CSS选择器？是否有针对xPath选择器的在线测试器？如果javascript未启用，是否有适用的css选择器？对于包含输入的输入域，是否有CSS选择器？React是否有允许自由格式化自由输入的日期选择器以及日历选择器是否有提供单周视图的免费react日期选择器？用于检查是否有默认应用程序的选择器意图是否有带日期块的React Native日期范围选择器派生的HTML自定义元素是否有CSS选择器？是否有一个CSS选择器来排除特定的分支？Android:背景中有波纹和状态选择器的按钮:找不到资源异常是否有更快的方式在IE7中提供":before"和":after"选择器支持？我如何使我的Bootstrap日期选择器工作，是否有一个“官方”Bootstrap 3日期选择器？匹配锚点和div悬停状态的选择器与超链接不匹配 kubernetes (eks)中是否有外部dns的选择器可以路由到正确的fargate实例？是否有一个jQuery选择器来获取可以获得焦点的所有元素？是否有可能在Sass/SCSS中使用选择器作为参数的函数/混合/速记？是否有可能在方案的构建后操作中区分建筑和清洁？是否有一个jQuery选择器/方法来查找特定的父元素n级别？

相关搜索:

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

有帮助

没帮助

相关·内容

CSS规范--BEM入门

理想的状态下，我们开发一套组件的过程中，我们应该可以随意的为其中元素进行命名，而不必担心它是否与组件以外的样式发生冲突。...BEM最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用（不使用）它。随着接触的多了，有了经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。 4 你是不是用错BEM了？...关于BEM修饰器 BEM修饰器代表着元素的状态，但有时候元素的状态需要js来控制，此时遵循规范没有任何好处，比如激活状态，BEM推荐的写法是： .block__element { display...在项目中，使用原子类之前应该考虑一下，这个场景是否变动大而且不可复用，如果是的话，我们可以放心的使用原子类。...*/ } 这还仅仅只有两个组件而已，实际项目中，十几个或几十个组件，难道我们要每个组件都检查一下来“新组件名是否和以往组件的子元素命名冲突了”么？

1.2K2 0

浅谈 Css 规范

可读性和可维护性: BEM 使用简洁明了的命名约定，使得 CSS 代码易于理解和维护。增强可扩展性: BEM 的结构使得页面元素易于扩展和修改，不会影响其他部分的样式。...避免样式冲突: BEM 的命名约定避免了样式冲突，每个块和元素都有独立的命名空间，不会受到外部样式的影响。缺点: 命名冗长: BEM 的命名规范较为严格，可能导致类名过长，增加了代码量和阅读难度。...两个基本原则: 独立的结构和样式（即不要将定位、尺寸等布局样式与字体、颜色等表现样式写在一个选择器中）。...命名规则 SMACSS 推荐使用前缀来区分不同部件: 基础规则是直接作用于元素的，因此不需要前缀，一般使用元素、属性、伪类等选择器。不应该出: class、ID、!important 等。...命名约定：ITCSS需要遵循一定的命名约定和规范，有时可能需要花费额外的时间和精力来命名和组织样式代码。可能导致过度设计：过度遵循ITCSS的规范可能导致样式表过度设计，增加不必要的复杂性。

941 0

CSS — BEM 命名规范

__ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...1.1 BEM 命名模式 BEM 命名约定的模式是： .block {} .block__element {} .block--modifier {} 每一个块(block)名应该有一个命名空间（...block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。 block--modifier 代表 .block 的不同状态或不同版本。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...BEM 格式在当前流行的 Vue.js / React / Angular 等前端框架中，都有 CSS 组件级作用域的编译实现，其基本原理均为利用 CSS 属性选择器特性，为不同的组件生成不同的属性选择器

2.7K3 1

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

目录术语规则声明 选择器 属性CSS 格式注释 OOCSS 和 BEM - ID 选择器 JavaScript 钩子 - 边框Sass 语法排序变量 Mixins 扩展指令...如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。不要使用 ID 选择器。在一个规则声明中应用了多个选择器时，每个选择器独占一行。...给没有自注释的代码写上详细说明，比如：为什么用到了 z-index 兼容性处理或者针对特定浏览器的 hack OOCSS 和 BEM 出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：...”，是一种用于 HTML 和 CSS 类名的命名约定。...BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。

2.4K2 0

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

BEM BEM 是一种非常有用、强大且简单的命名约定，可以说是一个CSS命名规范，也可以说是一种思想。它使前端代码更易于阅读和理解、更易于使用、更易于扩展、更健壮和明确，并且更加严格。...这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。...而 BEM 就不一样了，虽然看上去很丑，但我们能清晰地看到有个叫 .site-search 的块，它内部是 .site-search__field 和 site-search__button 两个元素。...，它们实现的功能除了一些最基本的如 CSS 局部作用域之外还有一些独有功能，就比如下面这些：全局选择器 基于状态的样式客户端与服务器端渲染缓存内置自动前缀媒体查询 选择器嵌套内置动画支持其他插件和软件包...「优点：」优点有很多，比如 CSS in JS 本质上是 JavaScript 代码，因此我们可以将复杂的逻辑应用于样式规则，例如循环、条件、变量、基于状态的样式等等，这样的话如果我们需要创建有动态功能的复杂

7222 0

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

BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长...）如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block）属于块的某部分，可作为一个元素（Element）用于修饰块或元素，体现出外形行为状态等特征的...，可作为一个修饰器（Modifier）在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器或元素和修饰器的间隔，以中划线 - 来作为块|元素|修饰器名称中多个单词的间隔...，不使用ID或标签名来约束选择器，且CSS（或者SCSS编译后的CSS）中的选择器嵌套不超过2层，增加效率和复用性，减少选择器之间的耦合度比较常见的嵌套情景：需要通过块状态对内部元素进行调整时 .search-form...，某些时候有必要） */ .search-form_theme1 .search-form__input {} /* 错误：使用了标签 */ button.search-form__button {

9816 1

jQuery中，$.和$().有什么区别以及多个选择器的执行

$代表jQuery对象，同时也是一个函数对象 $()和jQuery()是jQuery的核心函数，执行这两个元素返回的是一个DOM元素 $()是一个函数，等同于jQuery()，可在括号内传参数，传参后可获取元素...$(“.one”)表示获取class=“one”的元素，返回一个jQuery对象 $(”.one”).onclick表示class=”one”的点击事件 $.post() $.get() $.ajax...() 都是jQuery对象的方法 jQuery中，多个选择器是依次执行的，不是同时执行的，是在上一个选择器执行完的基础上，才开始执行下一个。...例如：$(“li:gt(0):lt(2)”) // 选择第二个和第三个li,gt(0)表示下标大于0的，lt(2)表示下标小于2的。...下标大于0为黑色区域，此时，下标为1的蓝色区域下标变为0，下标为3的粉色区域下标变为1，执行过滤选择下标为2后，即为红色框内，也就是最初的下标为1和2的元素，即第二个和第三个li元素(假设所有的颜色框均为

1.2K4 0

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

现在用 Bootstrap 的弹窗组件，举一个更加具体的例子：鼠标放上去和没放上去的状态是有区别的。...另外，现在网上已经有非常多的文章在介绍 BEM 了，耐心找，肯定能找到优秀的教程的。今天的文章会分享比较少人介绍的两种 CSS 方法论：SUIT CSS 和 SMACSS。...命名规则：[-][-后代名][--修饰符]，这样的命名方式，在编写 HTML 和 CSS 的时候有几个好处：有助于区分组件的根元素，后代元素，以及用来修饰的类；降级类名重复的几率...SMACSS 中允许在布局样式中，使用 ID 选择器，有助于在 HTML 中一眼区分出节点在布局中的位置。其他的非 ID 选择器的类，需要添加 l- 前缀，表示这属于布局样式。...状态规则状态是用来描述模块在不同状态下的外观，使用 is- 前缀，这有助于我们在 HTML 中区分元素的状态。

9701 0

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

开发者通常会忽视一个基本的部分，那就是实施CSS命名规范，有些人会在调试和管理庞大的代码库时才意识到糟糕的CSS代码有多可怕。...无论你是否意识到，在编码测试或技术面试中，你的命名习惯都会传达关于你开发实践的信息。它们可以用来评估你的行为和效率。因此，在本文中，我们将展示CSS命名的最佳实践，以提高代码质量。...相关的样式：与相关元素相关的样式块应放置在样式表中。简洁的CSS选择器：CSS选择器不应过长或过于嵌套，也不应使用复杂的后代选择器。适当的选择器命名：选择器应该具体命名为其应用的元素。...BEM（块、元素、修饰符）：BEM是一种流行的CSS命名约定，由俄罗斯科技公司Yandex开发，旨在提供一种模块化的CSS样式方法，提供代码可重用性，并使大规模CSS的维护成为可能。...标准化命名和前缀：采用统一的命名约定（例如，BEM的块名称或原子CSS类）应该在整个项目中标准化，并保持一致性。

3853 0

Vue多人协作开发规范统一指南

面对这种项目，首先得总体有个思路：将大模块拆分成小模块，一个一个的突破，找到其中之间每个组件的联系，这样写增加新的业务就上手容易一点了。其实Vue项目，主要搞清楚这几点，上手相对容易一点。 1....key 配合 v-for，以便维护内部组件及其子树的状态。...-- 使用 BEM 约定 --> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color...第二种方式 components/ |- MyComponent.vue 基础组件命名 ❝「应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如...❝在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

1.7K1 0

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

key 配合 v-for，以便维护内部组件及其子树的状态。...官方提供了3中解决方案 scoped Style 中加入 scoped 使用CSS Modules 来设定CSS 作用域` 基于 class 的类似 BEM的策略 // 1, scoped ...-- 使用 BEM 约定 --> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color...第二种方式 components/ |- MyComponent.vue 基础组件命名应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base...在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

1.2K0 0

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

通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。...这里刚开始使用 bem 的时候容易犯一个问题，就是把 ul 和 li 的样式写成 card__content__list 和 card__content__list__item 因为这样更能体现层级的关系...这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...: ignore */ .no-flexbox .Component { display: block; } 总结 BEM 最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用或不使用它...已收录，有一线大厂面试完整考点、资料以及我的系列文章。

7961 0

CSS命名法BEM与scoped、module

有兴趣可以看看：百度前端编码规范 CSS命名其实挺随意的，使用驼峰、-、_都可以，并不影响使用，常用的应该是-和下划线_连接。...平时我们不会关注这个，这其实是CSS的属性选择器，打包的时候给每个标签都添加一个唯一的data-v-hash。...M:modifier 对应节点的状态，disabled 最终class名 dialog__button--disabled 使用BEM的element：el-cascader-node__label、...BEM：隔离和污染做的很好，但是名字太长长，命名困难，多人协作的情况下通过人为约定约束实现BEM太过困难。...在我看来，scoped > module > BEM，引用工具来约束和人为约束肯定是选择使用工具去约束，module和scoped对比，也只是工具对类名的不同处理。

6692 0

前端：Vue前端开发规范，值得收藏！

为组件样式设置作用域对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。这条规则只和单文件组件有关。你不一定要使用 scoped 特性。...设置作用域也可以通过 CSS Modules，那是一个基于 class 的类似 BEM 的策略，当然你也可以使用其它的库或约定。...-- 使用 BEM 约定 --> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color...基础组件名应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。...*/ 复制代码四、谨慎使用 (有潜在危险的模式) 1.

1.5K4 0

通用 CSS 笔记、建议与指导！

BEM 命名法可以使得选择器更规范，更清晰，更具语义。...这样我们就可以根据亲元素来划定选择器的命名空间并传达该选择器的职能，例如根据这个选择器是一个子元素（__）还是其亲元素的不同状态（--）。由此，.page-wrapper 是一个独立的选择器。...BEM 命名法虽然不太好看，而且相当冗长，但是它使得我们可以通过名称快速获知元素的功能和元素之间的关系。与此同时，BEM 语法中的重复部分非常有利于 gzip 的压缩算法。...无论你是否使用 BEM 命名法，你都应当确保 class 命名得当，力保一字不多、一字不少；将元素命名抽象化以提高复用性（例如 .ui-list，.media）。...牢记：class 无所谓是否语义化；应当关注它们是否合理。不要强调 class 名要符合语义，而要注重使用合理且不会过时的名称。过度修饰的选择器 由前文所述，过度修饰的选择器并不理想。

901 0

这几个CSS概念你了解吗？

为了解决冲突就需要进行模块化区分，没有了命名冲突，更好的让组件间沙箱化，而CSS Module就是css模块化的实现方式之一 CSS Module 在打包的时候会将类名转换成带有hash值的新类名，...，它的实现原理是通过PostCSS来实现，通过给想对应的dom新增一个属性，同时给css选择器新增一个对应的属性，来对应这个唯一的dom，如下所示 ?...啊乐同学：你说CSS Module是 css 模块化的一种实现方式，还有其他CSS模块化实现方式吗？有的，比如BEM 命名规范，还有下节会介绍的 CSS in JS 这里简单介绍下BEM ?...答：可以的，styled-components team 专门为Vue开发了一个 vue-styled-components，和React的styled-components用法非常相似，有兴趣可以玩玩...拓展： styled-components 官网 3.CSS 原子类其实这个概念已经很老了，本质上也是一种编写 CSS 的思想，简而言之就是通过用原子类构造选择器，比如我们定义一个base.css

1.6K2 0

vue项目前端规范

，下划线分割单词 # 组件官方文档推荐及使用遵循规则: PascalCase (单词首字母大写命名)是最通用的声明约定 kebab-case (短横线分隔命名) 是最通用的使用约定组件名应该始终是多个单词的...scoped 中出现官方文档说明:在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的分类的命名方法(使用单个字母加上"-"为前缀) 布局（grid）（.g-）...模块（module）（.m-）元件（unit）（.u-）功能（function）（.f-）皮肤（skin）（.s-）状态（.z-）统一语义理解和命名布局（.g-）语义命名简写文档...父级选择器的伪类选择器 (:first-letter, :hover, :active etc) 伪类元素 (:before and :after) 父级选择器的声明样式 (.selected, .active...-- 使用 BEM 约定 --> // good .c-Button { border: none; border-radius: 2px; } .c-Button--close

2.6K5 4

CSS基础-CSS选择器：ID、Class、Tag

Class选择器作用与特点 Class选择器通过元素的class属性来选择元素，具有更高的灵活性和重用性。一个class可以在多个元素上使用，也可以在一个元素上使用多个class。...随意命名class可能导致代码难以阅读和维护。避免：遵循BEM（Block Element Modifier）或其他命名约定，确保class名称具有描述性和语义性。...问题：过度使用，导致选择器权重问题。过多的嵌套和复合class选择器可能导致优先级混乱。避免：尽量保持选择器简洁，合理使用组合选择器和伪类，避免不必要的权重增加。...在实际应用中，合理选择使用哪种选择器，遵循良好的命名规范，可以有效避免样式冲突和维护难题，提升开发效率。...随着CSS的发展，诸如属性选择器、伪类选择器等高级选择器也日益重要，它们进一步丰富了CSS的表达能力，值得深入学习和应用。

6551 0

你了解 JSX，那你了解 StyleX 么？

如果.red和.blue分别在两个文件中定义呢？...有些同学会说，看起来和常见的CSS-in-JS没啥区别啊。那stylex相比于他们的优势是啥呢？... 对于再复杂的样式，stylex都会通过编译生成「可复用的原子类名」。...这种对原子类名的控制粒度是其他「CSS-in-JS库」办不到的。相比于原子CSS的优势 stylex相比TailwindCSS这样的原子CSS有什么优势呢？...这就要谈到原子CSS的一个特点 —— 使用约定好的字符串实现样式。

4142 0

从element-ui源码来看BEM实现

BEM代表“块（block），元素（element），修饰符（modifier）”，开发组件的过程中经常使用这三个实体，而在选择器中，这三个实体由以下符号来表示扩展关系： - 中划线：仅作为连字符使用...__ 双下划线：双下划线用来连接块和块的子元素。 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态。...我在element组件库中的mixins.scss文件中找到了想要的答案。接下来我要讲的就是如何利用sass，编写具有可读性和可维护性的BEM规则的css代码。...，而接下来的三个函数，分别判断了是否存在修饰符、flag例如（.isCenter）、伪类的情况。...上面的所有代码都在这里哦，有需要的可以直接看完整代码学习。

1.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭