CSS原子化
Anthony Fu - 重新构想原子化CSS
原子化CSS是一种CSS的架构方式,它倾向于小巧且用途单一的class,并且会以视觉效果进行命名,例如:
1 2 3 4 5 6 7
| .m-0 { margin: 0; } .text-red { color: red; }
|
优点:
- 减少CSS体积、提高CSA复用
- 减少起名复杂度
缺点:增加记忆成本,因为将CSS拆分成原子后,必须记住一些class才能书写
项目接入unocss
引入依赖:
配置(vite.config.ts):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| import unocss from 'unocss/vite'
export default defineConfig({
plugins: [unocss({ rules:[ ["flex",{display:"flex"}], ["red",{color:"red"}], [/^m-(\d+)$/, ([,d])=>({margin:`${Number(d)*10}px`})] ], shortcuts: { karate: ["flex","red"] }})], }
|
引入(main.ts):
使用unocss
常规使用
vite.config.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| unocss({ rules:[ ["flex",{display:"flex"}], ["red",{color:"red"}], [/^m-(\d+)$/, ([,d])=>({margin:`${Number(d)*10}px`})] ], shortcuts: { karate: ["flex","red"] } })
|
App.vue:
1 2 3 4 5 6 7 8 9 10 11 12
| <template> <div> <!-- 使用静态类名 --> <!-- <div class="flex red"> --> <!-- 使用组合类名 --> <div class="karate"> <div class="m-2">yjsp </div> <div class="m-4">mur </div> <div class="m-6">kmr </div> </div> </div> </template>
|
样式便成功地被应用了。
![](/img/loading.gif)
使用预设
- presetIcons:根据类名使用图标库Icônes
- presetAttributify:美化属性
- presetUno:预设类名
vite.config.ts:
1 2 3 4 5 6 7 8
| import { presetIcons, presetAttributify, presetUno } from 'unocss'
export default defineConfig({ plugins: [unoCss({ presets: [presetIcons(),presetAttributify(),presetUno()] })] })
|
App.vue:
1 2 3 4 5 6 7 8 9 10
| <template> <div> <!-- 使用presetIcons --> <div class="i-ic-baseline-access-alarm"></div> <!-- 使用presetAttributify --> <div flex red m="1">yajue</div> <!-- 使用presetUno --> <div class="bg-red-300">草</div> </div> </template>
|
预设的样式生效了。
![](/img/loading.gif)