目录
一、背景
近期因为一些交接事项和后续需求，接触到了之前没有接触过的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 {
border-style: solid;
.sans {
font-style: sans-serif;
- 并且会以视觉效果进行命名
- 不知道你有没有在某些时候被去起一个类名被停顿过，特别是在有大量模版的时候，这有的时候还是挺难的
- 直接用框架封装好的类，就不用考虑这个问题了，并且根据视觉的类名，你可以很容易的举一反三
2.方案选择
css原子化的思想有了之后，具体的发展其实如果也是有一段路程的
试想一下，如果你想要有十个类，去承载一个数字对应的margin尺寸，是否就需要手写十个类呢？这是太重复的操作了吧！很难让人忍受。如果用scss的能力的话看上去会好一点，去写一个循环
@for $i from 1 through 10 {
.m-#{$i} {
margin: $i / 4 rem;
}
}
这样就有十个以等加排列的margin类了，但如果我们最后只用到了其中的五个，这就直接浪费了一半的空间，因为其余五个类是无用的。这样大家应该明白，单纯的css原子化，我们自己也可以去实现，我们可以去预备的书写大量的原子类。但如果我们想要项目中更合理的去使用，我们无疑需要框架帮助。
它可以帮我们解决掉那些麻烦，一个早已做大做强的css原子化框架Tailwind最初是这么做的，Tailwind 通过使用purgecss来扫描产物并删除你不需要的规则。这得以使其在生产环境中 CSS 文件缩减为几 KB。但是有个问题！！这个清除操作仅在生成构建下有效，而开发环境下仍要使含了所有规则巨大的 CSS 文件。能够按需生成无疑是更好的选择
所以windicss从零到一解决了这个问题，因为我很关注的开源开发者 Anthony Fu 是其重要的成员，这也让我更加对windicss进行了了解。虽然之后Tailwind也有了相关按需加载的功能，但windicss新出的属性化模式等功能我觉得很棒，并且它更轻量，所以之后的方案我选择继续沿用winding-css
css原子化可以不断发展，受众越来越多，Anthony Fu在内的很多开发者都对其爱不释手，它有着它的优越性，当然也有着它的缺点。如果想在工作环境中使用，必须经过客观的分析
三、开发体验可行性
优点
1.开发的效率和舒适
预定义功能类的简洁舒适，下边放一个赏心悦目的例子，来自tailwind，其实和我平时写小程序基本一样的
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
.chat-notification-logo {
height: 3rem;
width: 3rem;
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
</style>
再看一下应用了原子化的文件呢？
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
怎么样，是不是很清爽！但可能有的同学不这么觉得，好多不认识的类名，一团糟的样子。但是等我们了解了它的使用之后，这些类名也会变的一目了然，再存在大量样式的情况下，它的开发体验真的很赞，我觉得你百分之九十会和我一样喜欢它的效率
其实它在使用上还有更多爽快的方法，比如@apply，自动值推导，属性话模式等。但这些过于使用层面的功能在之后使用方面的文章写更合适，你现在只要记得，多样式场景，会很爽就足够了
2.灵活和可维护
有的同学是否会担心？我用了很多定制化的原子类，是不是就无法随心所欲的定制我们的样式了？
这个其实不用担心，虽然实际上就算单单只用原子化css我们就可以满足90%以上的场景，但是毕竟一些复杂的样式效果还是需要简单学习下的。所以我们要知道，我们去在模版里所添加的原子类，都只是在盒子上挂载的普通类名，这意味着就算我们不是熟练的windicss使用者，我们也可以用原子类和自定义类混合的方式，我们自定义的样式是更高的。我们可以只顾着爽地去快速解决绝大部分样式，就算剩下的样式你还没有掌握如何去用windicss书写，你也靠可以自己完成
缺点
1.仍存在的上手门槛
虽然我相信，在你看过我的使用篇后，会很快的上手开发。但是在初见之时，这确实需要接受的过程，所以如果并不觉得样式多的让你感觉到压力的话，你可以只是了解一下～
2. 小程序使用windicss受到阉割
目前的工作场景，很多样式复杂场景都是在小程序端的，但因为wxss的选择器选择比较有限，windicss的一些功能在小程序端是用不了的，这个在使用篇会细说。但是实际上，我认为也不算是明显的缺点，一些常用的功能已经足够了。
四、包体积可行性
熟悉小程序的应该都知道，当我们开发一个小程序，特别是是一个大型，复杂的小程序的时候，包体积是多么的重要。作为一个深度参与着包体积治理的开发，并且曾经遭受过包体积溢出的苦，我想我对包体积一直是有着敏感性的。如果此方案能够对包体积起到效果的话，确实是它的一大优势。
据说facebook用css原子化缩减了首页80%的css体积？虽然肯定也会增加html体积，也并不是很清楚其中细节，但这种消息也很让人诱惑，哈哈
优点
1.对wxss文件的有效缩减
为了亲自探究引入windicss是否对样式体积有着缩减，通过分包，分组等进行分类。我找出了目前项目中引用了少量windicss的版本，和之前的版本。在把他们的report.json进行比对之后，重点关注了几个除了换用windicss，没有其他明显变化的文件。
这几个文件都是多样式，并且以windicss的使用为变量的文件。虽然只有零点几kb的缩减，但在小程序紧张的包体积中，这已经是很有价值的修改了，这只是少部分文件而已
缺点
尽管windicss的按需引入已经做得很不错了，但是毕竟也是有一点额外体积的。所以如果你并没有多少冗余的样式需要去淘汰的话。windicss在包体积方面，并不能对你有多少帮助
五、 总结
经过以上介绍和分析，我相信在合适的场景下还是非常适合饮用原子化css的相关概念的。
