为什么使用原子类css，主推unocss

点正
457 阅读3分钟

Unocss 是一个强大的原子化 CSS 框架，它通过提供简短的类名来快速构建 UI，避免了传统 CSS 中繁琐的命名和层级问题。它的优势包括直观的类名使用、内置图标支持以及灵活的配置。劣势可能包括某些复杂样式的类名较长，但可以通过结合 style 标签来解决。推荐通过预设配置和插件来简化开发流程，特别适合喜欢简洁高效开发方式的开发者。

优势

直观 ： 不用加类名，嵌套css 比如像container 、 wrapper 、box 、content 这些命名，对层级比较多的div是难以描述的，原子类不用思考给div取什么名。

图标： 比如unocss可以直接在class 里面写图标名字，直接变成图标 icones.js.org/collection/… 这个图标网站，直接复制i-xxx形式的名字，写到class里面就能显示

unocss-icon.gif

劣势：

  1. 有些颜色名字很长，比如liner-gradient 渐变，比较长

image.png

解决办法使用： 写到style 标签里面

  1. 有人说很杂乱 写了一堆，认不出来

解决办法

image.png

只要使用UI库，除开primeVUE这个，为所有颜色抽成token，可以随时替换。其他UI框架，不免要对ui的架构覆盖，v-deep，:deep() 只要设计修改样式，就必定难以好看整齐。

其实那些刁钻css问题，一般出现在： 1.一般都在使用flex，没得宽高的问题上。 2.css的样式最堆叠层级 （优先级问题） 3.class名称重复 （有些人写的全局样式和自己写的样式名重复）导致，一大半天不知道出现问题在哪里

你只要先看盒子类型，布局，就很好理解和调整，或者给自己定规矩，颜色相关样式，很长名字写到style， 布局、宽高、大小使用原子类。 这样就很容易不混淆。

我喜欢antful，所以推荐unocss

使用unoccs三步走：

  1. 项目集成

image.png

  1. copy 配置 把配置粘过去，就可以使用了。 image.png
//截止4.29 官网配置文件还没更新使用presetwind4
import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind4 } from 'unocss'
import type { Theme } from '@unocss/preset-wind4/theme'
export default defineConfig({
  shortcuts: {
    // 特殊原子
    'btn-unit': 'text-14px text-[rgba(255,255,255,0.8)] bg-rgba(255, 255, 255, 0.1) px-8px py-4px border-rd-4px',
    "flex-center":'flex justify-center items-center '
   
  },
  presets: [
    presetWind4({
      reset: true,
      utilityResolver: createRemToPxResolver()
    })
  ],
  theme: {
  },
})
export const defaults: Theme['defaults'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    featureSettings: 'var(--font-mono--font-feature-settings)',
    variationSettings: 'var(--font-mono--font-variation-settings)',
  },
}

3.记得安装unoccss的插件 这个对新手有好

image.png

总得来说就是 css 简写，不知道简写是什么，就靠插件提示

如果要比较他和tailwind的话，还是选他，为什么？他有tailwind的预设，约等于使用tailwind，详细看官网

Windi CSS 和 UnoCSS 都从 Tailwind CSS 获得了很多灵感。由于 UnoCSS 是从零开始构建的，我们能够很好地概览原子 CSS 的设计，并将其抽象成一个优雅而强大的 API。虽然与 Tailwind CSS 的设计目标不同，这并不是一种简单的比较。但我们将尝试列出一些差异。

Tailwind CSS 是一个 PostCSS 插件，而 UnoCSS 是一个同构引擎，配有与构建工具的一流集成（包括一个 PostCSS 插件）。这意味着 UnoCSS 可以更灵活地用于不同的场景（例如，CDN 运行时，可以即时生成 CSS），并且与构建工具有深度集成，以提供更好的 HMR、性能和开发者体验（例如，检查器）。

快速入手使用：

知道shortcuts 约等于在main.css 全局css 写的样式就行。 学会flex grid 布局就行

<div class="flex justify-center items-center w-full h-full"></div>
<style>
{
 display: flex;  
 justify-content: center;  
 align-items: center;
 width:100%
 height:100%
}
</style>

image.png

flex 简写，<div flex="~ items-center gap-2" />； 
margin 和 padding 简写，如：<div m-1 ml-1 mx-1 m-x-1 mt-1 mt-1.5px m="1 0" />； 
宽高度简写，<div h-1 h-auto h-full h-screen min-h-1 min-h-2vw max-h-50px />； 
负数，<div h--1 h--10px m--1 />； 
圆角，<div rounded rd-1 rd-full rd="1 0" />； 
!important，<div !flex />； 
鼠标样式，<div cursor-pointer />； 
禁用，<div disabled:cursor-default />；
布局： flex justify-center items-center
      grid  grid-cols-3  gap-10

1rem =16px

0.25rem =4px

avatar
文章
阅读
粉丝