原子化CSS（Atomic CSS)

已于 2023-09-11 15:18:21 修改
阅读量454 收藏
点赞数
分类专栏： # css 文章标签： css 前端
于 2023-09-11 15:18:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47999208/article/details/132805418
版权

UnoCSS，它不是像TailWind CSS和Windi CSS属于框架，而是一个引擎，它没有提供预设的原子化CSS工具类。引用自掘金，文章中实现相同的功能，构建后的体积TailWind 远> Windi > UnoCSS,体积会小很多。

像这种原子性的CSS应该在大公司会用到吧！目前还没用过，用过的都说好用，没用过的人说它代码太多了，下面就单纯实现下如何在项目中使用UnoCSS。

首先使用vite新建一个vue项目模板；

然后看上方掘金文章的下部分，就可以使用UnoCSS了

每天吃饭的羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
毫克原子：Atom的极简CSS框架
01-31
毫克原子：Atom的极简CSS框架
atomic-foundation:基础 CSS + 原子设计 + SASS 占位符
06-27
原子基金会基础 CSS + 原子设计 + SASS 占位符#Usage 在您的 bower 组件安装中，您将找到一个“user-files”文件夹。 这些是用于自定义的文件，因此您不得直接在那里编辑它们。 相反，您必须将所有“用户文件”内容...
原子化 CSS 实践
jclee95的个人博客
02-23 1201
原子化 CSS 实践。
原子css使用笔记 (Atomic CSS)
weixin_63212264的博客
07-07 290
原子css
UnoCSS原子CSS引擎—原子化真的是现代前端CSS利器？
最新发布
天天打码-16年老码农
03-12 1553
但 Vue 或 React 各自的组件化设计思想，都可以通过各自的组件化拆分来解决代码冗余的问题，使其可适用于各种简单&复杂的业务场景，是一套完善的最佳实践，而原子化CSS 没有办法做组件化拆分的，所以随着业务复杂度的上升，代码冗余迟早会发生，这直接限制了此类框架的普及，所以它无法作为前端CSS问题的根本解决方案。原子化CSS本身的概念和 Tailwind CSS、UnoCSS[2] 设计都比较简单，这里主要想聊一下在现代前端中，原子化CSS到底是不是完美的解决方案，是不是解决CSS问题的正确方向。
项目css优化-atom.css思想
浮游的博客
05-19 581
什么是atom.css 将很多可重复使用的样式提取出来，放在一个公共的css文件中，一方面自己书写很方便，另一方面可以大量减少vue文件里的css代码，进而减少vue文件的size。 atom.css的优势 atom.css定义为提供基础类的CSS库，一个class对应一个单独的CSS属性，与Bootstrap、Ant Design等UI框架提供的块状CSS不同的是，atom.css单一属性class将各种CSS块状属性解耦，开发者在书写模板时拥有了极大的自由，在布局时基本上不要去写单独的CSS，而这为后续
重新构想原子化 CSS
LuckyWinty的博客
10-27 616
感谢印记中文的 QC-L[1] 对本文进行翻译，英文原文: English Version[2]。本文会比往期文章相对长些。这是我个人的一个重大的工具发布，有许多内容我想谈论。如果你能花些...
原子化css
qq_41093271的博客
01-25 1194
提示：facekbook twitter最近的产品部署 主页减少了80%的css体积 一、什么是原子css //比如 <button class="button button--state-danger">Danger button</button> /* 原子css*/ .bw-2x{ broder-width:2px; } .bss{ border-style:solid; } .sans{ font-style:sans-serif: } .p-1x{ padding
CSS的原子化和组件化
包磊磊的博客
02-06 1604
在被问到这个概念的时候其实是有点不明所以的，从来没想过CSS还能玩出什么花样。最多是一些预处理器的方便性吧。在进行一些了解后才发现，原来自己日常所习惯且喜欢的书写css的方式就是有原子化在里面的，只是可能用的不够极致 // example：有圆形、三角、正方形 三个box，有红色，白色、黑色三种颜色分别搭配。用组件化和原子化来书写分别有几种方法呢？ 原子化和组件化的优劣及诸多便利且不去探讨，感兴趣的可以看一下这篇文章 // 原子化样式书写方式 fs_24 { font-size:24px
【vue3】css原子化
weixin_46590928的博客
11-17 2729
如果将编程语言（c/c++等）的基本思想应用于超文本语言（html/css等），能使后者的开发效率大大提高。什么是css原子化？先让我们把目光转到编程语言的一个基础概念——函数。函数可以增加我们代码的复用性。举一个简单的例子，我们定义一个判断质数的函数isPrime()，一个判断非质数的函数isNotPrime()，再定以一个将数字加入数组的函数push()，这些足够小的函数，我们暂且称他们为原子函数。
acss_devtools:原子CSS开发工具
05-01
acss-devtools 自动将您的元素样式转换为Atomic CSS类，成为快乐的雾化器！ 开发 更新manifest.json版本 运行npm run build 在dest发布acss_devtools-prod.zip
原子类css提高css开发效率
08-10
原子类css，提高css开发效率
选项：具有轻量级运行时的原子CSS-in-JS
02-06
具有轻量级运行时的原子CSS-in-JS 背景故事 设计系统包含面向组件的思维方式。 受启发，实用程序类提供了可重用的样式，而没有任何不良的副作用。 但是，必须先生成它们。 原子性通过按需实例化样式规则来概括前一个概念。 作为基于约束的布局的坚实基础，已逐渐兴起。 主要特点 :bowling: 支持速记属性 :bento_box: 可靠的伪选择器排序 :locked_with_key: 具有自动补全功能的类型安全 :T-Rex: 自动前缀和后备值 :books: 嵌入式JSDoc参考 :paw_prints: 可以忽略的运行时占用空间 :dizzy: 无需框架即可工作 入门 使用选择的包管理器安装库，例如： npm install otion 此外，配置框架，如下所示： 创建React App（
具有轻量级运行时的原子CSS-in-JS-JavaScript开发
05-26
具有轻量级运行时的Atomic CSS-in-JS Backstory Design系统采用了面向组件的思维方式。 受Tailwind CSS的启发，实用程序类提供了可重用的样式，而没有任何不良的副作用。 但是，必须先生成它们。 原子性通过按需实例...
原子CSS助手「Atomic CSS Helper」-crx插件
03-10
在原子CSS和常规CSS之间转换 支持语言:English
Atomic CSS Helper-crx插件
04-02
语言:English 在原子和常规CSS之间转换
原子化CSS-Tailwind CSS的简介和使用
a20065259的博客
05-22 6675
原子化 CSS(Atomic CSS) 是一种用于设计和构建现代 Web 应用程序的 CSS 框架。它提出了一种将 CSS 拆分为更小、更可维护的部分的方法，以便更好地组织和管理 CSS 代码。在原子化 CSS 中，CSS 组件被拆分为更小的部分，这些部分可以独立地编辑、测试和重用。这些原子通常是单个像素或极其微小的变化，例如颜色、大小、位置等。这些原子可以组合成更复杂的组件，例如按钮、表单、图标等。原子化 CSS 有助于减少代码量，提高代码的可维护性和可重用性，同时还有助于提高开发效率。
CSS 通用原子类
weixin_30398227的博客
01-09 300
/*文字排版*/.f10 { font-size: 10px; }.f11 { font-size: 11px; }.f12 { font-size: 12px; }.f13 { font-size: 13px; }.f14 { font-size: 14px; }.f16 { font-size: 16px; }.f18 { font-size: 18px; }.f20 { font-siz...
atom写css,Atom编写Markdown
weixin_34910865的博客
08-03 277
Atom编写MarkdownAtom简介Atom是GitHub开发的一款跨平台(Windows、Mac、Linux)文本编辑器，2015年Atom正式发布1.0版，开源，至于收费目前还没有听说，传言成熟后商用会收费；Atom是基于web技术构建的，界面看起来比其他的IDE更美观、更现代化，虽然Atom支持多种语言开发，但个人觉得目前Atom在编写Java等服务端代码还算不上是个强大的IDE,我用A...
java原子性Atomic包
04-26
Atomic包提供了一组原子性操作类，可以用来对数据进行原子性操作，例如原子性地递增或递减等。Atomic包中的主要类包括AtomicBoolean、AtomicInteger、AtomicLong、AtomicReference等。这些类可以用来保证多线程环境...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天吃饭的羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值