---
description: 微信小程序 WXSS 编写规范
globs: **/*.wxss
alwaysApply: false
---
# WXSS 编写规范

## 基本语法规范
- 使用 2 个空格进行缩进
- 选择器和属性名使用小写字母
- 属性值后必须加分号
- 颜色值使用小写字母，优先使用简写形式
- 0 值不需要单位，如 `margin: 0` 而非 `margin: 0px`

## 选择器规范
- 类名使用 kebab-case 格式，如 `.user-info`
- 避免使用 ID 选择器，优先使用类选择器
- 避免过深的选择器嵌套（不超过 3 层）
- 使用有意义的类名，体现元素的功能而非样式

## 布局规范
- 优先使用 Flexbox 进行布局
- 使用 `rpx` 单位进行响应式设计
- 合理使用 `box-sizing: border-box`
- 避免使用绝对定位，除非必要

## 尺寸单位
- 字体大小使用 `rpx`，参考设计稿 750px 宽度
- 边距和内边距使用 `rpx`
- 边框宽度使用 `px`（通常为 1px）
- 百分比用于相对布局

## 颜色和主题
- 使用 TDesign 提供的 CSS 变量
- 自定义颜色应定义为 CSS 变量
- 避免硬编码颜色值
- 支持深色模式时使用主题变量

## 字体规范
- 使用系统默认字体栈
- 字体大小遵循设计规范，常用尺寸：24rpx、28rpx、32rpx、36rpx
- 行高设置为字体大小的 1.4-1.6 倍
- 合理使用字重，避免过度使用粗体

## 组件样式
- 组件样式应当封装完整，避免依赖外部样式
- 使用 `externalClasses` 允许外部定制样式
- 避免样式污染，使用适当的选择器作用域
- 组件内部样式使用相对单位

## 动画和过渡
- 使用 CSS 过渡而非 JavaScript 动画
- 动画时长控制在 200-300ms
- 使用 `ease-out` 缓动函数
- 避免同时动画过多属性

## 响应式设计
- 使用 `rpx` 实现基本的响应式
- 考虑不同屏幕尺寸的适配
- 使用媒体查询处理特殊情况
- 测试在不同设备上的显示效果

## 性能优化
- 避免使用复杂的选择器
- 减少重绘和重排的样式属性
- 合理使用 `transform` 和 `opacity` 进行动画
- 避免使用 `!important`

## 代码组织
- 样式按功能模块组织
- 使用注释分隔不同的样式区块
- 公共样式提取到全局样式文件
- 保持样式文件的简洁和可读性

## TDesign 集成
- 优先使用 TDesign 提供的样式类
- 通过 CSS 变量定制主题
- 遵循 TDesign 的设计规范
- 避免覆盖组件库的核心样式