From b93804b561a41f4e49ff4439607caa5c975d13e6 Mon Sep 17 00:00:00 2001
From: Qingyu Deng <i@ayase-lab.com>
Date: Fri, 4 Mar 2022 23:48:37 +0800
Subject: [PATCH] docs: add css naming convention

---
 docs/css-naming-convention.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 docs/css-naming-convention.md

diff --git a/docs/css-naming-convention.md b/docs/css-naming-convention.md
new file mode 100644
index 000000000..6495c4463
--- /dev/null
+++ b/docs/css-naming-convention.md
@@ -0,0 +1,17 @@
+# CSS 编码规范
+
+## 组件库 CSS 编码规范
+
+1. 组件库 CSS 命名规范由 BEM 派生出来。其中，
+   块（block）、元素（element）、修饰符（modifier）的概念在 BEM 中
+   [定义](http://getbem.com/naming/)。
+
+2. 一个组件本身应该成一个块，应使用 `.bgm-${组件名}` 作为容器的类。
+
+3. 组件内部可以有任意多个元素，这些元素应使用 `.bgm-${组件名}__${元素}` 作为类。
+
+4. 如果块或者元素需要根据状态（如可用态与禁用态）改变样式，则需要使用修饰符，`.${块/元素类名}--${修饰符}` 作为类。
+
+## 页面 CSS 编码规范
+
+1. 页面及页面级组件应该使用 CSS Module，避免样式的全局污染。