原子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、规避命名的痛苦

传统的写法需要为每个类取名，还得确保类名语义化、好维护，当项目相对较大的时候，往往面临词穷的窘境，做