如何提升 CSS 的编写效率

左子祯

左子祯 / 2021.05.06

👍LIKE

在产品开发过程中,发现工程师在写样式时,经常会遇到规范不统一所导致的还原度低和可维护性差的问题,所以我参考 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 插件来提示和自动补全默认类名