css原子化项目落地可行性分析和探究

一、背景

近期因为一些交接事项和后续需求，接触到了之前没有接触过的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