---
title: Configure Style
---

# Configure Style

The value of a responsive style automatically increases or decreases to adapt to the device environment. Unit: `rpx`.

> Conversion: `750 rpx` = `100 vw`

The value of an absolute style is the same for all devices. Unit: `px`.

## Style file

For the styles of pages and components, we recommend that you use CSS Modules to avoid style conflicts.

Follow these rules:

- File name: `xxx.module.[css|less]`.
- Modules: manages each page or component in a style file.

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

## Style rules

We recommend that you name each style in camel case and prevent a nested style name.

Recommended:

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

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

Not recommended:

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

## Design draft

The design width in your design draft must be 750 pixels, so you can save your efforts in data conversion.