组件库的CSS架构

docs/.vuepress/config.js

@@ -58,6 +58,7 @@ s.parentNode.insertBefore(hm, s); })();
         text: 'CSS',
         collapsible: true,
         children: [
+          '/CSS/CSS架构模式之BEM',
           '/CSS/CSS引入方式',
           '/CSS/css',
           '/CSS/CSS盒子模型',

docs/CSS/CSS架构模式之BEM.md

@@ -0,0 +1,45 @@
+# CSS 架构模式之 BEM
+
+`BEM` 是由 `Yandex` 团队提出的一种 CSS 命名方法论，即 `Block`（块）、`Element`（元素）、和 `Modifier`（修改器）的简称，是 `OOCSS` 方法论的一种实现模式，底层仍然是面向对象的思想。
+
+以 `Element Plus` 的 `Tabs` 组件进行讲解 `BEM` 的核心思想。
+
+那么整一个组件模块就是一个 `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 的命名格式
+
+```xml
+block-name__<element-name>--<modifier-name>_<modifier_value>
+```
+
+- 所有实体的命名均使用小写字母，复合词使用连字符 “-” 连接。
+- `Block` 与 `Element` 之间使用双下画线 “__” 连接。
+- `Mofifier` 与 `Block/Element` 使用双连接符 “--” 连接。
+- `modifier-name` 和 `modifier_value` 之间使用单下画线 “_” 连接。
+
+Element Plus 的 Form 表单的 HTML 结构
+
+```html
+<form class="el-form">
+    <div class="el-form-item">
+        <label class="el-form-item__label">名称：</label>
+        <div class="el-form-item__content">
+            <div class="el-input">
+                <div class="el-input__wrapper">
+                    <input class="el-input__inner" />
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
+```
+
+## 通过 JS 生成 BEM 规范名称
+
+在编写组件的时候如果通过手写 `classname` 的名称，那么需要经常写 `el` 、`-` 、 `__` 、 `--`，那么就会变得非常繁琐，通过上文我们可以知道 `BEM` 命名规范是具有一定规律性的，所以我们可以通过 `JavaScript` 按照 `BEM` 命名规范进行动态生成。

docs/element-plus/初始化组件库.md

@@ -17,7 +17,60 @@
   },
   "keywords": [],
   "author": "Seekhoo <[email protected]>",
-  "license": "ISC"
+  "license": "MIT"
 }
 
 ```
+
+但是作为我们的根目录，这个项目并不需要发布，我们对他进行简单的改造，将其设置为私有，我们不需要版本，不需要关键字、入口文件等等，改为如下基础配置即可
+
+```json
+{
+  "name": "@seekhoo/ikun-ui",
+  "private": true,
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Seekhoo <[email protected]>",
+  "license": "MIT"
+}
+```
+
+在根目录下创建一个配置`.npmrc`文件
+
+```.npmrc
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true
+```
+
+## 创建子项目
+
+在pnpm当中，我们要创建`Monorepo`结构需要依赖于一个配置文件`pnpm-workspace.yaml`，我们在根目录下创建它，在配置文件中我们需要什么，哪些下面的项目为我们的子目录（`yaml`文件类似与`json`文件，都是为了表示具体的键值对形式的配置），在申明前，我们需要考虑，我们需要哪些子项目，正常来讲我们必要的包含`组件库项目`、`开发时预览项目`用于调试、`开发文档项目`（用于最终上线的文档） 、`公共方法项目`（用于抽离公共逻辑） ,这些我们前期需要用到的项目，参考 `Elemtn-plus` 可以发现，他抽离了更多的项目，在根目录得`package.json`文件当中以`@Element-plus/`开头得都是一个单独的项目
+`pnpm-workspace.yaml`文件
+
+```yaml
+packages:
+  - packages/*
+  - docs
+  - example
+
+```
+
+此时的目录结构
+
+```text
+x-ui
+├─ .npmrc
+├─ docs
+├─ example
+├─ package.json
+├─ packages
+│  ├─ components
+│  ├─ theme-chalk
+│  └─ utils
+├─ pnpm-lock.yaml
+├─ pnpm-workspace.yaml
+└─ tsconfig.json
+```

docs/element-plus/组件库工程化.md

@@ -30,7 +30,7 @@
 
 `Monorepo`其实是一概念，在软件工程领域，它已经有很多年的历史了，所以，他并不是一个新奇的产物，也很好理解，就是把多个项目放在同一个仓库，与之相反的则是`MultiRepo`概率，就是每个单独的项目对应一个仓库来单独管理，相信日常开发中，我们对后者的这种形式更多，毕竟都喜欢从零开发开发项目。
 
-![mono](./img/monorepo%26multirepo.png)
+![mono](./img/monorepo&multirepo.png)
 
 ### 🍦 `MultiRepo`的不足