---
description: 样式编写优先使用 UnoCSS，必要时再写 style 标签
alwaysApply: true
---

# UnoCSS First（本仓库样式规则）

## 核心原则

- 默认优先使用 **UnoCSS 原子类**完成样式。
- 仅在 UnoCSS 难以清晰表达、复用困难、或需要兼容兜底时，才写 `<style>`（含 scoped）。

## 推荐优先使用 UnoCSS 的场景

- 布局与结构：`flex`、`grid`、定位、间距、尺寸、圆角、层级
- 常规视觉：文字颜色、普通背景色、边框、阴影、过渡
- 组件状态样式：hover/active/disabled 的常见状态类

## 可以改用 `<style>` 的场景（例外）

- 复杂选择器或嵌套层级关系，使用原子类会明显降低可读性
- 需要伪元素、复杂 keyframes、媒体查询细分、`@supports` 等
- 需要写浏览器兼容兜底（例如关键按钮渐变的实色兜底）
- 同一段长样式在多个页面复用，抽成语义化 class 更清晰

## 代码评审偏好

- 若 UnoCSS 能清楚表达，不新增手写 CSS
- 新增 `<style>` 时，附一行简短注释说明“为什么不用 UnoCSS”
- 避免“少量 Uno + 大量零散手写”混搭导致维护成本上升
