BEM 规范及实战快速生成

这篇文章我将基于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尝试一下~

 

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>

Step