如何提升CSS编写效率

2022.05.12

一、定义

在产品开发过程中，经常会遇到规范不统一所导致的还原度低和可维护性差的问题，所以我参考Tailwind CSS 和实际项目中遇到的问题，总结出了以下规范：

整体思路：

1、按照设计规范，提前用 Class 类名 定义基本样式，并直接组合使用。
2、只有在需要写特殊布局或需要定位元素时，才写自定义 Class。

解决问题：

1、所有的样式都是由定义好的类名组合而来，可以和设计规范做到完全统一。
2、减少自定义 Class，提高代码复用率。
3、减少交付时的不确定因素，提高验收通过率。
4、提升可读性。

一些原则：

1、使用 CSS 原生变量。
2、如果不必要，不写 Class。
3、不要随意使用<p>标签， 因为<p>标签有默认的段落样式。

使用示例：

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

默认结构：

styles
- index.scss
- custom  
	- index.scss
- variables  
	- base.scss  
	- custom.scss
- variants  
	- base.scss  
	- custom.scss

二、说明：

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

三、例子：

示例：入口文件

styles
- index.scss

@import "./custom/index.scss";
@import "./variables/base.scss";
@import "./variables/custom.scss";
@import "./variants/base.scss";
@import "./variants/custom.scss";

示例：自定义样式主文件

custom
- index.scss

@import './format.scss';
@import './shadowMenu.scss';
@import './layout.scss';
@import './form.scss';
@import './animation.scss';
@import './highlight.scss'...

示例：variables - base

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

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

示例：variables - custom

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

:root {
	--color-main: var(--color-gray-7);
	--color-text: var(--color-tran-90);
	--color-background: var(--color-tran-6);
	--border-white: var(--color-tran-6);
	--color-tab-text: var(--color-tran-50);
	--color-tab-text-hover: var(--color-tran-70);
	--color-tab-text-active: var(--color-tran-90);
	--color-tab-underline-active: var(--color-tran-90);
}

示例：variants - base

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

.text-tran-4 {
	color: var(--color-tran-4);
	}
	.text-tran-6 {
	color: var(--color-tran-6);
	}
	.text-tran-8 {
	color: var(--color-tran-8);
	}
	.text-tran-12 {
	color: var(--color-tran-12);
	}
	.text-tran-30 {
	color: var(--color-tran-30);
	}
	.text-tran-50 {
	color: var(--color-tran-50);
	}
	.text-tran-70 {
	color: var(--color-tran-70);
	}
	.text-tran-90 {
	color: var(--color-tran-90);
	}
	...

示例：variants - custom

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

.border-b-block {
	box-shadow: inset 0px -1px 0px var(--border-black);
	}
	.border-b-wrap {
	box-shadow: inset 0px -1px 0px var(--border-white);
	}
	.input-focus {
	box-shadow: 0 0 0 1px var(--color-focus-border) inset;
	}

四、需要继续思考

如何复用多个类名的集合？
是否需要 VSCode 插件来提示和自动补全默认类名?