草庐IT

结合 UnoCSS 对原子化 CSS 的理解

Himmelbleu 2023-03-28 原文

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 到底给我们带来了什么好处。先来看看我通过 UnoCSS 写的一个 Vue 组件：

再来看看我没有用 UnoCSS 的组件的样子：

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.4，leh-2就可以生成：line-height: 2。

原子化：组装 CSS

其实我更想说，原子化 CSS ≈ 独立 CSS，通过 class 来组装 CSS。而 UnoCSS 会根据给的值动态生成 CSS：

结束语

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

UnoCSSCSScodeclassHtml/Css

有关结合 UnoCSS 对原子化 CSS 的理解的更多相关文章

  1. ruby-on-rails - 结合 meta_search 与 acts_as_taggable_on - 2

    我在开发的Rails3网站的一些搜索功能上遇到了一个小问题。我有一个简单的Post模型，如下所示:classPost我正在使用acts_as_taggable_on来更轻松地向我的帖子添加标签。当我有一个标记为“rails”的帖子并执行以下操作时，一切正常:@posts=Post.tagged_with("rails")问题是，我还想搜索帖子的标题。当我有一篇标题为“Helloworld”并标记为“rails”的帖子时，我希望能够通过搜索“hello”或“rails”来找到这篇帖子。因此，我希望标题列的LIKE语句与acts_as_taggable_on提供的tagged_with方法

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  4. CAN协议的学习与理解 - 2

    最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  5. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  6. ruby - 易于初学者理解的 Ruby 库 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭3年前。Improvethisquestion我正处于学习Ruby的阶段，我想查看一些小型库的源代码以了解它们是如何构建的。我不知道什么是小型图书馆，但希望SO能推荐一些易于理解的图书馆来学习。因此，如果有人知道一两个非常小的库，这是新手Rubyists学习的好例子，请推荐!我想使用Manveru'sInnatelib，因为它试图保持在2000LOC以下，但我还不熟悉其中经常使用的Ruby速记。也许大约100-5

  7. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

  8. ruby-on-rails - 将 Amazon Simple Notification service SNS 与 ruby​​ 结合使用 - 2

    很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visitthehelpcenter.关闭9年前。我需要从基于ruby​​的应用程序使用AmazonSimpleNotificationService，但不知道从哪里开始。您对从哪里开始有什么建议吗？

  9. ruby - 如何理解 Ruby 中的发送者和接收者？ - 2

    我很难理解Ruby中sender和receiver的实际含义。它们一般是什么意思？到目前为止，我只是将它们理解为方法调用和获取其返回值的调用。但是，我知道我的理解还远远不够。谁能给我一个Ruby中发送者和接收者的具体解释？ 最佳答案 面向对象中的一个核心概念是消息传递和早期概念化，这在很大程度上借鉴了计算的Actor模型。艾伦·凯(AlanKay)创造了面向对象一词并发明了最早的OO语言之一SmallTalk，他拥有voicedregretatusingatermwhichputthefocusonobjectsinsteadofo

  10. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

随机推荐