CSS原子化是什么，如何在工作环境中使用-群英

上一篇：HTML中如何实现多个div并排显示下一篇：CSS浮动出现高度塌陷问题有哪些处理方法呢

今天我们来学习关于“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 {
  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书写，你也靠可以自己完成