BEM 规范及实战快速生成

最新推荐文章于 2025-05-30 12:03:18 发布
原创 最新推荐文章于 2025-05-30 12:03:18 发布 · 590 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文详细介绍了BEM（Block, Element, Modifier）规范，包括其定义、使用原因和实例。通过Yike-Design组件库的开发，阐述了如何划分块、元素和修饰符，以及如何快速生成符合BEM规范的类名。文章还讨论了BEM在提高代码可读性和维护性方面的优势，并提供了使用方法和源码分析。" 78669440,7376950,Android 6.0+ 实现通话功能代码详解,"['Android开发', '通话功能', '权限管理']

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这篇文章我将基于Yike-Design组件库的开发具体讲述BEM规范

在此基础上我将介绍在实际开发过程中运用的命名空间方法以快速生成符合BEM规范的类名

1. 什么是BEM

BEM（Block, Element, Modifier）是一种前端编码规范，用于命名 HTML 和 CSS 中的类和选择器。它旨在提供一种一致的方式来组织和命名代码，使其易于理解、扩展和维护。

以下是 BEM 规范的基本原则：

  1. 块（Block） ：块是一个独立的可重用组件，它代表一个完整的实体。它是整个 BEM 结构中最高层级的部分，应该有一个唯一的类名。 示例：.yk-button、.yk-navbar
  2. 元素（Element） ：元素是块的组成部分，不能独立存在。它们依赖于块的上下文，并且有属于块的类名作为前缀。 示例：.button__text、.navbar__item
  3. 修饰符（Modifier） ：修饰符用于修改块或元素的外观、状态或行为。它们是可选的，可以单独使用或与块或元素的类名结合使用。 示例：.yk-button--large、.yk-upload__item--active

2. 为什么我们要使用BEM

  1. 提供一种一致的命名约定，使团队可以更轻松地理解和维护代码
  2. 促进可重用性和模块化开发
  3. 减少 CSS 的特异性（specificity）问题，避免组件间样式冲突

bem这套规范其实非常符合"组件化"、"模块化"的直觉,用"块"维护一个组件，用"块儿"中的元素维护一个独立的组成部分,这种具备层级的结构其实也是我开发过程中经常采用的思路，后续在开发过程中也应当采用此规范，并根据我们的公共方法进行快速的类名定义

3. 实例

理论说完了，让我们用一个实例来具体说说我在开发时的具体的结构设计和思路，这边我挑一个并不是我写的组件Checkbox尝试一下~

image.png

 

Step1. 确定组件结构和"块"的划分

显然，从组件设计上讲，我们会倾向于用checkbox-group.vue和checkbox(-item).vue这两个组件来分别维护多选组和多选选项，那么我们在编码时，便确定了yk-checkbox和yk-checkbox-group这两个顶层"块儿"

  • checkbox.vue
html复制代码<div class="yk-checkbox">
    ...
</div>
  • checkbox-group.vue
html复制代码<div class="yk-checkbox-group">
    ...
</div>

Step2. 区分元素

对于一个chekbox而言，可以划分的元素就应该是左边的选框box和右边的选项文字 label 了，我们可以将选框内部的icon图标作为选框内部的一

最低0.47元/天 解锁文章

200万优质内容无限畅学
Cipher_Y
关注
前端领域：Less 与 BEM 命名规范的结合
AI架构全栈开发实战笔记
05-16 842
在现代前端开发中，CSS的可维护性和可扩展性一直是开发者面临的重大挑战。随着项目规模的扩大，传统的CSS编写方式往往会导致样式冲突、命名混乱等问题。本文旨在探讨如何通过将Less预处理器与BEM命名规范相结合，构建一套高效、可维护的样式开发体系。本文首先介绍Less和BEM的基本概念，然后深入分析两者的技术原理和优势。接着，我们将探讨如何将两者结合使用，并提供具体的实现方案和代码示例。最后，我们将讨论这种结合在实际项目中的应用场景和最佳实践。Less。
7.5 ChatGPT生成React组件实战：10倍效率的AI编码技巧与避坑指南
yonggeit的博客
04-23 300
AI 辅助开发, React 组件生成, 前端调试技巧, API 集成策略, 代码优化模式。
【CSS】BEM 命名规范
STATICHIT静砸的博客
11-19 3814
最近团队要考虑代码风格统一Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线：双下划线用来连接块和块的子元素_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。
vue-bem-cn-Vue.JS的简单BEM类名生成器。-Vue.js开发
05-27
vue-bem-cn用于Vue.JS 2. *的简单BEM样式类名生成器。目录快速示例安装用法API快速示例实时演示：codepe vue-bem-cn用于Vue.JS 2的简单BEM样式类名生成器。*目录快速示例安装用法API快速示例实时演示：codepen阻止ui按钮。 Vue单个文件组件： :thumbs_up:
大厂必备知识---BEM 国际命名规范
CbukeJ的博客
05-30 79
是一种流行的 CSS 命名规范，旨在提高代码的可维护性、可扩展性和协作效率。它通过清晰的命名规则和模块化的设计理念，帮助开发者构建可复用的 UI 组件。下面，本文将结合WEUI项目实例，详细解析 BEM 的核心概念，并展示其在实际开发中的应用。
BEM规范
lixiaolong240035的博客
08-26 3294
BEM规范BEM是什么?BEM包含的内容Block特点例子Block使用指南嵌套例子Element特点例子Element使用指南嵌套例子嵌套例子从属性例子从属性例子可选性例子我应该创建Block还是Element?创建Block创建ElementModifier特点Modifier的分类1.布尔类型例子1.Key--Value类型例子Modifier使用指南不能脱离Block或者Element独立使用例子Mix特点例子 BEM是什么? BEM (Block, Element, Modifier)是一个基于组
BEM规范：构建可维护的CSS
wxid_mtnujb6ipc0322的博客
10-10 813
BEM是一种命名约定，旨在使CSS代码具有更好的可读性和可维护性。块（Block）：块是页面上具有独立功能的可重用组件。可以将块视为页面上的一个模块，它可以包含其他块或元素。块的类名以一个描述性词汇作为前缀，使用连字符进行连接，例如：.block。元素（Element）：元素是块的组成部分，它们不能独立存在，并且具有与块相关的语义。元素的类名由块的类名作为前缀，使用双下划线连接，例如：.block__element。修饰符（Modifier）：修饰符用于改变块或元素的外观、状态或行为。
什么是 BEM 规范
narukeu的博客
07-05 559
BEM（Block, Element, Modifier）是一种 CSS 命名规范，旨在提高代码的可读性和可维护性。BEM 规范通过明确的命名规则来定义组件和组件的各个部分，使开发者能够更容易地理解和维护代码。
BEM 命名规范：理解与实践
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-01 2226
在前端开发中，CSS 类名的命名方式对于维护项目的可读性和可扩展性至关重要。BEM（Block Element Modifier）是一种流行的命名约定，旨在帮助开发者编写更易于理解和维护的 CSS 代码。本文将深入探讨 BEM 的概念、优势以及如何在实际项目中应用这一规范。BEM 代表 Block Element Modifier，这是一种 CSS 类名命名方法论，由 Yandex 公司提出。BEM 的核心理念是将页面拆分成独立的、可复用的组件（块），并通过明确的类名结构来组织样式。
css命名规范——BEM
zhanggongzichu的博客
01-23 1198
css命名规范-BEM
CSS的BEM规范
Kylin的博客
11-29 3298
BEM规范学习 在实际项目中，经常可以看到以下类似这样的css样式，这种就是CSS命名规范——BEM思想 BEM 是块（block）、元素（element）、修饰符（modifier）的简写 主要缺点就是命名很长 __和--的区别 __表示的就是下级元素 --表示的是不同的形态 就是另一个类名，另一种样式，就像overview__row中有公共的样式，而overview__row--right中具有非公共的样式，是特有的样式 &符号表示嵌套的上一级 之所以是两个连接符和
BEM命名规范
m0_62811051的博客
08-09 474
BEM（Block, Element, Modifier）是一种前端编码规范，用于命名 HTML 和 CSS 中的类和选择器。它旨在提供一种一致的方式来组织和命名代码，使其易于理解、扩展和维护。展开来说，BEM 是块（block）、元素（element）、修饰符（modifier）的简写，利用不同的区块，功能以及样式来给元素命名。块（Block）：块是一个独立的可重用组件，它代表一个完整的实体。它是整个 BEM 结构中最高层级的部分，应该有一个唯一的类名。如下表示：el-input。
BEM：css命名规范
qq_34498806的博客
11-03 890
(Block-Element-Modifier)，块、元素、修饰符，是一种CSS命名规范，旨在前端开发中创建可重用组件和代码共享的方法，使样式易于扩展，易于维护，易于理解规范：1、页面上独立的组件，具有明确的语义和功能。每个块都有自己的命名空间（如element的命名空间为el，），单词之间以连字符（-）分隔。例如：element的input组件el-input2、组成块的不同元素，不能独立存在，依赖于块的上下文，元素名称以块名称为前缀，用双下划线分隔（__）。
bem规范
weixin_48160591的博客
10-11 136
这样就通过混合的方式把位置样式从块中剥离了，可以在.top__search-form中设置表单的位置或浮动等样式，保持了 search-form块的样式独立，对其完整样式代码进行了解耦。举个例子说明，例如我们将top块中的search-form块移动到bottom块中，想要保证整体不会乱，就需要search-form块的CSS必须是独立的。需要注意的是块应该是独立的，当在页面中添加，删除，或者是移动某个块时，不需要对块进行修改。每个块的块名必须是唯一的，用于明确指出它所描述的是哪个块。
CSS规范--BEM入门
weixin_34236869的博客
06-27 183
这段时间在整理前端部分的代码规范，前面提到的CSS规范里面会涉及到选择器的命名，就参考BEM的命名规范，内容整理如下，供大家参考，请斧正！如大家有兴趣，可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名规范，官方是这么描述它的： BEM是一种让你可以快速开发网站并对此进行多年维护的技术。 一开始，Yandex公司推出的...
『精』CSS 小技巧之BEM规范
贤哲XianZhe的博客
12-27 2354
BEM风格规范指的是 Block、Element、Modifier 这三者的简称，这个规范将 CSS 拆分成块、元素、修饰符，根本作用是帮助开发者快速理解HTML与 CSS 之间的关系。那么通过使用 BEM 能获得到什么好处呢？如果我们想制作一个组件的新样式，比如改个字体/背景色，可以很容易地看到有哪些样式项已经存在，只需要新增一个修饰符即可，甚至可能意识到一开始就不需要编写任何样式，有一个预先存在的修饰符可以满足我们的需求。
bem 命名规范
zw19940808的博客
10-19 382
BEM代表“块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。 在选择器中，由以下三种符号来表示扩展的关系： - 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 1、中划线, 用于单词之间的连接 例: <div class = ' banner-list '> ...
采用 BEM 命名法
最新发布
06-21
<think>我们被要求回答关于BEM命名法使用指南的问题，并给出示例。同时，我们需要参考用户提供的引用内容，特别是引用[1]、[3]、[4]中关于BEM的部分。根据引用内容，我们可以总结以下要点：1.BEM代表块（Block）、元素（Element）、修饰符（Modifier）。2.BEM是一种命名约定和整体组织方法，旨在解决CSS命名冲突和可维护性问题。3.BEM中的“块”指的是可重用的独立组件，“元素”是块的组成部分，“修饰符”表示块或元素的状态或变化。4.在命名时，使用双下划线（__）连接块和元素，使用双连字符（--）连接块或元素与修饰符。5.避免使用子代选择器，而是使用BEM的完整命名（如.popup__confirm-btn）来避免样式冲突。接下来，我们将按照以下结构组织回答：1.BEM的核心概念：解释块、元素、修饰符。2.BEM的命名规则：详细说明命名规范。3.BEM的实践示例：通过具体代码示例展示如何使用。4.BEM的最佳实践和常见误区：引用[4]中提到的避坑指南。5.总结：BEM的优势和适用场景。同时，我们将生成相关问题。注意：由于引用[1]提到BEM中的“块”和“元素”与HTML概念有重叠但不同，我们在解释时会注意区分。开始回答：</think>### BEM 命名法使用指南与最佳实践 BEM（Block, Element, Modifier）是一种结构化 CSS 命名方法论，旨在解决样式冲突、提升代码可维护性和团队协作效率。以下是核心规则与实践示例： --- #### 一、BEM 核心概念 | 概念 | 描述 | 命名规则示例 | |-------------|----------------------------------------------------------------------|--------------------------| | **块 (Block)** | 独立可复用的组件单元（如导航栏、卡片） | `.header` `.card` | | **元素 (Element)** | 块的组成部分，**不能独立存在**（如卡片的标题、按钮） | `.card__title` `.btn__icon` | | **修饰符 (Modifier)** | 表示块/元素的状态或变体（如禁用状态、大小调整） | `.btn--disabled` `.card--large` | --- #### 二、命名规则详解 1. **连接符规范** - 块与元素：**双下划线** `__`（`.block__element`） - 修饰符：**双连字符** `--`（`.block--modifier` 或 `.block__element--modifier`） - 避免使用子代选择器（错误示例：`.card .title` → 正确：`.card__title`）[^4] 2. **命名原则** - 使用小写字母和连字符（Kebab Case）：`.search-form` - 语义化命名（如 `.user-avatar` 而非 `.round-image`） - 修饰符需绑定基础类（不单独使用）： ```html <!-- 正确：基础类 + 修饰符 --> <button class="btn btn--primary">Submit</button> ``` --- #### 三、实战代码示例 ```html <!-- 块：用户卡片 --> <div class="user-card"> <!-- 元素：头像 --> <img class="user-card__avatar" src="avatar.jpg"> <!-- 元素：名称（带修饰符） --> <h2 class="user-card__name user-card__name--highlighted">John Doe</h2> <!-- 元素：按钮（带状态修饰符） --> <button class="user-card__btn user-card__btn--disabled">Follow</button> </div> ``` ```css /* 块样式 */ .user-card { border: 1px solid #eee; padding: 16px; } /* 元素样式 */ .user-card__avatar { width: 80px; border-radius: 50%; } .user-card__name { font-size: 1.2rem; } /* 修饰符样式 */ .user-card__name--highlighted { color: #f39c12; } .user-card__btn--disabled { opacity: 0.6; cursor: not-allowed; } ``` --- #### 四、BEM 最佳实践与避坑指南 1. **避免深度嵌套** - 错误：`.user-card__info__contact__email` - 正确：重构为独立块（如 `.contact-email`） 2. **修饰符作用域** ```css /* 错误：全局污染 */ .--large { font-size: 2rem; } /* 正确：绑定具体块/元素 */ .btn--large { padding: 12px 24px; } ``` 3. **与预处理器结合**（Sass/Less） ```scss // 嵌套写法保持BEM结构清晰 .user-card { &__btn { background: blue; &--disabled { background: grey; } } } ``` 4. **工具链支持** - 自动生成BEM类名：PostCSS插件（如 `postcss-bem`） - Lint工具：Stylelint规则 `selector-bem-pattern` --- #### 五、BEM 核心优势 1. **样式隔离**：避免全局污染（`.page-header` 与 `.article-header` 互不影响）[^4] 2. **自文档化**：类名直接揭示结构关系（新人快速理解代码）[^4] 3. **复用性高**：块可跨项目复用，修饰符灵活扩展状态 4. **协作友好**：团队共享统一命名规则，减少沟通成本[^3] > 适用场景：中大型项目、组件库、团队协作开发[^3] --- ### 总结 BEM 通过严格的命名规则将 UI 分解为**块-元素-修饰符**的三层结构，从根本上解决 CSS 命名冲突问题。其核心价值在于： - **可预测性**：通过类名直接判断元素作用 - **可维护性**：修改组件样式不影响其他部分 - **可扩展性**：通过修饰符快速创建变体 > 示例项目：GitHub 的 Primer CSS、Yandex 的框架均采用 BEM[^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值