在过去的几个月里，我们Wingify一直致力于为不同的产品建立一个共同的平台--这样就可以在不同的产品中重复使用，而不会发生重新发明车轮的情况。这也有额外的好处，比如在不同的产品中执行共同的良好做法，使开发者在不同的产品中更容易切换。作为同一努力的一部分，我们的前端团队一直在努力工作，建立一个设计系统和一个前端模板应用程序。这个模板是Wingify的任何产品都可以简单地使用基础设计系统提供的可重复使用的组件，建立一个新的前端应用程序。稍后会有更多关于模板和设计系统的内容，但在这篇文章中，我想特别谈谈我们设计系统中非常重要的一部分--我们的CSS。
当前CSS的问题
首先，我们为什么要开始寻找一种新的方法来编写CSS？在此之前，我们一直在使用BEM和一些辅助类的混合。在代码库中也可以看到偶尔出现的不属于这两类的类!😅 这种方法导致了以下问题：
- 命名类总是一个问题--经常有人在拉动请求中评论说这个类的名字没有意义，应该改成更*"有意义 "的。找到"有意义的 "*名字是很困难的
- 未使用的CSS- 检测未使用的CSS的自动工具不是很可靠，特别是对于单页应用程序。我们的CSS随着时间的推移不断增加，其中一个主要原因肯定是没有人关心删除未使用的CSS。
- 重构--有了通常的类，就很难自信地进行重构。因为开发者无法确定他们正在重命名或删除的类是否会被用在他们不知道的其他地方。
我也曾在博客中详细介绍过这些问题。
评估其他方法
在开始这项任务之前，我们已经开始评估各种编写CSS的框架。我们的评估是基于以下参数的：
- 最终的输出文件大小
- 文件大小随时间增长的速度
- 未使用的CSS处理
- 新开发者的学习便利性
- 维护的方便性
- 文档（现有的或需要内部创建的）。
- 易读性
- 可用的主题
- 重构的方便性
- 命名的努力
- 关键的CSS生成
是的，有很多参数。我们非常严格地评估了😀。另外，请注意，我把与最终用户性能有关的参数放在最上面，因为这对我们来说是最重要的。
赢家--ACSS
我们评估了很多已知的框架和库，如纯BEM、Tachyons、Styled Components、Vue的scoped CSS、CSS模块。但我们发现，原子式的CSS方法符合我们上述的大部分要求。原子CSS也被称为辅助/实用类方法，它不需要命名，如果我们使用一个知名的库，就会有文档，它是可设计的，可提示的。重构也比较容易，因为你只需要从HTML中删除类，而不需要接触CSS。
但是，即使在现有的各种原子CSS库中，我们还是决定使用ACSS（我知道，这个名字有点太普通了，因为他们称自己为原子CSS！）。我们的常驻用户体验工程师Jitendra Vyas向我们介绍了ACSS。和他一起，我们和ACSS的开发者之一Thierry Koblentz讨论了很多关于ACSS的观点。Addy Osmani在Google IO上也提到了ACSS。
ACSS具有非常强大的优势，这是其他库所没有的。你不需要在ACSS中写CSS，事实上你甚至不需要下载一个CSS文件并在ACSS中使用。ACSS有一个叫Atomizer的工具，它可以检测到你的HTML（或任何文件）中ACSS类的使用情况，并为这些检测到的类生成相应的CSS。下面是一个你用ACSS写的HTML样本。
<button class="Bgc(blue) C(white) P(10px) D(ib) Cur(p) Bgc(red):h">
I am a button
</button>
除了Atomic CSS方法的一般好处之外，ACSS的自动CSS生成意味着我们永远不会得到我们在应用中没有使用的一个字节的CSS!我们在HTML中使用的东西会在最终的CSS文件中出现。事实上，ACSS生成的CSS如此之小，以至于实际上有可能内联你的完整CSS--也就是说，你的完整CSS可以成为你的关键CSS
我们不需要文档，因为开发者编写ACSS唯一需要的就是他们那令人敬畏的、可搜索的参考资料。还有一个VSCode扩展，甚至不需要参考资料。当然，我们也不用再去命名东西了。
看起来，开发者可能要重复写同一组类来创建相同的东西，但事实并非如此。ACSS或任何原子CSS方法都需要一个模板/组件系统，你可以重复使用一段HTML而不需要重复。我们使用Vue.js来构建我们的小型可重复使用的组件。
当然，在ACSS中也有一些缺点。例如，在一个特定组件的HTML中，你无法找到任何标签的内容，因为没有描述性的类。这一点可以通过使用语义标签来解决。基本上，其优点远远超过其缺点。
最终结果
我们刚刚完成了将一个相当规模的应用程序移植到我们的新系统的工作，你猜怎么着，我们的CSS从90 KB 减少到只有8 KB ！😱
这篇文章就写到这里我鼓励你以开放的心态去尝试ACSS，看看它是否能解决你目前的CSS问题。我们很乐意回答你对我们的新方法、设计系统等的任何问题。请在这篇文章上发表评论，或者在推特上发表您的意见，我们的推特账号是👉🏼@wingify_engg。
再见!
