如何提升 CSS 的编写效率

在产品开发过程中，发现工程师在写样式时，经常会遇到规范不统一所导致的还原度低和可维护性差的问题，所以我参考 Tailwind CSS 和实际项目中遇到的问题，总结出了以下规范尝试推广使用：

整体思路：

按照设计规范，提前用 Class 类名定义基本样式，并直接组合使用。

只有在需要写特殊布局或需要定位元素时，才写自定义 Class。

解决问题：

所有的样式都是由定义好的类名组合而来，可以和设计规范做到完全统一。

减少自定义 Class，提高代码复用率。

减少交付时的不确定因素，提高验收通过率。

提升可读性。

一些原则：

使用 CSS 原生变量。

如果不必要，不写 Class。

不要随意使用 <p> 标签，因为 <p> 标签有默认的段落样式。

使用示例：

1<div class="flex-c mt-24 radius-l bg-tran-4">
2	<div class="h2 text-tran-50 ">Title</div>
3	<div class="p4 text-tran-30">Desc</div>
4</div>

默认结构

1styles
2- index.scss
3- custom  
4	- index.scss
5- variables  
6	- base.scss  
7	- custom.scss
8- variants  
9	- base.scss  
10	- custom.scss

2. 说明

1styles
2- index.scss（默认入口文件，只负责引用，不写样式）
3- custom（自定义样式目录）  
4	- index.scss（主文件，负责引用其它文件，可写样式） 
5	- ...（按模块分文件写对应样式）
6- variables（变量目录） 
7	- base.scss（默认变量，通用）  
8	- custom.scss（通过引用默认变量定义的自定义变量，不通用）
9- variants（样式目录）  
10	- base.scss（默认样式，通用）  
11	- custom.scss（自定义样式，通常是一些特定用法的 Class，不通用）

3. 例子

示例：入口文件

1styles
2- index.scss

1@import "./custom/index.scss";
2@import "./variables/base.scss";
3@import "./variables/custom.scss";
4@import "./variants/base.scss";
5@import "./variants/custom.scss";

示例：自定义样式主文件

1custom
2- index.scss

1@import './format.scss';
2@import './shadowMenu.scss';
3@import './layout.scss';
4@import './form.scss';
5@import './animation.scss';
6@import './highlight.scss'...

示例：variables - base

1- variables（变量目录）  
2	- base.scss（默认变量，可以通用）

1:root {
2    --color-tran-4: rgba(255, 255, 255, 0.04);
3    --color-tran-6: rgba(255, 255, 255, 0.06);
4    --color-tran-8: rgba(255, 255, 255, 0.08);
5    --color-tran-12: rgba(255, 255, 255, 0.12);
6    --color-tran-18: rgba(255, 255, 255, 0.18);
7    --color-tran-30: rgba(255, 255, 255, 0.3);
8    --color-tran-50: rgba(255, 255, 255, 0.5);
9    --color-tran-70: rgba(255, 255, 255, 0.7);
10    --color-tran-90: rgba(255, 255, 255, 0.9);
11    ...
12}

示例：variables - custom

1- variables（变量目录）
2  - custom.scss（通过引用默认变量定义的自定义变量，不通用）

1:root {
2    --color-main: var(--color-gray-7);
3    --color-text: var(--color-tran-90);
4    --color-background: var(--color-tran-6);
5    --border-white: var(--color-tran-6);
6    --color-tab-text: var(--color-tran-50);
7    --color-tab-text-hover: var(--color-tran-70);
8    --color-tab-text-active: var(--color-tran-90);
9    --color-tab-underline-active: var(--color-tran-90);
10}

示例：variants - base

1- variants（样式目录）
2  - base.scss（默认样式，可以通用）

1.text-tran-4 {
2  color: var(--color-tran-4);
3}
4.text-tran-6 {
5  color: var(--color-tran-6);
6}
7.text-tran-8 {
8  color: var(--color-tran-8);
9}
10.text-tran-12 {
11  color: var(--color-tran-12);
12}
13.text-tran-30 {
14  color: var(--color-tran-30);
15}
16.text-tran-50 {
17  color: var(--color-tran-50);
18}
19.text-tran-70 {
20  color: var(--color-tran-70);
21}
22.text-tran-90 {
23  color: var(--color-tran-90);
24}
25...

示例：variants - custom

1- variants（样式目录）
2  - custom.scss（自定义样式，通常是一些特定用法的 Class，不通用）

1.border-b-block {
2  box-shadow: inset 0px -1px 0px var(--border-black);
3}
4.border-b-wrap {
5  box-shadow: inset 0px -1px 0px var(--border-white);
6}
7.input-focus {
8  box-shadow: 0 0 0 1px var(--color-focus-border) inset;
9}

需要继续思考

如何复用多个类名的集合？

是否需要 VSCode 插件来提示和自动补全默认类名