UnoCSS 简化 CSS 的书写,Nice!

CSS 样式太多,重复写

在学习 UnoCSS 之前,我提出几个问题:

  1. 你是否有过写完了 HTML 之后,跳转到 style 写 CSS 这样来回跳转的痛苦?
  2. 你是否有过不知道如何给节点取类名的痛苦(有的节点确实没啥必要取类名,但就是需要写 CSS)?
  3. 你是否有过管理重复、繁杂、繁多的 CSS 而痛苦?

以上三个问题,在你使用了 UnoCSS 之后,基本上可以解决掉。使用 UnoCSS 可以更加快速地构建你的 HTML 和样式。这是 UnoCSS 作者对 CSS 的感想:重新构想原子化 CSS。有兴趣可以先去读一读。文章中有一个关键词“原子化”,使用了之后才可能对这个关键词有反应。

对 CSS 原子化的理解

我们写 CSS 时,通常都是 类名、id、标签 选中之后在 style 标签里写样式,通常都是一大坨的 CSS。有时候我们遇到了样式复用的情况,提取部分相同的样式到一个 class 中,再给这些节点添加一个 class:

.common {
  font-size: 20px;
  color: white;
  border: 1px solid #cccccc;
}

.a {
  background: green;
}

.b {
  background: blue;
}
<div class="a common"></div>
<div class="b common"></div>

似乎这样还不让我们满意,可复用性还是太低了些,假如第三个节点要用 common class 里的 border 呢?可以这样做:

.border {
  border: 1px solid #cccccc;
}

.common {
  font-size: 20px;
  color: white;
}
<div class="a common border"></div>
<div class="b common border"></div>
<div class="c common border"></div>

可以想象,样式越多、这样提取样式的工作也就越来越多。像是 Bootstrap 这样的 CSS 工具库,给我们做了不少这样的工作,可以减少很多我们写 CSS 的时间,直接套上类名就可以了。但问题是,我们引入了 Bootstrap 之后,里面没有用到的类样式,也会被打包到生产环境中,是不是太影响性能了呢?我们的理想是,不用的就不要打包,舍弃到,而只需要用到的。

这个时候,UnoCSS 就派上用场了,作者就是通过它向我们表达“构想原子化 CSS”的一个实体。

UnoCSS

对 UnoCSS 的很多东西我不介绍了,作者已经有文章了:重新构想原子化 CSS - 向你介绍 UnoCSS。我就直接通过案例来向你展示 UnoCSS 到底给我们带来了什么好处。先来看看我通过 UnoCSS 写的一个 Vue 组件:

这个组件里面我的 style 标签直接删掉了,已经完全用不到了。可以看到里面有大量的 class。再来看看我没有用 UnoCSS 的组件样子:

是真的丑!样式也很多重复的,我的 font-size 已经写了不知道多少遍了,border-radius 也是,其他组件也有写,我也想过提取公共的,但是碍于太麻烦就没搞。

Vite + UnoCSS

cnpm i -D unocss
// vite.config.ts

// unocss
import Unocss from "unocss/vite";
import { presetAttributify, presetUno } from "unocss";

export default defineConfig(({ command, mode }) => {
  return {
    plugins: [
      vue(),
      Unocss({
        presets: [presetAttributify({}), presetUno()],
        rules: [
          [/^fs-(\d+\.{0,1}\d{0,2})$/, ([, d]) => ({ "font-size": `${d}px` })],
          [/^leh-(\d+\.{0,1}\d{0,2})$/, ([, d]) => ({ "line-height": `${d}` })],
        ]
      })
    ]
  };
});

UnoCSS 有一些自带的 class,可以使用 https://uno.antfu.me/ 来查询,没有自己想要的话,可以通过 rules 来自己设置一个规则,如上,就可以使用啦!

动态生成样式

来看这张图,c-#878787,UnoCSS 区别于 Bootstrap 的一个最直观的特点就是,值是可以动态设置的,而不是静态的,必须给每一个颜色写一个 class:

上面的,oy、leh 等等都是如此,如上,leh 是我自己添加的一个 rules,leh-1.4 生成一个样式line-height: 1.4leh-2就可以生成:line-height: 2

原子化:组装 CSS

其实我更想说,原子化 CSS 就是拆分样式,然后通过 class 来组装 CSS。并且,UnoCSS 会根据给的值动态生成 CSS:

结束语

以上都是我自己使用 UnoCSS 的感想。UnoCSS 真的给我省了不少的功夫去写 CSS。解决了每一次要给节点命名的痛苦!!!

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • scss scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,使用scss可...

  • 首先需要明确一点,以往浏览器对css的支持是不同的,不同浏览器的样式可能会存在差异,对待这种差异问题,需要写几套不同的css来兼容(边框、圆角、颜色等),这样是非常麻烦的,浏览器css显示差异化属于浏...

  • 前言 对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者...

  • 本博文介绍CSS中常用的文本属性,包括文本颜色、文本对齐、装饰文本、文本缩进和行间距。 属性 说明 属性值 color 文本颜色 颜色(如red、green)#十六进制(如#ff0000)...

  • CSS 属性被分为不同的类型,如字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。对于初学者来说,需要熟悉并掌握这些属性。前面我们已经了解了30个CSS选择器,但是新的CSS3属...

  • 传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性,不能在移动端很好地布局 flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC 端浏览器支持情况不如移动端 f...

  • css的全局关键字有下面几个: inherit : 继承父级属性 initial:将元素初始化成css的初始值 unset:继承和初始化元素 revert:还原到浏览器内置样式 all:代指所有cs...

  • CSS 容器尺寸单位cqw 容器查询宽度(Container Query Width)占比。1cqw 等于容器宽度的 1%。假设容器宽度是 1000px,则此时 1cqw 对应的计算值就是 10px。...

  • 在我之前的开发中,CSS对于我来说,要用什么找什么,对CSS的了解并不算深入;在我刚开始深入学习CSS时,第一个遇到的就是CSS数据类型,我听说过JS、TS的数据类型,CSS怎么也有数据类型?但是随着...

  • 1.CSS 参考手册 2.元素的分类 首先我们要知道一共有几种元素 1.行内元素(可以与其他行内元素位于同一行,不会以新行开始高度、宽度不能设置) 2.块级元素(每个块级元素都从新的一行开始,其后的元...

  • 本文将介绍一个角向渐变的一个非常有意思的小技巧! 我们尝试使用 CSS 绘制如下图形: 在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局...

  • 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面...

  • 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 假设,我们有这样一张 Gif 图: 利用 CSS,我们尝试来搞一些事情。 图片的 Glitch Art 风 在这篇文章中 --C...

  • CSS3选择器总结(表格) html标签有2种关系:包含关系和并列关系; CSS3选择器分类:基本选择器、组合选择器、属性选择器、伪类选择器; 伪类选择器分类:动态伪类、结构伪类、状态伪类、目标伪类;...

  • 欢迎关注我的公众号:前端侦探最近碰到这样一个问题,在一张封面上直接显示书名,可能会存在书名看不太清楚的情况(容易受到背景干扰),如下为了解决这个问题,设计师提了一个“究极”方案,将书名背后的图片模糊一...

  • 本文是 CSS Houdini 之 CSS Painting API 系列第四篇。现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式!现代 CSS 高阶技...

  • 看了《 less 的 & 详解 https://www.jianshu.com/p/127b0974cfc3》,对于此文再做一别补充 常见用法: 直接嵌套写法 .a{   color:red;   ....

  • 第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;     第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;     第三等级:代表 calss | 伪类...

  • 一、css的三种引入方式: 1、行内样式 行内样式 2、内部样式表 基本选择器详解 /*基本选择器*/ /*标签选择器:选择页面上所有的标签*/ ...

  • CSS Grid 布局是一种二维布局方式,可以将页面分成行和列,并在其中放置元素。使用 Grid 布局时,需要定义网格容器和网格项目。 第一步,在网格容器元素(通常是一个 div)上设置 displa...