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 的设计规范
• 避免覆盖组件库的核心样式