- 综合排序
- 最热优先
- 最新优先
- 来自专栏各类技术文章~
unocss，（原子化css），项目初体验
unocss 简单介绍 原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 ---- unocss 其实就是提供所有你可能需要用到的 CSS 工具。 即使你只使用了其中一条 CSS 规则，但还是要为其余几条规则的文件体积买单。你的 CSS 文件会随着你的生成规则无上限的增大，以此类推，项目包的体积也会越来越大。 例如Tailwind就是这样，Tailwind生成的 CSS 文件会有数 MB 的大小。为了解决这个问题，Tailwind 通过使用 PurgeCSS 来扫描你的大包产物并删除你不需要的规则。 这得以使其在生产环境中 CSS 文件缩减为几 KB。然而，请注意，这个清除操作仅在生成构建下有效，而开发环境下仍要使用包含了所有规则巨大的 CSS 文件。
6.8K00发布于 2021-11-06 - 来自专栏采云轩
小而美的 css 的原子化
小而美的 css 的原子化 http://zoo.zhengcaiyun.cn/blog/article/css 什么是 CSS 原子化 引用 文章 Let’s Define Exactly What 译文： “原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 的 原子化 CSS 是一个 CSS 框架， 在没有对应的 CSS 框架的项目中，是如何写 CSS 的。 我们这边调研几个比较流行的 CSS 框架，以下是几个框架简要介绍。 CSS 框架介绍 原子化 CSS 定义 “原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class。 CSS 原子化是如何解决这些问题的 首先我们看看前文中提到组件使用 CSS 原子化是如何实现的，项目中已引入 winidicss。
1.1K40编辑于 2022-12-01 - 来自专栏前端框架
UnoCSS原子CSS引擎-新一代前端原子化框架
UnoCSS中文文档：https://www.unocss.com.cn前有很多种原子化的框架，例如 Tailwind CSS，Windi CSS 以及 Tachyons 等。为什么要原子化 CSS？ ；那么目前哪些人在使用原子化 CSS 呢？ 一些网站已经开始使用原子化 CSS 比如 github , swiper.js 等↓如下图所示，他们页面的 CSS 类型可以明显看出是使用了原子化 CSS一种原子化 CSS 框架 - UnoCssUnoCSS 为什么推荐原子化 CSS那么为什么要原子化呢。很显然是让代码更 直观可读。 原子化 CSS 的实现实践如何才能具备原子化的理念的，实现方法有很多。在一个大项目中为了原子化 CSS，。
44400编辑于 2025-07-14 - 来自专栏前端Q
原子CSS引擎——unocss
什么是unocss unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 当然，原子样式也有很多选择，最著名的就是 Tailwind。 但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足 ❝扩展：什么是原子化 原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能 更加通俗的来讲，原子化CSS是一种新的CSS编程思路，它倾向于创建小巧且单一用途的class，并且以视觉效果进行命名。 ❞ unocss的优点 它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。 它可以让你的CSS文件更小，因为它只生成你用到的工具类。 它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。 它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标。 它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码。
2.2K30编辑于 2023-09-22 - 来自专栏神光的编程秘籍
快速掌握 Tailwind：最流行的原子化 CSS 框架
Tailwind 是流行的原子化 css 框架。 有多流行呢？ 它现在有 68k star 了，要知道 express 才 60k： 那什么是原子化 css？ 这个原子化 css 的概念还是很好理解的，但它到底有啥好处呢? 它解决了什么问题？ 口说无凭，我们试下 tailwind 就知道了，它就是一个提供了很多原子 class 的 css 框架。 总结 tailwind 是一个流行的原子化 css 框架。 传统 css 写法是定义 class，然后在 class 内部写样式，而原子化 css 是预定义一些细粒度 class，通过组合 class 的方式完成样式编写。 就是这些原因让它成为了最流行的原子化 css 框架。
1.8K30编辑于 2023-08-29 - 来自专栏前端从进阶到入院
Facebook 重构：抛弃 Sass Less ，迎接原子化 CSS 时代
实用工具/原子 CSS 的限制 实用工具/原子 CSS 看起来很有趣，但它们也带来了一些挑战。 人们通常手工编写实用工具/原子 CSS，精心制定命名约定。 与 Tailwind 相比，手写原子 CSS 可能不是最方便的。 和 CSS-in-JS 比较 CSS-in-JS 和实用工具/原子 CSS 有密切关系。这两种方法都提倡使用标签进行样式化。 探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”： 你不再需要创建一个 class 类名约定 通用样式和一次性样式的处理方式是一样的 能够提取页面所需要的的关键 以一个组件为例，来看看旧版传统 CSS 和新版原子 CSS 输出的区别。 结论 这就是我要说的关于原子 CSS-in-JS 所有内容。 我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。我可能在某些方面是错的，请随时纠正我。
3.4K10发布于 2021-01-18 - 来自专栏前端自习课
【总结】1839- 原子CSS引擎——unocss
什么是unocss unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 当然，原子样式也有很多选择，最著名的就是 Tailwind。 但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足 ❝扩展：什么是原子化 原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能 更加通俗的来讲，原子化CSS是一种新的CSS编程思路，它倾向于创建小巧且单一用途的class，并且以视觉效果进行命名。 ❞ unocss的优点 它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。 它可以让你的CSS文件更小，因为它只生成你用到的工具类。 它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。 它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标。 它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码。
2K10编辑于 2023-10-24 - 来自专栏前端从进阶到入院
Facebook 重构：抛弃 Sass u002F Less ，迎接原子化 CSS 时代
实用工具/原子 CSS 的限制 实用工具/原子 CSS 看起来很有趣，但它们也带来了一些挑战。 人们通常手工编写实用工具/原子 CSS，精心制定命名约定。 与 Tailwind 相比，手写原子 CSS 可能不是最方便的。 和 CSS-in-JS 比较 CSS-in-JS 和实用工具/原子 CSS 有密切关系。这两种方法都提倡使用标签进行样式化。 探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”： 你不再需要创建一个 class 类名约定 通用样式和一次性样式的处理方式是一样的 能够提取页面所需要的的关键 以一个组件为例，来看看旧版传统 CSS 和新版原子 CSS 输出的区别。 结论 这就是我要说的关于原子 CSS-in-JS 所有内容。 我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。我可能在某些方面是错的，请随时纠正我。
3.8K50编辑于 2022-11-28 UnoCSS即时按需引用的原子css引擎
很多前端可能第一次听说这个词unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。当然，原子样式也有很多选择，最著名的就是 Tailwind。 但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足❝扩展：什么是原子化 原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能 更加通俗的来讲，原子化CSS是一种新的CSS编程思路，它倾向于创建小巧且单一用途的class，并且以视觉效果进行命名。 unocss的优点它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。它可以让你的CSS文件更小，因为它只生成你用到的工具类。它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。 它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标。它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码。
52110编辑于 2025-04-232025 年底，前端开发怎么看 TailwindCSS 这种原子化 CSS，我有点想法
为什么要有原子化CSS很多人提到原子化CSS时，会强调它能压缩构建产物体积、提升加载速度，或者提高开发效率。这些优势确实存在，但在最初接触TailwindCSS时，我并未考虑这些工程层面的问题。 原子化CSS的缺点，但...真的是缺点么？很多老前端会说，原有的CSS的语法考虑了语义化的部分，比如我把一个class命名为title，那很明显，我打眼一看，诶，这个地方就是一个标题。 因此我认为，原子化CSS的价值与项目组件化的合理性和彻底性紧密相关。 它用“语义化的类名+原子化的实现”，搭建了一座人与AI协同开发的桥梁。写在最后本文不是在鼓吹原子化CSS，更不是在鼓吹TailwindCSS。只是我个人在项目开发时，对原子化CSS这一类工具的思考。 欢迎各位在评论区积极探讨，聊聊原子化CSS在未来开发的可能性。
27711编辑于 2025-12-06- 来自专栏全栈开发工程师
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎 一、概述 1、简介 UnoCSS 是一个轻量级、可扩展和零配置的 CSS 框架，旨在提供简洁、灵活且高效的样式开发体验。 它遵循类似于 Tailwind CSS 的原则，通过使用类名来应用样式，从而提供快速而直观的样式编写方式。 UnoCSS 的设计目标是提供最小化的样式，同时保持灵活性和可定制性。 与其他 CSS 框架不同的是，UnoCSS 不包含任何默认主题或设计样式，这使得它非常适合定制化和与现有设计系统的集成。你可以根据项目的需求自由地定义样式和配色方案，以实现完全定制化的外观和风格。 总而言之，UnoCSS 是一个简洁、灵活且可定制的 CSS 框架，它以零配置的方式提供了快速而直观的样式开发体验。 紧凑预设 @unocss/preset-attributify 启用属性化模式以适用其他规则 @unocss/preset-tagify 启用标签化模式以适用其他规则 @unocss/preset-icons
39710编辑于 2025-01-06 - 来自专栏程序员的园——原创文章
原子变量——原子操作
在原子变量一中做了原子变量的科普介绍，仅仅将普通变量升级为原子变量，便解决了多线程环境下的数据竞争问题。 在应对如上的简单案例时，仅仅使用原子变量重载的操作++即可，为了应对更加复杂的使用场景，C++标准库提供了丰富的原子变量操作，使之无需加锁便可在多线程环境中操作共享数据。 本文将对这些原子变量操作做更详细的说明。 在C++中，常用的原子变量操作包括： store：存储/改写一个新值。 load：读取当前值。 exchange：交换当前值并返回旧值。 让我们开始本文的原子变量操作之旅。 1. 存储操作 store操作将一个新值存储到原子变量中。 这些操作尝试将原子变量从给定的旧值更改为新值，并返回布尔值表示操作是否成功。
60910编辑于 2024-11-07 - 来自专栏Android自学
Reset CSS（CSS初始化）总结
那如何保持CSS在每个浏览器上的显示效果相同呢？这就涉及到了CSS初始化的问题。 熟话说，先破后立。 CSS初始化的思想就是先把所有的默认值置为相同的，再把有需要的改成需要的值，这样所有浏览器的显示效果都会相同。 Yahoo CSS Reset： /*css reset code */ /**** 文字大小初始化,使1em=10px *****/ body { font-size:62.5%; } /* for IE/Win */ html>body { font-size:10px; } /* for everything else */ /*字体边框等初始化*/ body,div,dl,dt,dd 关于CSS Reset的讨论我在知乎上看到一个帖子，讨论Normalize.css 与传统的 CSS Reset 有哪些区别？ 上面说到： Normalize.css 是改良派。
2.7K21发布于 2018-07-16 - 来自专栏独行猫a的沉淀积累总结
HarmonyOS实战—亮眼的原子化服务体验
卡片可大可小、可藏可显,还能够个性化定制,让每个桌面独一无二。 卡片也是原子化服务的载体,在服务中心可以轻松获取、随时分享,无需下载、安装,一步到位获取各种服务。 什么是原子化服务？ 原子是构成应用的不可再分解的基本服务单元，鸿蒙原子化服务强调的是轻量化服务、免安装应用，也便于为其他应用共享，轻量化的服务可以随意组合，且可有意突出特色化的服务，可为用户提供一个或多个便捷的用户程序形态 关于原子化服务的更多内容，参见：HarmonyOS Developer:什么是原子化服务 来看下几个火热的例子： 距离HarmonyOS 2.0发布不到一个月时间，6月25日，国泰君安上线了HarmonyOS 原子化服务，一次推出“君弘Lite”、“开户”两个原子化服务卡片。 招商银行、中国银行等金融机构此前也官宣上线鸿蒙原子化服务，积极布局开放银行场景新生态。 鸿蒙原子化服务具备免安装、轻量化的特性，其载体为卡片，在服务中心可以轻松获取、随时分享，无需下载、安装。
1.4K20编辑于 2022-01-07 - 来自专栏FunTester
自动化测试用例的原子性
原子性测试 为了使自动化框架都成功，此概念对于理解至关重要：「原子自动化测试用例不应模仿端到端自动化用例。」 取而代之的是，自动化检查应形成一个不可拆分的单元，一个用例只能测试一个功能点。 原子性测试用例的优点 精准反馈 编写原子性测试可以快速执行得到测试结果。测试报告的反馈是迅速而针对性的。检查功能状态的时间一般都是几秒钟内完成。 编写原子测试用例可减少脆弱性，因为它减少了该测试中可能出现的断裂的数量。原子性测试用例能够减少大量误报，这又会促进出现问题的排查时间。 因此一个自动化测试用例中的步骤越多，测试就越有可能中断并产生误报。 更高的测试覆盖率 编写原子测试的第三个好处是，如果原子测试用例失败，它们将不会阻断其他功能用例的测试。 这是一个例子： 在某一个带有登录屏幕的页面： 使用「GUI」测试工具打开Web应用 执行「JavaScript」脚本 登录成功 现在，使用「GUI」自动化测试工具 执行要测试的单个原子测试用例。
1.4K20发布于 2021-02-24 - 来自专栏技术集锦
《HarmonyOS实战—入门到开发，浅析原子化服务》
原子化服务 在此之前呢，我们不得不去了解下与 “服务卡片” 有着密切关系的原子化服务。 它具有随处可见、跨设备、服务直达等特性： （1）服务发现：原子化服务可在服务中心发现并使用。 （2）智能推荐：原子化服务可以基于合适场景被主动推荐给用户使用；用户可在服务中心和小艺建议中发现系统推荐的服务。 （3）服务卡片：支持用户无需打开原子化服务便可获取服务内重要信息的展示和动态变化，如天气、关键事务备忘、热点新闻列表。 （4）支持跨设备分享：例如接入华为分享后，用户可分享原子化服务给好友，好友确认后打开分享的服务。
1.1K20编辑于 2022-06-03 CSS工程化
这样就形成了不同于过去的css文件结构：文件更多、拆分的更细 而同时，在真实的运行环境下，我们却希望文件越少越好，这种情况和JS遇到的情况是一致的，因此，对于css，也需要工程化管理。 从另一个角度来说，css的工程化会遇到更多的挑战，因为css不像JS，它的语法本身经过这么多年并没有发生多少的变化（css3也仅仅是多了一些属性而已），对于css语法本身的改变也是一个工程化的课题 如何解决 css in js时，往往是将样式加入到元素的style属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码 「css module」 非常有趣和好用的css模块化方案，编写简单 CSS工程化面临着诸多问题，而解决这些问题的方案多种多样。如果把CSS单独拎出来看，光是样式本身，就有很多事情要处理。 既然有这么多事情要处理，何不把这些事情集中到一起统一处理呢？ 最后 若本文对于 CSS工程化 阅读有任何错误的地方，欢迎大家给我提意见，一定虚心听取你们的指正，若觉得不错的，也可以点个「star」 支持一下我。
1.2K31编辑于 2022-08-11- 来自专栏coding个人笔记
初始化CSS
“每个前端都应该要有自己的一个初始化CSS” ? 做前端的人都知道，新建的html几乎所有的标签都是有margin和padding的，这对于写样式的时候影响很大。 每个前端都应该要有自己的一个初始化CSS，每个CSS也都会不同，像淘宝、腾讯、新浪这些大型的网站，他们的初始化CSS也各不相同，所以每个人的CSS并不需要照搬别人的。 这款初始化CSS，会造成很多是冗余的，像abbr、hgroup、figure等标签，我到现在为止都没用过，甚至没听过，所以这样的初始化CSS是不合理的。 我推荐使用Normalize这款CSS，相对和平，同时进行了一些bug修复 ? 只把常用的标签初始化了，当你想要用到这边没有初始化的标签时，再来这边添加。 然后再在里面添加一些自己认为需要加的初始化样式，这样就有了自己独一的一份reset.css。
58240发布于 2020-04-24 - 来自专栏Mintimate's Blog
原子化接替语义化声明，TailwindCSS使用指南
这就保证了Tailwind CSS可以实现高度定制化，同时输出效率也较高。 版本历史 TailwindCSS自发布出，就支持原子化操作，当然TailwindCSS也在不断发展。 原子化对比语义化 前文说过，TailwindCSS是典型的原子化CSS（Atomic），对比传统的语义化CSS（Semantic）还是有一些特点和区别。 CSS 更模块化。不同的类可组合使用,避免重复样式。 更易维护。直观的类名和模块化 CSS 让其他开发者更容易理解和修改样式。 可重用性更高。模块化的类可跨页面、组件重复使用。 前后端分离。 转换到原子化CSS，需要读官方文档、需要学习设计系统的知识。 相比语义化CSS,原子化CSS类名方式更具扩展性,是未来CSS编写的发展趋势。 本文系统概述了从语义化到原子化的演进,以及如何上手使用Tailwind CSS。
4.7K00编辑于 2023-09-28 - 来自专栏软件绿色联盟动态
软件绿色联盟发布原子化服务技术标准
欢迎业内专家、应用开发者对本标准发表看法， 一、 原子化服务通用技术标准范围 本标准规定了原子化服务的技术规范和其运行平台的能力要求，用于指导原子化服务提供商构建通用的原子化服务，同时规范了服务运行平台的基本能力构成 该标准内容包括三个方面： 原子化服务定义，主要描述原子化服务的定义及其与现有同类产品的关系和区别。 运行平台定义，主要描述原子服务的执行平台的能力规范，包括执行框架和服务的调度分发机制。 HTML5很少单独工作，大多数HTML5应用程序集成了级联样式表（CSS）和JavaScript，CSS定义了HTML组件在浏览器中的呈现方式，JavaScript包括用于处理文本、对象和数组的API。 例如： 以APK为载体的原子化服务运行在Android系统提供的本地应用运行环境中； 以IPA为载体的原子化服务运行在IOS提供的应用运行环境中。 原子化服务工作组后续还将发布统一的API标准、质量标准，统一的原子化服务分类、以及多平台开发框架，敬请期待！
1.1K20编辑于 2022-03-31
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号