---
title: 样式方案
summary: "介绍 Ray 样式方案中 rpx 自适应单位、CSS Modules 文件命名规范及 750px 设计稿标准。"
tags: [Ray样式方案规范, CSS Modules文件命名约定, 驼峰式样式命名, 750rpx设计稿标准]
questions:
  - Ray 项目中 rpx 和 px 分别适合什么场景？
  - 样式文件为什么推荐使用 CSS Modules？文件名格式是什么？
  - 为什么推荐驼峰式命名样式名并避免嵌套写法？
  - 设计稿应该以多少像素为设计宽度？
  - 750rpx 和 100vw 的换算关系是什么？
---

# 样式方案

自适应样式单位 `rpx`，自动根据设备环境缩放。

> 关系：`750rpx` = `100vw`

绝对样式单位 `px`，在所有设备下表现一致。

## 样式文件

对于页面和组件级的样式，推荐使用 CSS Modules 的方案，能有效避免样式冲突问题。

规范规则如下：

- 文件名： `xxx.module.[css|less]`
- 模块化：一个页面或组件对应一个样式文件。

```
Home
├── index.module.css
└── index.tsx
```

## 样式规则

推荐使用驼峰式命名样式名，同时避免使用嵌套样式名。

推荐写法：

```less
// Good
.home {
  color: red;
}

.homeTitle {
  font-size: 48rpx;
}
```

不推荐写法：

```less
// Bad
.home {
  color: red;
  .title {
    font-size: 48rpx;
  }
}
```

## 设计稿

设计稿应以 750px 为设计宽度，能有效减少开发过程中单位的转换换算。