一、背景
近期因为一些交接事项和后续需求,接触到了之前没有接触过的xx领域。在上手后发现,与之前主要负责的方向相比,样式的比重明显增加,在css上更小的颗粒度和密集度让我觉得有些吃力,尤其是少数文件还应用了某种我不熟悉的带前缀的类名,而在全局却无法对其进行检索,让我陷入了疑惑。在询问得知这是css原子化的写法之后,看了相关文档我也并没有很快的理解。但渐渐有了一些理解和兴趣。我发现之前自己上手困难并不是css原子化有高的上手门槛,而是缺少相关理解和更快速上手的指引。
为了更好的将css原子化作为技术储备,在之后合适的情况下产生效果,这里通过两篇文章分别专注分析探究和后续开发快速上手进行讲解,以让大家对原子化css产生理解,并且解决文档缺乏和上手慢的问题。
本文主要从开发效率和包体积两方面展开分析,并最后选择框架windicss,在此之前先进行一些铺垫
二、什么是css原子化,又有什么用?
1.含义分析
其实相关的概念很简单,先用一种官方些的描述是这样的 “原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧且用途单一的 class,并且会以视觉效果进行命名。”
我个人大概可以根据这个话从三个方面开始介绍。
-
原子化 CSS 是一种 CSS 的架构方式
- 可能大多数同学对此并不是很熟悉,其实说起它的架构方式,并没有一些很严格的门类。但大家应该都知道相关的一些css方案,比如一直在用的css预处理器,他可以让我们更效率地书写样式,还有css-in-js等
- 过去以更加组件化和整体工具类的方向作为css的最佳实践,原子化css算是一个不同的声音。关于各种css方案更详细的一些我就不清楚了,大家明白的可以与我交流
-
它倾向于小巧且用途单一的 class
- 在最初看到每个引用的类里面只有一个单一的功能,很小巧的时候,并没有完全明白
- 但其实这就是 “原子” 的精髓,它的原子化可以让我们无比的灵活
- 就像这样,如果一个类里包含两个功能那么他就不是原子css了
- 比如这样
.bw-2x {
border-width: 2px;
}
.bss {
b