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 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • CSS 尺寸单位有两种:绝对单位:绝对单位是固定尺寸大小的,与任何的其他元素都无关,在任何情况下他都是固定相同的,绝对单位有 cm, mm, px 等;相对单位:相对单位是相对于其他元素的尺寸大小,可...

  • 前几天我在面试前端开发同学的时候,有问到关于margin基础布局相关内容的过程中,发现很多同学基本解释不清楚,今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。...

  • CSS 为实现重叠效果,将 margin-top 设为负值时,div 背景被 img 图片遮挡 一、未实现重叠效果 CSS 为实现重叠效果,将 margin-to...

  • scss scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,使用scss可...

  • 微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整...

  • 在许久之前,曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果: 文本内容不超过容器宽度,正常展示 文本内容超过容器的情况,内容可以进行跑马灯来回滚动展示 像是这样: 但...

  • 4.1 关键字、字符串和其他文本值 样式表中的一切都是文本,但是有些类型的值表示的是字符串本省,而不是数字或颜色等。表示字符串本身的值有 URL 和让人难以置信的图像。 4.1.1 关键字 有时,声明...

  • 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定。 第一步、我们要将一行文字从中间展开 ...

  • 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: div { width: 300px; height: 300px; background:...

  • 众所周知,网页的暗黑模式可以减少屏幕反射和蓝光辐射,减少眼睛的疲劳感,特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应(Neon Effect)提供了发挥的环境。 霓虹灯效应是一种视觉效果,其特...

  • 本博文介绍CSS中的基础选择器和复合选择器。 基础选择器包括标签选择器、类选择器、id选择器和通配符选择器,复合选择器包括后代选择器、子选择器、并集选择器和伪类选择器。  1 基础选择器 基础选择器由...

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

  • 动态DOM节点的classList属性 为 div元素动态添加 class: element.classList 定义和用法 classList 属性返回元素的类名,作为 DOMTokenList ...

  • 读初二的时候,学校有了计算机,也简单地介绍了下网页,不过那是的html 都是table,也没有去细看。到了高中,qq空间有个html模式,为了让文章好看点。也浅尝辄止地学了下css css简介 在HT...

  • CSS Module出现的背景 我们知道,Javascript发展到现在出现了众多模块化规范,比如AMD、CMD、 Common JS、ESModule等,这些模块化规范能够让我们的JS实现作用域隔离...

  • CSS鼠标样式(cursor)总结 属性值 示意图 描述 auto   默认值,由浏览器根据当前上下文确定要显示的光标样式 default 默认光标,不考虑上下文,通常是一个箭头 ...

  • CSS背景设置 通过CSS背景属性,可以给页面元素添加背景样式,页面元素指任意标签。 背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。   背景颜色 一般默认值是:tran...

  • 1CSS特性    1.3优先级          1.4权重叠加计算         2Chrome调试工具     2.1查错流程         3CSS盒子模型        3.1内容的...

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

  • 前言 随着CSS的不断发展,一些很酷且有用的属性要么完全被忽视,要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性,这些属性你可能听说过...