Stylelintのプロパティ並び順config（recess-order / rational-order）を比較して選ぶ

2026年11月6日 2026年11月6日

akinori

概要

Stylelint でCSSを整える際、「プロパティの宣言順」をチーム内で揃えたくなる場面があります。margin が上にあったり下にあったり、position と display の順がファイルごとにバラバラだと、差分レビューのたびに本質でない箇所に目が行きます。

この順序を機械的に強制するための共有configとして代表的なのが、stylelint-config-recess-order と stylelint-config-rational-order の2つです。どちらも内部的には stylelint-order プラグインの order/properties-order ルールを、あらかじめ定義済みの順序で設定したものです。本記事では思想・設定方法・メンテ状況を比較し、どう選ぶかの指針をまとめます。

そもそも何を解決するものか

stylelint-config-standard などのベースconfigは、構文エラーや重複セレクタは検出しますが、プロパティの並び順は関知しません。並び順を扱うのは別プラグイン stylelint-order の役割で、今回の2つのconfigは「stylelint-order に渡す順序リストをどう定義するか」という思想の違いだと捉えると整理しやすくなります。

並び順を強制するメリットは主に3つです。

レビュー時の視線の負荷が下がる（どこに何が書いてあるか予測できる）
--fix で自動整列できるため、人間が手で並べ替える必要がない
書き手ごとの流儀が混ざらない

2つのconfigの思想

recess-order

Twitter 由来のCSS Lintツール「Recess」の並び順を踏襲したものです。Bootstrap のソースでも採用されてきた並び方で、実務での露出が多いのが特徴です。大まかなグルーピングは次の流れです。

Positioning（position, top, z-index）
Box Model（display, flex, width, margin, padding）
Typography（font, line-height, color, text-align）
Visual（background, border, border-radius, box-shadow）
Misc / Animation（transition, animation, cursor）

「レイアウトに関わるものを上、見た目の装飾を下」という直感に沿った順序で、現在も活発にメンテされている点が大きな強みです。現行の安定版である Stylelint 17 系にもピア依存が追従しています。

rational-order

「論理的（rational）なグルーピング」を掲げたconfigです。基本的な大分類は recess-order と似ていますが、6グループに整理し、グループ間に空行を入れる運用と相性よく設計されています。グループの区切りを視覚的に見せたい人に好まれます。

ただし運用上の注意があります。本家の stylelint-config-rational-order は npm の最終公開が約7年前で、実質的にメンテナンスが止まっています。そのため現行の Stylelint（17系）で使おうとすると、ピア依存の整合が取れず素直に動かないことがあります。現在は @1024pix/stylelint-config-rational-order などスコープ付きのフォークが実運用で使われているのが実情で、思想を採りたい場合もフォークの採用を前提に考えることになります。

環境（前提バージョン）

本記事は執筆時点の安定版である Stylelint 17 系を前提にしています（16 系でも基本的な考え方は同じです）。v17 は CommonJS を廃し ESM 専用になっているため、ビルド環境や設定ファイルの読み込み方式が v16 以前と異なる点に注意してください。共有configを導入する際は、そのconfigのピア依存が利用中の Stylelint メジャーに追従しているかを必ず確認します。

インストールと設定

recess-order

npm install --save-dev stylelint stylelint-config-standard stylelint-config-recess-order

.stylelintrc.json:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ]
}

stylelint-config-recess-order は stylelint-order を依存に含むため、別途プラグイン宣言は不要です。

rational-order

前述のとおり本家はメンテが止まっているため、ここでは実運用されるフォークを例に挙げます。

# 本家（最終公開が約7年前・動作保証なし）
npm install --save-dev stylelint stylelint-config-rational-order

# 実運用されるフォーク例
npm install --save-dev stylelint @1024pix/stylelint-config-rational-order

.stylelintrc.json（フォークを使う場合）:

{
  "extends": ["@1024pix/stylelint-config-rational-order"]
}

rational-order 系は内部で stylelint-config-recommended と stylelint-order を束ねているため、単体でもひとまず動きます。構文系ルールを厚くしたい場合は stylelint-config-standard を併記します。いずれにせよ、利用するパッケージが現行の Stylelint に対応しているかは導入前に確認してください。

整列イメージ

整列前:

.card {
  color: #333;
  position: relative;
  padding: 16px;
  display: flex;
  z-index: 10;
  background: #fff;
  top: 0;
}

--fix 後（両config共通のイメージ）:

.card {
  position: relative;
  top: 0;
  z-index: 10;
  display: flex;
  padding: 16px;
  color: #333;
  background: #fff;
}

大分類レベルでは両者の結果はよく似ます。差が出るのは「Box Model 内で border をどこに置くか」といった細部で、日常のCSSではほとんど意識せずに済みます。

動作確認

# 並び順の違反を検出
npx stylelint "src/**/*.css"

# 自動整列
npx stylelint "src/**/*.css" --fix

CIでは --fix を付けず「整列済みであること」をゲートにし、ローカルでは lint-staged などで --fix を回す構成が扱いやすいです。

比較と選定の指針

観点	recess-order	rational-order
思想	Recess / Bootstrap 由来の実績ある順序	グループを明示した論理的な順序
空行でのグループ区切り	標準では強調しない	区切りを見せる運用と好相性
単体での完結度	ベースconfigと併用前提	recommended を内包し単体でも動く
メンテ状況	活発に更新され、現行 Stylelint（17系）に追従	本家はほぼ停止（最終公開約7年前）。要フォーク検討
導入しやすさ	迷いが少ない	フォーク選定とオプションの把握が必要

メンテナンス性と迷いの少なさを重視するなら recess-order が無難です。現行の Stylelint に追従しやすく、Bootstrap 文脈に慣れた人が多いためチーム合意も取りやすいです。

グループ区切りを視覚的に効かせたい、論理分類を明示したいなら rational-orderが候補になります。ただし本家は実質メンテ停止のため、導入するなら @1024pix などのフォークを選び、そのパッケージが利用中の Stylelint メジャーに対応しているかを必ず確認しておきたいところです。どちらにも馴染めない場合、空行区切り前提の stylelint-config-clean-order や stylelint-config-idiomatic-order も選択肢に入ります。

注意点

どのconfigを選んでも、チームで1つに固定して --fix を自動化することが本質です。順序の「正解」よりも「揺れないこと」の価値が大きいです。
既存プロジェクトに後から入れると初回のdiffが巨大になります。順序整列だけの独立コミットに分け、レビュー対象から切り離すと混乱が少ないです。
Stylelint 本体や stylelint-order のメジャー更新で挙動が変わることがあるため、ロックファイルで固定しておきます。特に v17 は ESM 専用化という大きな変更が入っているため、config 側が未対応だと動かないことがあります。

まとめ

両configとも実体は stylelint-order の順序プリセットであり、大分類の思想は近い。
迷いの少なさ・メンテ追従を取るなら recess-order、グループ区切りの明示を取るなら rational-order（ただし本家は停止しておりフォーク前提）。
最重要は「1つに決めて自動整列を回すこと」。順序そのものの優劣は実務上ほぼ誤差。

Sources: stylelint - npm / Major Changes in Stylelint v17 (Zenn) / @1024pix/stylelint-config-rational-order - npm / stylelint-config-rational-order - npm

＼最新情報をチェック／