-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
102 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Submodule dist
updated
from 2219b5 to ee0b3d
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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` 命名规范进行动态生成。 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters