fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

UnoCSS
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://unocss.dev/
GitHub:https://github.com/unocss/unocss
网站描述:一个即时的原子化 CSS 引擎

Unocss 是一个即时的原子化 CSS 引擎,旨在灵活和可扩展。核心是不拘一格的,所有的 CSS 工具类都是通过预设提供的。


概念-原子化CSS

原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧且用途单一的 class,并且会以视觉效果进行命名。

听起来厉害,但实现的最终方式超级简单,核心就是预置一大堆 class 样式,尽量将这些 class 样式简单化、单一化,在开发过程中,可以直接在 dom 中写预置好的 class 名快速实现样式,而不需要每次写简单枯燥大量的 css 样式,如下代码所示:

  1. 先预置一组class列表
.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // 无数个....
  1. 编码时在dom中直接写class名,快速实现样式
<div>
  测试dom
</div>

而预置的class列表中的样式,有着一定的规律,开发者可以通过学习快速掌握,利用多个class在dom中的组合快速实现效果


UnoCSS 做了哪些事

按 UnoCSS 作者的说法,UnoCSS 并非要替代 Tailwind CSS 而是从另一个角度使原子化CSS在业务中融合的更完美。

UnoCSS 作者是 Vite 团队成员,我觉得正是因为他作为 Vite 的开发者,对于工程化构建具有很高的敏感度,所以才能创造出 UnoCSS 将原子化的CSS与前端工程融合到极致。

那么 UnoCSS 做了哪些事呢:

1、按需生成

生成业务真正使用到的 class ,同时在开发和生产环境使用

对比 Tailwind CSS 只在生产环节清除无引用代码,UnoCSS 在开发环节也通过文件监听按需传输,获得更快地性能(虽然已经很快了,但再快一点总归是个提升嘛)

传统的方式

2、极具灵活性

UnoCSS 对自己定位是一个 CSS 引擎而非一个框架,所以它与 Tailwind CSS 应该是包含关系,UnoCSS 作为规则的制定者,而 Tailwind CSS 可以作为其中的一组 preset

import UnocssPlugin from '@unocss/vite'
import PresetTachyons from '@unocss/preset-tachyons'
import PresetBootstrap from '@unocss/preset-bootstrap'
import PresetTailwind from '@unocss/preset-tailwind'
import PresetWindi from '@unocss/preset-windi'
import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'

export default {
  plugins: [
    UnocssPlugin({
      presets: [
        // PresetTachyons,
        PresetBootstrap,
        // PresetTailwind,
        // PresetWindi,
        // PresetAntfu
        // 选择其中一个...或多个!
      ]
    })
  ]
}

属性化书写 class 名

// 将冗长的 calss 按类型区分,更方便阅读理解
<button>
  Button
</button>

// 改变为
<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>

在自定义规则上,UnoCSS 提供更加灵活的静态&动态匹配规则。

编译进一步优化(比如不再解析AST),生产构建速度再度提升。

UnoCSS 等于是做了个更上层的引擎,以后再有新的原子化CSS框架也可以兼容进来了,省得你有选择困难症。


适用场景

在一些简单的业务场景上,原子化CSS确实有非常大的优势,比如快速开发响应式H5,业务复杂度低的中后台系统,简单的官网页面。

而在一些复杂的业务场景,比如复杂的C端业务,大型的系统就不在那么适用了。

链接: https://fly63.com/nav/4028

more>>
相关栏目
sass
成熟、稳定和强大的CSS扩展语言
官网GitHub
postcss
PostCSS是一个使用JavaScript插件来转换CSS的工具。
官网GitHub
stylus
Stylus是一个高效、动态以及丰富的CSS预处理器
官网GitHub
animate.css
齐全的CSS3动画库
官网GitHub
Metro UI
基于平板界面设计CSS库是一种界面展示技术
官网GitHub
Spectre.css
轻量响应式 CSS 框架
官网GitHub
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网GitHub
DropCSS
一个用来清理无用 CSS 的小工具
点击进入GitHub
Pattern.css
一个CSS库,使用美丽的图案填充空的背景。
官网GitHub
three-dots
一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成
官网GitHub
CSSeffectsSnippets
提供了漂亮的CSS动画
官网GitHub
Angrytools
多样定制,实用,支持单个动画代码复制的网站
官网
magic
带多种动画效果的CSS3动画库
官网GitHub
topcoat
一款为简洁高速Web应用提供CSS开发的工具
官网GitHub
Biomatic UI
简单,灵活的CSS框架
官网GitHub
css-animation-101
从零开始介绍 CSS 动画开源电子书
官网GitHub

手机预览