前言
前端发展的这几年，css 也由最初的转变为 less, sass/scss 等预处理器。它们给 css 带来了和 js 一样的变量，函数，运算，使得更加的灵活。那么下一代的 css 解决方案是什么呢？一起来探寻一下吧
解决痛点
事物的出现，肯定伴随着问题。新的解决方案一定是为了解决一定程度上的问题。那么原本的 css 方案已经足够的完善，为什么还有着下一代的探索呢？ 主要是为了两个问题：
-
更大程度的自定义化
-
避免重复
css书写
解释一下上面两点: 结合一个使用场景来理解， 项目中通常我们会使用一个 ui 库来快速开发，预先设定好的 ui 给我们带来快速搭建的同时，也有着样式上的局限性。假如一个简单的 button，虽然通过预留的 api 我们能够改变它的颜色, 比如：
// 主题颜色
<Button type="primary">Primary Button</Button>
// 错误颜色
<Button type="error">Primary Button</Button>
// 警告颜色
<Button type="danger">Primary Button</Button>
复制代码如果我们需要其他的颜色，就应该写自己的样式进行覆盖
<Button type="primary" class='btnColor'>Primary Button</Button>
// style.css
.btnColor {
background-color: #ccc;
}
复制代码内置的样式可能并不能满足我们的需求。同时，这个你可能并没有使用到的 css 还会打包进入到你的代码当中，尽管最终生效的并不是它。还有，如果此时另一个地方也需要着相同的样式，我们又需要重新写一份。当然了， less等语言他喵通过 extend, minx 也为我们带来了解决方式。但是实际上我们经常使用的 css 样式也就那么几个。我们能不能直接预定义写好所有的常用样式，后续直接进行引用即可。这也就带来了新的 css 方案。
新的css 方案(原子化 css)
新的 css 方案在社区已经有很久了，而且已被诸多的实践,运用。 比较大的框架有： tailWindCSS , windcss。因为有着很多的运用，相信很多人都有着了解，使用上：
<div
class="p-6 text-xl bg-white rounded-xl flex items-center space-x-4"
></div>
复制代码上面的案例中,使用了简单的几个预设样式：p-6 指的是 padding, text-xl
代表了文字大小，bg 代表了背景色， rounded 代表了圆角，它们的值分别是 6 xl white。至于具体的 6, xl 是多少, 这是我们可以进行配置的，可以访问上面文档查看。虽然看起来很还是不错的，但是它也有几个问题：
-
想象一下如果样式很多呢，是不是会显得十分臃肿，可读性差了点。
-
还有就是理解上的比如：
p-6原本我们padding: 6px, 我们很容易直观理解，现在我们可能需要转换一下， 6 并不是最终的一个值，我们还需要思维上进行一次转换，1 是1rem， 那么 6 就是6rem, 不够直观。
UnoCSS
前面说的，都不是我要说的重点，下面我要介绍一下 UnoCSS。简单的说，Unocss 它基于前面的 WindiCss, TailWindCSS 等框架，提供了一些简单的预设配置，可以让我们更加方便的使用。
下面是这 vite 中的使用：
// 安装
npm i -D unocss
// vite.cofig.js
import Unocss from 'unocss/vite'
export default {
plugins: [
Unocss({ /* options */ })
]
}
// main.ts
import 'uno.css'
复制代码上面使用的是默认预设样式。下面我们使用另一种使用属性模式：
// 安装
npm i -D @unocss/preset-attributify
复制代码// vite.config.ts
import Unocss from 'unocss/vite'
import { presetAttributify } from 'unocss'
export default {
plugins: [
Unocss({
presets: [
presetAttributify({ /* preset options */}),
// ...custom presets
]
})
]
}
复制代码经过了上面的配置我们应当这么去写：
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>
复制代码进行了相同前缀属性的整理，这好像显得结构要清晰一些。我们还可以无属性的使用：
// 省略了class
<div m-2 rounded text-teal-400 />
复制代码经过这些配置，或多或少的解决了一些直观的问题。还有css图标