# @1024pix/stylelint-config-rational-order 中文文档

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

版本：0\.1\.3
npm 元数据更新时间：2026-08-21T13:06:27.188Z
中文译文更新时间：2026-11-06T03:23:56.968Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：31.9 kB，21 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2023-09-25T08:26:41.627Z
- 最新版本发布：2024-03-25T10:01:51.011Z
- 近 30 天下载量：5713（2026-10-04 至 2026-11-02，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

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

## 安装

```sh
npm install @1024pix/stylelint-config-rational-order
```

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

## README

# 样式lint - 配置 - 合理化顺序

[![NPM version](https://img.shields.io/npm/v/stylelint-config-rational-order.svg?style=flat-square)](https://www.npmjs.com/package/stylelint-config-rational-order) [![NPM downloads](https://img.shields.io/npm/dt/stylelint-config-rational-order.svg?style=flat-square)](https://www.npmjs.com/package/stylelint-config-rational-order) [![Build status](https://img.shields.io/travis/constverum/stylelint-config-rational-order.svg?style=flat-square)](https://travis-ci.org/constverum/stylelint-config-rational-order) [![License](https://img.shields.io/npm/l/stylelint-config-rational-order.svg?style=flat-square)](https://www.npmjs.com/package/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;
}
```

## 使用量

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

```bash
npm install --save-dev stylelint stylelint-order stylelint-config-rational-order
# or, if you prefer yarn over npm:
yarn add --dev stylelint stylelint-order stylelint-config-rational-order
```

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

```javascript
{
  "extends": [
    // "stylelint-config-standard",
    "stylelint-config-rational-order"
  ]
}
```

此共享配置包含以下内容:

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

因为它添加 `stylelint-order` 财务报告和审定财务报表 `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)

## 常见问题

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

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

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

在项目目录运行 npm install @1024pix/stylelint-config-rational-order，或使用 pnpm add / yarn add / bun add。

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

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

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

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

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

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

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

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

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

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