为什么有原子css #

之前大家写代码都是定义一个className，然后写一堆样式，如下：

<div className="title">title</div>

.title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

这时候有聪明人想了，能不能每一行的样式都写成一个className，这样我直接写类名就好了；

<div className="fs-20 fw-b mt-10">title</div>

.fs-20 {
    font-size: 20px;
}
.fw-b{
    font-weight: bold;
}
.mt-10{
    margin-top: 10px;
}

然后，把这些通常用的样式放到全局公用，预定义生成好，是不是整个项目都可以用了，后面所有的代码都不用写css了，只要写这些类就好了。这就是CSS原子化。

突然想起来之前css还有命名规范，你知道吗，BEM规范:

.block {}

.block__element {}

.block--modifier {}

block 代表了更高级别的抽象或组件。
block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。
block--modifier 代表 .block 的不同状态或不同版本。
使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。如

用了css原子化之后，基本就告别css命名规范了；

常用的css原子化类库有 tailwind，使用方案就是：

安装包
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",

css文件中引入
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

vite会自动识别postcss进行构建；说起postcss，也是很流行的技术，因为支持插件处理，比较方便，比如可以批量处理前缀，支持一些新的css语法等等；

编译时CSS原子化优化 #

上面说的是最初的方法，直接生成所有的原子css，这样好处是比较简单，但是文件体积也会比较大，可能有很多css用不到。

有一种优化的方案就是按需生成，就是在编译时，遍历所有的文件，找到className, 根据用到的原子css生成对应的css代码；好处是按需减少css体积，坏处是每次编译都要处理；