--- theme: v-green --- **本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究** ### 前言在软件领域有很多的架构思想，通过不同的架构模式，可以让你的软件工程易拓展、易维护、易复用。同样在 CSS 工程当中，我们也需要使用架构思想，如果 CSS 没有使用架构思想的话，就会存在 CSS 代码极度混乱，难复用、难拓展、难维护等问题。特别是如果一个系统页面极度复杂的情况下，没有对 CSS 代码进行一个规划的话，那么后期维护 CSS 代码则堪称灾难。所以我们需要像其他编程语言那样通过一些架构模式进行提高 CSS 代码的健壮性和可维护性。本文将探讨 Element Plus 组件库中的 CSS 架构思想。 ### CSS 设计模式之 OOCSS 我们如果对 Element Plus 的 CSS 架构稍微有些了解的话，就知道 Element Plus 的 CSS 架构使用了 BEM 设计模式，而 BEM 是 OOCSS 的一种实现模式，可以说是进阶版的 OOCSS。那么什么是 OOCSS 呢？ OOCSS 的全称为 Object Oriented CSS （面向对象的 CSS），它让我们可以使用向对象编程思想进行编写 CSS。面向对象有三大特征：**封装、继承、多态** ，在 OOCSS 中，主要应用到了面向对象的**封装**和**继承**的思想。我们以掘金的下图这个部分来进行说明： ![item.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fcb2a64445446e1ad31b23f8dfbc738~tplv-k3u1fbpfcp-watermark.image#?w=673\&h=152\&s=12512\&e=png\&b=fefdfd) 图中画红色的部分，可以看成是有四个容器组成的，每个容器里面的内容又不一样。那么每个容器都有相同的样式，那么我们就可以进行**封装**。把每一个容器封装成一个叫 `item` 的 `class` ，因为它们都有一些共同的样式。 ```json .item { position: relative; margin-right: 20px; font-size: 13px; line-height: 20px; color: #4e5969; flex-shrink: 0; } ``` 然后如果我们需要对它们每一项进行拓展的话，那么我们只需要在原来的样式基础上进行新增一个 class，再针对这个 class 写不同的样式即可，这样达到**继承**原来基础部分的样式进行拓展自己独有的样式。 ![li.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd5f8ab454d84acebe5e910a36e62322~tplv-k3u1fbpfcp-watermark.image#?w=458\&h=83\&s=6936\&e=png\&b=fffdfd) 通过上图可以得知我们相当于**继承**基础类型 item 后，然后分别拓展出 `浏览 view`、`点赞 like`、`评论 comment`、`更多 more ` 的 CSS 内容。 ```json .item.view { // 浏览 } .item.like { // 点赞 } .item.comment { // 评论 } .item.more { // 更多 } ``` 通过这种模式就大大增加了 CSS 代码的可维护性，可以在没有修改源代码的基础上进行修正和拓展。同时通过上面的例子，我们可以引出 OOCSS 的两大原则： * 容器（container）与内容（content）分离 * 结构（structure）与皮肤（skin）分离例如在 Element Plus 组件库中就有两个经典的布局组件 **Container 布局容器** 和 **Layout 布局**，这是 OOCSS 的典型应用： ![container.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c96558ec365f41d59b163883520b6c2a~tplv-k3u1fbpfcp-watermark.image#?w=373\&h=337\&s=6395\&e=png\&b=ffffff) 实质上我们在写 Vue 组件的时候，就是在对 CSS 进行封装，这也是 OOCSS 的实践方式之一。 ```html 默认按钮 ``` 例如上述代码，我们的 Element Plus 组件库已经对 el-button 组件的样式进行了封装，但我们还可以基于 el-button 组件的样式进行拓展我们符合我们项目 UI 的样式，这就是典型的**封装与继承**。 OOCSS 强调重复使用类选择器，避免使用 id 选择器，最重要的是从项目的页面中分析抽象出“对象”组件，并给这些对象组件创建 CSS 规则，最后完善出一套基础组件库。这样业务组件就可以通过组合多个 CSS 组件实现综合的样式效果，这体现了 OOCSS 的显著优点：**可组合性高**。 OOCSS 为我们提供了一种编写 CSS 代码的思维模型或者说方法论，后续则演化出更加具体的一种实现模式，也就是 BEM。 ### CSS 设计模式之 BEM BEM 是由 Yandex 团队提出的一种 CSS 命名方法论，即 Block（块）、Element（元素）、和 Modifier（修改器）的简称，是 OOCSS 方法论的一种实现模式，底层仍然是面向对象的思想。下面我们从 Element Plus 的 Tabs 组件进行讲解 BEM 的核心思想。 ![tab.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31bbace4a5994112ae7be35226162ec5~tplv-k3u1fbpfcp-watermark.image#?w=543\&h=216\&s=3167\&e=png\&b=ffffff) 那么整一个组件模块就是一个 Block（块），classname 取名为：el-tabs。Block 代表一个逻辑或功能独立的组件，是一系列结构、表现和行为的封装。其中每个一个切换的标签就是一个 Element（元素），classname 取名为：el-tabs\_\_item。Element（元素）可以理解为块里的元素。 Modifier（修改器）用于描述一个 Block 或者 Element 的表现或者行为。例如我们需要对两个 Block（块）或者两个 Element（元素）进行样式微调，那么我们就需要通过 Modifier（修改器），Modifier（修改器）只能作用于 Block（块）或者 Element（元素），Modifier（修改器）是不能单独存在的。例如按钮组件的 classname 取名为 el-button，但它有不通过状态譬如：primary、success、info，那么就通过 Modifier（修改器）进行区分，classname 分别为： el-button--primary、el-button--success、el-button--info。从这里也可以看出 BEM 本质上就是 OOCSS，基础样式都封装为 el-button，然后通过继承 el-button 的样式，可以拓展不同的类，例如：el-button--primary、el-button--success、el-button--info。 BEM 规范下 classname 的命名格式为： block-name__--_ * 所有实体的命名均使用小写字母，复合词使用连字符 “-” 连接。 * Block 与 Element 之间使用双下画线 “\_\_” 连接。 * Mofifier 与 Block/Element 使用双连接符 “--” 连接。 * modifier-name 和 modifier\_value 之间使用单下画线 “\_” 连接。当然这些规则并不一定需要严格遵守的，也可以根据你的团队风格进行修改。在 OOCSS 中，我们通过声明一个选择器对一个基础样式进行封装的时候，这个选择器是全局的，当项目庞大的时候，这样就容易造成影响到其他元素。通过 CSS 命名方法论 [BEM](http://getbem.com/)，则在很大程度上解决了这个问题。因为 BEM 同时规定 CSS 需要遵循只使用一个 classname 作为选择器，选择器规则中既不能使用标签类型、通配符、ID 以及其他属性，classname 也不能嵌套，此外通过 BEM 可以更加语义化我们的选择器名称。BEM 规范非常适用于公共组件，通过 BEM 命名规范可让组件的样式定制具有很高的灵活性。此外通过 BEM 的命名规范可以让页面结构更清晰。 ```html ``` 我们以 Element Plus 的 Form 表单的 HTML 结构进行分析，我们可以看到整个 classname 的命名是非常规范的，整个 HTML 的结构是非常清晰明了的。 ### 通过 JS 生成 BEM 规范名称在编写组件的时候如果通过手写 classname 的名称，那么需要经常写 `el` 、`-` 、 `__` 、 `--`，那么就会变得非常繁琐，通过上文我们可以知道 BEM 命名规范是具有一定规律性的，所以我们可以通过 JavaScript 按照 BEM 命名规范进行动态生成。命名空间函数是一个 hooks 函数，类似这样的 hooks 函数在 Element Plus 中有非常多，所以我们可以在 packages 目录下创建一个 hooks 模块（具体创建项目过程可参考本专栏的第二篇《[2. 组件库工程化实战之 Monorepo 架构搭建](https://juejin.cn/post/7146183222425518093)》），进入到 hooks 目录底下初始化一个 package.json 文件，更改包名：`@cobyte-ui/hooks`。文件内容如下： ```javascript { "name": "@cobyte-ui/hooks", "version": "1.0.0", "description": "Element Plus composables", "license": "MIT", "main": "index.ts", "module": "index.ts", "unpkg": "index.js", "jsdelivr": "index.js", "types": "index.d.ts", "peerDependencies": { "vue": "^3.2.0" }, "gitHead": "" } ``` 接着在 hooks 目录下再创建一个 use-namespace 目录用于创建 BEM 命名空间函数，再在 hooks 目录下创建一个 index.ts 文件用于模块入口文件。 index.ts 文件内容： ```javascript export * from './use-namespace' ``` 本项目的 GitHub 地址：首先引入一个命名空间的概念，所谓命名空间就是加多一个命名前缀。 ```javascript import { computed, unref } from 'vue' // 默认命名前缀 export const defaultNamespace = 'el' export const useNamespace = (block: string) => { // 命名前缀也就是命名空间 const namespace = computed(() => defaultNamespace) return { namespace, } } ``` 通过加多一个命名前缀，再加上 BEM 的命名规范就可以大大降低我们组件的 classname 与项目中的其他 classname 发生名称冲突的可能性。通过前文我们知道 BEM 的命名规范就是通过一定的规则去书写我们的 classname，在 JavaScript 中则表现为按照一定规则去拼接字符串。 BEM 命名字符拼接函数： ```javascript // BEM 命名字符拼接函数 const _bem = ( namespace: string, block: string, blockSuffix: string, element: string, modifier: string ) => { // 默认是 Block let cls = `${namespace}-${block}` // 如果存在 Block 后缀，也就是 Block 里面还有 Block，例如：el-form 下面还有一个 el-form-item if (blockSuffix) { cls += `-${blockSuffix}` } // 如果存在元素 if (element) { cls += `__${element}` } // 如果存在修改器 if (modifier) { cls += `--${modifier}` } return cls } ``` 这里值得注意的是 Block 有可能有后缀，也就是 Block 里面还有 Block，例如：`el-form` 下面还有一个 `el-form-item`。通过 BEM 命名字符拼接函数，我们就可以自由组合生成各种符合 BEM 规则的 classname 了。 ```javascript export const useNamespace = (block: string) => { // 命名前缀也就是命名空间 const namespace = computed(() => defaultNamespace) // 创建块例如：el-form const b = (blockSuffix = '') => _bem(unref(namespace), block, blockSuffix, '', '') // 创建元素例如：el-input__inner const e = (element?: string) => element ? _bem(unref(namespace), block, '', element, '') : '' // 创建块修改器例如：el-form--default const m = (modifier?: string) => modifier ? _bem(unref(namespace), block, '', '', modifier) : '' // 创建后缀块元素例如：el-form-item const be = (blockSuffix?: string, element?: string) => blockSuffix && element ? _bem(unref(namespace), block, blockSuffix, element, '') : '' // 创建元素修改器例如：el-scrollbar__wrap--hidden-default const em = (element?: string, modifier?: string) => element && modifier ? _bem(unref(namespace), block, '', element, modifier) : '' // 创建块后缀修改器例如：el-form-item--default const bm = (blockSuffix?: string, modifier?: string) => blockSuffix && modifier ? _bem(unref(namespace), block, blockSuffix, '', modifier) : '' // 创建块元素修改器例如：el-form-item__content--xxx const bem = (blockSuffix?: string, element?: string, modifier?: string) => blockSuffix && element && modifier ? _bem(unref(namespace), block, blockSuffix, element, modifier) : '' // 创建动作状态例如：is-success is-required const is: { (name: string, state: boolean | undefined): string (name: string): string } = (name: string, ...args: [boolean | undefined] | []) => { const state = args.length >= 1 ? args[0]! : true return name && state ? `${statePrefix}${name}` : '' } return { namespace, b, e, m, be, em, bm, bem, is, } } ``` 最后我们就可以在组件中引入 BEM 命名空间函数进行创建各种符合 BEM 命名规范的 classname 了，例如： * 创建块 el-form、 * 创建元素 el-input\_\_inner、 * 创建块修改器 el-form--default、 * 创建块后缀元素 el-form-item、 * 创建元素修改器 el-scrollbar\_\_wrap--hidden-default、 * 创建动作状态例如：is-success is-required 具体创建代码使用代码如下： ```javascript import { useNamespace, } from '@cobyte-ui/hooks' // 创建 classname 命名空间实例 const ns = useNamespace('button') ``` 然后就可以在 template 中进行使用了： ```html