开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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入门

一开始，Yandex公司推出的BEM，包括了规范以及其配套构建工具。如今提到的BEM主要是指其中的规范，在BEM最新的推广页中，对其的描述为：

02

浅谈 Css 规范

BEM（Block-Element-Modifier）是一种 CSS 模块化方法，旨在简化 CSS 编写并提高代码的可读性和可维护性，它将 HTML 元素划分为三个部分: 块（block）、元素（element）和修饰符（modifier）。

01

CSS — BEM 命名规范

BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。

03

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

上文「前端工程四部曲」模块化的前世今生（上）中我们主要介绍了JS模块化相关的知识，对于JS模块化，相信很多人都不陌生，但说起CSS模块化，可能大家就没有这么清晰了。大部分人都会重点关注JS而忽略CSS，但CSS也是前端三剑客不可或缺的一部分，在编写CSS的时候，绝大多数人都是比较随意的，所以会经常造成一些开发痛点。接下来这篇文章我们就来简单聊一聊 CSS 模块化。

02

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

在规则声明中，“选择器” 负责选取 DOM 树中的元素，这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子：

02

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

在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器或元素和修饰器的间隔，以中划线 - 来作为块|元素|修饰器名称中多个单词的间隔

06

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

在前端开发中，编写干净高效的代码可以使程序员变得更优秀。无论是个人项目、合作任务、敏捷开发项目还是求职测试项目，都很重要。开发者通常会忽视一个基本的部分，那就是实施CSS命名规范，有些人会在调试和管理庞大的代码库时才意识到糟糕的CSS代码有多可怕。无论你是否意识到，在编码测试或技术面试中，你的命名习惯都会传达关于你开发实践的信息。它们可以用来评估你的行为和效率。因此，在本文中，我们将展示CSS命名的最佳实践，以提高代码质量。通过阅读本文，读者应该清楚地了解CSS命名规范及其好处，并熟悉不同的样式命名约定。读者的最终目标是为他们提供可操作的见解和实用的建议，以便他们可以将这些规范应用到自己的开发工作流中，以编写更清晰、更高效的代码。

03

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

说起 CSS 命名规范，大家应该都很熟悉，或者应该听说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名方法，旨在帮助开发人员创建更好的且结构一致的 CSS 模块。

01

CSS命名法BEM与scoped、module

刚入行前端的时候，看见了百度的前端代码规范，到现在只是其中的几个点一直有在注意。有兴趣可以看看：百度前端编码规范

02

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

一般我们会直接在Prop 直接接收父组件动态绑定的key，没有类型约束，这样父组件传递任何类型数据都可以，这就存在一定的缺陷了。 eg：例如，某个key 只能传递number类型，你传递过来的是 string 类型，这不就尴尬了。 // 正确做法 props: { status: { type: String, // 类型 required: true // 必填 } }

00

这几个CSS概念你了解吗？

CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。

02

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

最近公司活多，好长时间没有精下心来写文章了。公司刚分配了一个活，这个活是外包过来的，项目整体结构非常差，理解起来费劲。面对这种项目只能硬着头皮上了。

01

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

最近老大在维护别人的代码时，发现我们团队写的样式各有种的想法及风格，这在后续维护会增加一定的难度，所以老大决定统一样式的会名规范，所以就安排我去调研及实践，下面是我调研的结果。

01

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

如何写出一套可维护的CSS库？不妨谈谈CSS的设计模式/架构吧。接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。

03

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

近日，Meta开源了一款「CSS-in-JS库」 —— StyleX。看命名方式，Style - X是不是有点像JS - X，他们有关系么？当然有。

02

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

CSS（Cascading Style Sheets，层叠样式表）是网页设计中用于控制布局和外观的强大工具。选择器是CSS的核心，它允许我们精确地定位HTML元素并应用样式。本文将深入浅出地探讨三种基本CSS选择器——ID选择器、Class选择器、Tag（标签）选择器，分析它们的使用场景、常见问题、易错点以及如何避免这些问题，并提供实用的代码示例。

01

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

无论编写什么文档，我们都应当维持统一的风格，包括统一的注释、统一的语法与统一的命名规范。

01

《精通CSS》第2章添加样式

有效且结构良好的文档是添加样式的基础。上一章，我们一起学习了相关的知识。现在是时候学习一下如何添加样式了。

04

CSS Modules入门教程

或者可以这么说，CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验，具体来说可以归纳为以下几点：

04

您知道SASS吗？

SASS是一种预处理器及样式表语言，由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能，例如变量，嵌套规则，mixin，函数等。

01

post-css/less/sass样式嵌套与命令之"&"符号—BEM

看了《 less 的 & 详解 https://www.jianshu.com/p/127b0974cfc3》，对于此文再做一别补充

02

post-css/less/sass样式嵌套与命令之"&"符号—BEM

看了《 less 的 & 详解 https://www.jianshu.com/p/127b0974cfc3》，对于此文再做一别补充

03

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

一、强制 1. 组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例： export default { name: 'TodoItem', // ... } 复制代码反例： export default { name: 'Todo', // ... } 复制代码 2. 组件数据组件的 data 必须是一个函数。当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。正例： // In a .vue file exp

04

【推荐收藏】10 个最佳实践来让你的CSS代码更加优雅

首先，决定是否真的需要使用 CSS 框架。现在，有许多替代轻量级健壮（robust）框架的方法。通常，你不需要使用框架中的所有选择器，所以你的包中会包含死代码（dead code）。

03

css模块化及CSS Modules使用详解

什么是css模块化？为了理解css模块化思想，我们首先了解下，什么是模块化，在百度百科上的解释是，在系统的结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件，来处理复杂、大型的软件。看完模块化，是不是有种拼图的即视感，可以把大图分成各个小图，然后把小图拼成大图，分与合的艺术感。那么css模块化思想，也就是在css编写环境中，用上模块化的思想，把一个大的项目，分解成独立的组件，不同的

改善CSS的10种最佳做法

英文 | https://medium.com/better-programming/10-best-practices-for-improving-your-css-84c69aac66e

01

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

作者｜jaychen 原文｜https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552192&idx=1&sn=5342d6ea6d77

01

vue项目前端规范

// 数组解构赋值 const arr = [1, 2, 3, 4] // bad const first = arr[0] const second = arr[1] // good const [first, second] = arr

05

编写模块化CSS——BEM

本文翻译自Zell的博客——【Writing modular CSS (Part 1) — BEM】，原文地址：https://zellwk.com/blog/css-architecture-1/

07

从element-ui源码来看BEM实现

以前看过一些CSS的编码规范，也照着规范编写代码，但是还是觉得自己的CSS编码风格不是很好，在平时开发中使用各个知名的组件库的时候，发现现在挺多组件库都是BEM的命名风格了，于是找了比较知名的element饿了么前端的组件库的源码，想从看饿了么组件库的代码入手，学习学习大厂的的CSS BEM规范代码的书写风格。

03

改善CSS的10种最佳做法

CSS似乎是一种非常简单的语言，很难在其中犯错误。你只需添加样式规则，就可以对网站进行样式设置了，对吗？对于只需要几个CSS文件的小型网站，情况可能就是这样。但是在大型应用程序中，样式可能会迅速失控。你如何使它们易于管理？

02

既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢？

在你开始阅读这篇文章之前，一定要做好心理准备。因为我写的 90％都是在发牢骚，只有最后大概 10% 介绍 CSS 技巧之最佳实践。提前给你们打好预防针啦。

02

CSS模块化的演进

| 导语 CSS 做为 Web 技术的基石，从一开始就展示出了巨大的潜力。它的入门非常简单，你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升级越来越丰富，前端业务复杂性的增加也使得工程愈加庞大。在大型 Web 应用里面，CSS 的组织是一件复杂和凌乱的事情，你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。由于 CSS 本身并不编程特性，因此在演变过程中出现了很多优秀的编程思想，本文会带领大家探讨 CSS 模块化的演变历程。 CSS 预处理器 CSS 预处理器是什

02

CSS命名规范之BEM-源自Yandex的CSS命名方法论

BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。我们常见的BEM命名方式一般都是经过改良的，本文介绍的是Nicolas Gallagher（Twitter前端工程师）的改进版。命名约定的格式如下：

01

5个需要避免的CSS错误

正如我们今天所知，CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其他媒体中的展示方式。

01

在大型项目中组织CSS

这句话你之前可能听过100次了。原因是CSS中的一切都默认为全局的。如果你是一个C程序员你就知道全局变量不好。如果你是任何一种程序员，你都知道隔离和可组合的模块是构建可维护系统的关键。

02

React 设计模式 0x4：样式

在每个 Web 应用程序中，样式化非常重要，因为样式使其对用户非常有吸引力，并为用户提供良好的体验。在 React 中有不同的方法来实现这一点。

02

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

我听说很多开发者厌恶 CSS。而在我的经验中，这往往是由于他们并没有花时间来学习 CSS。 CSS 算不上是最优美的『语言』，但迄今二十多年来，它都是美化 web 举足轻重的工具。从这点来说，也还算不

大型项目中的结构化CSS

你也许听说过不下100 次了。因为在CSS中默认都是全局的申明。如果你是个C的程序员你知道全局变量是糟糕的。同时不管你是什么程序员，你该了解独立及可组合的模块是一个可维护系统的关键所在。

04

怎样才能写出更好的 CSS

让我们开门见山：编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行，但是 CSS 还是算了吧。

01

CSS 样式书写规范

可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是希望可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规范。也希望可以有更多的建议，共同的完善。本规范也可以在我的 Github 上看到，欢迎留言或者提 PR。我觉得不同的规范都有各自的长处与缺陷，对待所谓的规范最

07

如何更优雅的编写CSS代码

直白的说：编写优秀的 css 代码可能是很痛苦的。很多程序员都不想从事 CSS 开发—我可以做任何事情，除了css以外。

01

PostCss学习笔记，持续记录

CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。

01

作用域 CSS 回来了

快来免费体验ChatGpt plus版本的，我们出的钱体验地址: https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

01

29、地址列表

（1）关于颜色的改变前面在做轮播图的时候我们已经处理过，当时我们的解决方法是用在开发中工具中找到它的class类名，然后我们使用vue的穿透选择器改变这个类名的基本样式，从而实现样式的覆盖。

04

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

这篇文章是我在6年前刚进鹅厂时写的，虽显青涩，但不乏干货，其中的一些前端小技巧，在当时也帮助不少人打开视野，解决实际问题。这次翻出来重新润色，并对已过时的知识进行更新和补充，希望依然能帮到你们，尤其是刚入门的前端工程师。

02

CSS @scope 如何取代 BEM

前端工程师最常见且最具挑战性的问题之一是 CSS 命名约定。随着 Block Element Modifier（BEM）方法的流行，许多人习惯于按照一种可维护的模式组织他们的样式。

01

科普 | 一文详解 CSS-in-JS

几年前，如果有人提到用 JavaScript 编写 HTML 作为构建大型网站的一种方式，很多开发者会当这作不可理喻的想法，但是现在，使用 React、Vue 和 Angular 框架为组件开发的应用正在慢慢替代传统的 Web 开发。

02

50个有价值的CSS编写规则，让你写出更好的CSS

我最近写了篇《掌握和成为更好的Web开发人员的15件事》（地址：https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意识到编写CSS不仅需要专注于某些功能。

02

CSS工程化

一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭