5步写出第一个原子化样式：otion安装与快速入门完整教程

5步写出第一个原子化样式otion安装与快速入门完整教程【免费下载链接】otionAtomic CSS-in-JS with a featherweight runtime项目地址: https://gitcode.com/gh_mirrors/ot/otionotion 是一款原子化 CSS-in-JS原子样式库主打「鹅毛般轻量的运行时featherweight runtime」把每条 CSS 属性拆成独立、可复用的原子规则按需生成类名并自动注入页面同时提供 TypeScript 类型安全与自动补全。本教程带你 5 步走完 otion 安装与快速入门从零写出第一个原子化样式。otion 是什么为什么选择原子化 CSS-in-JS 方案特性说明 简写属性支持padding: 8自动补全为8px无需手动写单位 类型安全CSS 属性即插即检编辑器自动补全告别拼写错误 伪类顺序可靠:hover、:focus等规则顺序由优先级分组保障覆盖行为可预期 自动前缀内置自动添加-webkit-、-ms-等厂商前缀还支持数组回退值 运行时极小微型运行时microlibrary包体积占用可忽略 无框架依赖不绑定 React/Vue任意前端项目都能直接用灵感来自 Tailwind CSS 的原子化思想类名即样式、无副作用、天然去重。相同规则多次调用css()会复用同一条已注入的样式页面样式表始终保持精简。第1步一键安装 otion 原子样式库在你的项目根目录执行以下任一命令即可npm install otion或者使用 yarnyarn add otion核心 API 全部从otion包导出实现位于 createInstance.tscss、keyframes、setup、hydrate。默认实例在 index.ts 中完成初始化导入即用无需任何配置。第2步5行代码写出第一个原子化样式css()接收一个对象形式的样式规则返回一串空格分隔的唯一类名并自动把新规则注入head中的样式元素import { css } from otion; const className css({ display: flex, justifyContent: center, padding: 8, // 自动补全为 8px lineHeight: 1.5, // 无单位属性保持原值 color: blue });把它赋给任意元素的class/className即可生效。原子化的威力在于自动去重两处都写{ color: blue }时第二次调用会直接复用第一次注入的类名样式表里永远不会出现重复规则。第3步快速上手悬停、媒体查询与高级选择器交互状态和响应式布局是日常刚需otion 的对象嵌套语法可以自然表达const className css({ color: blue, :hover: { color: red }, media: { (min-width: 768px): { color: orange } } });伪类以:开头的键如:hover、:focus媒体查询以media包裹条件作为子键也可与伪类自由组合高级选择器用selectors键写 * *这类嵌套选择器代表父规则作为严格原子化之外的逃生舱建议少用此外当自动前缀不够时可用数组回退值最后一个生效css({ justifyContent: [space-around, space-evenly] });第4步用 keyframes 写出你的第一个 CSS 动画keyframes()返回一个惰性对象只有被真正使用时才会把keyframes规则注入页面import { css, keyframes } from otion; const spin keyframes({ from: { transform: rotate(0deg) }, to: { transform: rotate(360deg) } }); const className css({ animation: ${spin} infinite 20s linear });官方 Create React App 示例 App.tsx 就是一个完整的动画落地场景旋转的 logo还贴心地用(prefers-reduced-motion: reduce)媒体查询尊重了用户的减少动效偏好。第5步集成到你的框架——React、Next.js 与 Gatsbyotion 与框架无关但项目自带三套开箱即用的集成示例可对照参考Create React Appexample-cra/直接import { css } from otion即可Next.jsexample-nextjs/在pages/_app.tsx中于typeof window ! undefined分支里调用setup(options)与hydrate()完成客户端恢复SSR 侧则用otion/server的VirtualInjector收集样式并剔除未使用规则Gatsbygatsby-plugin-otion/ 插件 example-gatsby/ 示例服务端渲染完整写法可参考 packages/otion/README.md 的 Server-side rendering 一节自定义前缀函数、CSP nonce、iframe多实例等进阶定制同样有文档覆盖。快速上手速查5步回顾✅npm install otion一键安装✅css({ ... })生成原子类名相同规则自动复用✅:hover/media/selectors覆盖交互与响应式✅keyframes()惰性注入 CSS 动画✅ 对照框架示例接入 React / Next.js / Gatsby新手常见问题Qotion 的运行时真的有那么小吗A是的项目定位就是featherweight runtime微型库不做主题化、不做全局样式等重功能用更小的包体积换更纯粹的原子化工作流。Q它和 Emotion、styled-components 有什么区别Aotion 走原子化路线——每个属性是独立可复用的原子规则、类名按哈希稳定生成而传统 CSS-in-JS 多为整段对象生成一个类名。项目名即是对 Emotion 的致敬API 风格与之相近可用模块别名平滑迁移。Q能写全局样式或主题吗A设计上刻意不提供全局样式注入避免副作用。全局重置、CSS 自定义属性请用普通 CSS 文件主题化推荐使用 CSS Custom Properties 或 React Context 等方案。Q现在就可以上生产环境吗A当前处于0.Y.Z版本阶段自动测试仍在完善中但已有功能可安全使用项目方也建议迁移时留意 otion 与 Emotion 并非 100% 可互换。准备好动手了吗打开你手头的 React 项目npm install otion后 5 行代码就能看见第一个原子化样式——这正是轻量方案最快的上手体验。【免费下载链接】otionAtomic CSS-in-JS with a featherweight runtime项目地址: https://gitcode.com/gh_mirrors/ot/otion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考