编程 HTML / CSS

什么是css原子化，有什么用？

Posted in HTML / CSS onApril 24, 2022

一、背景

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

到此这篇关于css原子化项目落地可行性分析和探究的文章就介绍到这了,更多相关css原子化项目落地可行性分析内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！