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