如何提升 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>
默认结构
1styles2- index.scss3- custom4 - index.scss5- variables6 - base.scss7 - custom.scss8- variants9 - base.scss10 - custom.scss
2. 说明
1styles2- 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. 例子
示例:入口文件
1styles2- 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";
示例:自定义样式主文件
1custom2- 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 插件来提示和自动补全默认类名