原子css使用笔记 (Atomic CSS)

偶然的一个机会接触学习到了原子css的概念和用法，瞬间惊为天人。在接下来的开发中习惯性的使用至今，现在做下总结。

一、概念

“原子化的样式是一种将样式属性拆分为小的、独立的类的设计方法。在原子化样式中，每个类对应一个具体的样式属性，如颜色、字体大小、边距、宽度等”

二、实现demo

<template>
    <div class="w100 bgf00">
        <img class="w100 h40" src="" alt="">
        <div class="flex ml40">
            <p class="w100"></p>
            <span></span>
        </div>
    </div>
</template>

<style>
/* 布局类 */
.flex {
    display: flex;
}
.flex-center {
    justify-content: center;
}
.align-center {
    align-items: center;
}

/* 间距宽高 */
.h40 {
    height: 40px;
}
.w100 {
    width: 100px;
}
.ml40 {
    margin-left: 40px;
}
.mr40 {
    margin-right: 40px;
}
.mb40 {
    margin-bottom: 40px;
}
.mt40 {
    margin-top: 40px;
}
.m40 {
    margin: 40px;
}

/* 颜色类 */
.base-color {
    color: #4381ff;
}
.disabled-color {
    color: #f2f2f2;
}
.bg-base {
    background-color: #4381ff;
}

</style>

三、为什么要用原子css?

1、开发效率

使用原子css的方式编写项目，可以直接在dom上累加样式类，简单粗暴，不用担心样式会相互影响，不用去想类的命名。

2、极小的css文件

原子css项目的css大小只取决于预定义类名文件的大小。 理论上只要这个项目正常编码的css文件大小超过了原子css定义的类名文件大小，那么使用原子css就会大大减少样式文件的大小。

3、超强复用

原子css的所有样式都是复用的，不会出现重复定义的情况，所以他是高复用，小体积。

四、缺点

1、类名心智负担

使用原子css需要遵循定义好的类名规则，记忆常用的类名，这是原子css能提升开发效率的前提。

2、设计规范

原子css更适合非常规范的设计稿，比如我们自己常用的常用的间距是20、40、44、88 那么定义类名的时候比较简单，记忆也不难。但是如果项目非常大，设计稿有多种规范，结果定义了多套class, 开发者无法快速定位想实现样式的class,那么原子样式就是一直负担。

3、污染dom结构

大量的class 会让dom的可读性变得特别差。

4、类库难以维护

随着项目的功能越来越多，类库会越来越臃肿难以维护，也更加难以记忆。

五、如何选择？

任何一种技术方案都有它的优缺点，在技术选型的时候要综合自身情况和需求去灵活调整。

1、项目页面量大、设计规范统一，为了减少样式文件的体积，在能接受dom可读性差的前提下可以选用原子css。

2、快速开发的小项目可以使用原子css

六、Tailwind

Tailwind 是目前比较成熟优秀的原子css解决方案，他提供了可定制的原子类，能适应大部分的样式需求。