原子css在小程序开发中的应用

原子css在小程序开发中的应用

什么是原子css

原子化CSS 是一种CSS 的架构方式，它倾向于小巧且用途单一的class，并且会以视觉效果进行命名

原子css的具体定义目前已经有很多文章介绍过了，这里不再赘述。简单理解，原子css就是工具类css的极端写法，即一个类名有且仅有一个css规则定义、且该css规则不会重复出现。例如

【图1】

同时html中书写class的方式也有所区别

【图2】

采用原子css有什么好处和弊端？

好处

• 1、提供css的复用度，减少样式文件大小

根据原子css的定义，所有的css规则最多出现一次，总的来说css规则分两大类：可枚举和不可枚举。 可枚举是指css规则的值是有限的，如position、display等 不可枚举是指css的规则是无限的，如width、top等

• 2、规避命名的痛苦

传统的写法需要为每个类取名，还得确保类名语义化、好维护，当项目相对较大的时候，往往面临词穷的窘境，做过一段时间开发的应该都深有体会

弊端

• 1、导致html代码臃肿，且阅读不友好

如图2所示，采用原子css的写法，意味着每个css规则都会对应一个原子css类名。如果某个元素的样式特别复杂，那将是灾难性的，class属性会变得非常的冗长，再加上相同原子css类名不断的重复出现，阅读起来非常的难受；而且html的大小也跟着增加了很多

• 2、切换书写方式有适应成本

习惯了传统写法，突然改成原子css的写法，会非常的不适应，代码的组织和思维方式稍微有些变化，特别是资深的前端工程师，很难改变原有的习惯，刚接触的时候甚至会导致效率的下降

在小程序开发中采用原子css的初衷

原子css是个很古老的概念的了，很多年前就已经出现，在前端基础设施还不完善的年代，传统写法占据主流，原子css这个话题一直都存在，但却没有流行起来。 几年前在facebook的引领下，原子css再次成为热点，根据facebook分享的数据，经过原子css改造之后其官网样式答复减少，页面加载时间减少了很多。（有兴趣的可以看下facebook官网的源码）

虽然原子css这个话题很热，但一直没有尝试在项目中使用，主要担忧的就是团队成员对它的接受程度，不然团队产出效率降低的锅可是背不起呀。

目前负责的项目是个小程序，已经开发了两年，项目的代码量已经很庞大，最主要的是小程序的访问体验和代码包的大小有直接的关系，且小程序本身有代码包大小的限制。经过各种手段的瘦身之后，包大小有所减少，但如何进一步减少呢？这是一个很大的问题。

经过反编译小程序代码分析，最占空间的wxml和样式，其中wxml代码基本没有压缩的空间，只能从减少代码量这个维度考虑，在需要保持功能不变的情况下，这种方式很难有所作为。经过认真思考，唯一有效的方式就是从样式代码的大小着手，如果实现功能不变但是体积更小。首先想到的是能否压缩类名，尝试了下发现css的规则太多，压缩类名很可能导致出问题，只好放弃这种方式。

正好原子css最大的好处就是减少样式文件的大小，于是决定尝试一下。

我们是如何做的

我们团队维护这个小程序项目的有6个人，每个人的习惯都不太一样，如果一刀切要求大家都采用原子css的写法，势必会影响到正常的需求排期，所以在开始阶段需要做好设计和规划，主要考虑一下几点：

1、允许不使用原子css写法，但是提供工具转换，最终完成时的代码是采用新的写法

2、在熟悉阶段不能太过明显影响到开发效率

3、项目已有代码需逐步转换成新的写法

4、原子css样式覆盖面尽可能的的广，剩余部分仍然采用传统写法

以上3点归纳一下就是开发效率和历史代码的问题，我们采用以下措施来规避这些问题：

1、写脚本统计项目中所有css规则出现的频率，满足一定条件就纳入到原子css中，确保原子css样式库至少能覆盖95%以上的需求；如果是新的项目，可以根据所在团队的实际情况(如命名习惯)、或者参考流程的第三方库(如TailwindCSS)，来指定原子css样式库。

2、原子css命名遵循通用规则，确保类名的语义化，减少阅读成本。仅少数高频css规则采用简写，其他一概用全名，如下图所示：

3、制定原子css库时，提供相应的代码片段，借助vscode的智能提示，降低开发者的记忆成本.

4、提供代码转换工具，支持将传统写法转换成原子css的写法，一来解决历史代码的问题，二来也不急着强制所有人都采用新的写法.

给项目和团队带来了哪些好处

还有做的不好的地方

当然原子css并不能解决所有的问题，还有些地方用起来比较别扭。

1. 原子css库并没有覆盖所有的样式，仍然有部分需要采用传统的写法。
2. 存在明显的层级问题，这是不得不采用条件判断或者传统写法来规避。
3. 需要用到伪类的地方无法单独用原子css实现，这时必须采用传统的写法。
4. 并没有完全遵守原子css的规则，仍然保留了部分工具类，如边框、安全区等。
5. 代码转换工具实现的并不完善，多层级样式覆盖会导致转换出现错误，需要人工检查，有一定的成本。 

还可以做些什么

尽管采用原子css后，代码体积下降了多，但之前为了阅读的友好，命名仍然有些长，可以采用短命名替换，通过编译手段进一步降低代码的体积，而不影响到业务功能。

【压缩前】

【压缩后】

----以上是小程序项目中采用原子css开发的一些总结，有什么写得不对或者踩坑的地方，欢迎大家帮忙指正！！！

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取