# @alexpavlov/stylelint-config-rational-order 中文文档

规范地址：https://npmcn.com/package/%40alexpavlov/stylelint-config-rational-order/

版本：0\.2\.0
npm 元数据更新时间：2026-08-20T23:20:32.002Z
中文译文更新时间：2026-11-06T08:25:11.084Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40alexpavlov/stylelint-config-rational-order
原文对照：https://npmcn.com/package/%40alexpavlov/stylelint-config-rational-order/?lang=original
项目主页：https://github.com/AlexPavlof/stylelint-config-rational-order
源码仓库：https://github.com/AlexPavlof/stylelint-config-rational-order

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27.1 kB，16 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=20\.19\.0
- 运行依赖：0 个
- peer 依赖：stylelint ^17，stylelint-order ^8
- 首次发布：2024-09-29T17:20:55.063Z
- 最新版本发布：2026-08-20T23:20:31.665Z
- 近 30 天下载量：3856（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 1 个）

## 中文简介

Stylelint 配置,通过按顺序组合来排序相关的属性声明:定位,箱型,打字法,视觉,动画等.

## 安装

```sh
npm install @alexpavlov/stylelint-config-rational-order
```

也可以使用：`pnpm add @alexpavlov/stylelint-config-rational-order`、`yarn add @alexpavlov/stylelint-config-rational-order`、`bun add @alexpavlov/stylelint-config-rational-order`

## README

# @alexpavlov/stylelint-config-rational-order (英语)

[![NPM version](https://img.shields.io/npm/v/@alexpavlov/stylelint-config-rational-order?style=flat-square)](https://www.npmjs.com/package/@alexpavlov/stylelint-config-rational-order) [![NPM downloads](https://img.shields.io/npm/dt/@alexpavlov/stylelint-config-rational-order?style=flat-square)](https://www.npmjs.com/package/@alexpavlov/stylelint-config-rational-order) [![Build status](https://img.shields.io/github/actions/workflow/status/AlexPavlof/stylelint-config-rational-order/ci.yml?style=flat-square)](https://github.com/AlexPavlof/stylelint-config-rational-order/actions/workflows/ci.yml) [![License](https://img.shields.io/npm/l/@alexpavlov/stylelint-config-rational-order.svg?style=flat-square)](https://www.npmjs.com/package/@alexpavlov/stylelint-config-rational-order)

Stytlint 配置, 将相关的财产声明按顺序组合排序 :

1.  定位
2.  框型号
3.  类型
4.  视觉
5.  动画
6.  杂项

```css
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;

  /* Box Model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* Typography */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;

  /* Visual */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;

  /* Animation */
  transition: all 1s;

  /* Misc */
  user-select: none;
}
```

## 所需资源

|  | 版本 |
| --- | --- |
| 节点.js | `>=20.19.0` |
| `stylelint` | `^17` |
| `stylelint-order` | `^8` |

`stylelint` 财务报告和审定财务报表 `stylelint-order` 是同伴的依附关系——自己安装, 如下所示.

## 使用量

1.  添加 `stylelint`, (中文(简体) ), `stylelint-order` 和您的项目软件包 :

```bash
npm install --save-dev stylelint stylelint-order @alexpavlov/stylelint-config-rational-order
```

##### 或者,如果你喜欢纱线 而不是npm:

```bash
yarn add --dev stylelint stylelint-order @alexpavlov/stylelint-config-rational-order
```

2.  在 Stylelint 内的扩展数组末尾添加此软件包 配置( 例如. stylelintrc) :

```javascript
{
  "extends": [
    ...(rest of your stylelint config),
    "@alexpavlov/stylelint-config-rational-order"
  ]
}
```

此可共享配置相当于如下:

```json
{
  "plugins": [
    "stylelint-order",
    "@alexpavlov/stylelint-config-rational-order/plugin"
  ],
  "rules": {
    "order/properties-order": [],
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": false,
        "empty-line-between-groups": false
      }
    ]
  }
}
```

`"order/properties-order": []` 需要,而非装饰性: `plugin/rational-order` 以该规则名称报告警告,所以该条目让他们 严重。 如果您手动配置插件, 请保留它 .

因为它添加 `stylelint-order` 财务报告和审定财务报表 `@alexpavlov/stylelint-config-rational-order` 到插件并同时添加所需的规则,您在扩展此配置时不必亲自这样做.

## 可选选项/规则

#### 框式边框

定义该 **边框** 财产属于.

若为 `true` **边框** 属于 **框模式区域**。 。 。 . 默认值为 `false` (单位:千美元)**边框** 属于 **视觉部分**) (中文(简体) ).

#### 组之间的空行

若为 `true` 在组之间添加一行空行。 默认值为 `false`。 。 。 .

## 财务问题

我为什么要使用理性的顺序和组合,按类型而不是按字母顺序排序CSS属性?

两种方式的利弊都详细:

-   [快乐的波特和CSS勋章](https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec)
-   [“外部输入”——按重要性订购CSS属性](https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685)

## 贷项

-   [代码指南 by @ mdo](http://codeguide.co/)
-   [HTML 学院的代码指南](https://github.com/htmlacademy/codeguide)

## 常见问题

### @alexpavlov/stylelint-config-rational-order 是什么？

Stylelint 配置,通过按顺序组合来排序相关的属性声明:定位,箱型,打字法,视觉,动画等\.

### 如何安装 @alexpavlov/stylelint-config-rational-order？

在项目目录运行 npm install @alexpavlov/stylelint-config-rational-order，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：stylelint（^17）、stylelint-order（^8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alexpavlov/stylelint-config-rational-order 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/alexpavlov\_\_stylelint-config-rational-order 是否存在。

### @alexpavlov/stylelint-config-rational-order 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @alexpavlov/stylelint-config-rational-order 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @alexpavlov/stylelint-config-rational-order 可以商用吗？

@alexpavlov/stylelint-config-rational-order 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @alexpavlov/stylelint-config-rational-order 的下载量有多少？

根据 npm 官方下载统计，@alexpavlov/stylelint-config-rational-order 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,856 次，日均约 129 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @alexpavlov/stylelint-config-rational-order 还在维护吗？

最新版本 0\.2\.0 发布于 2026/08/21（2 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 1 个；首次发布于 2024/09/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。