如何提升 CSS 的编写效率

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

整体思路：

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

解决问题：

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

一些原则：

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

使用示例：

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

默认结构

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

2. 说明

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

3. 例子

示例：入口文件

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 插件来提示和自动补全默认类名