5步写出第一个原子化样式：otion安装与快速入门完整教程
5步写出第一个原子化样式：otion安装与快速入门完整教程
【免费下载链接】otionAtomic CSS-in-JS with a featherweight runtime项目地址: https://gitcode.com/gh_mirrors/ot/otion
otion 是一款原子化 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或者使用 yarn：
yarn add otion核心 API 全部从otion包导出，实现位于 createInstance.ts（css、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 与 Gatsby
otion 与框架无关，但项目自带三套开箱即用的集成示例，可对照参考：
- Create React App：example-cra/，直接
import { css } from "otion"即可 - Next.js：example-nextjs/，在
pages/_app.tsx中于typeof window !== "undefined"分支里调用setup(options)与hydrate()完成客户端恢复；SSR 侧则用otion/server的VirtualInjector收集样式并剔除未使用规则 - Gatsby：gatsby-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
新手常见问题
Q：otion 的运行时真的有那么小吗？A：是的项目定位就是"featherweight runtime"微型库，不做主题化、不做全局样式等重功能，用更小的包体积换更纯粹的原子化工作流。
Q：它和 Emotion、styled-components 有什么区别？A：otion 走原子化路线——每个属性是独立可复用的原子规则、类名按哈希稳定生成；而传统 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），仅供参考