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），仅供参考