CSSプロパティの順番をStylelintで統一する方法｜設定例つき

Stylelintとstylelint-orderとは？

Stylelintは、CSSのエラー検出やコーディング規約の統一に使えるLinterです。

そしてstylelint-orderは、その中でも並び順に関するルールを追加するプラグインです。CSSプロパティの順序を管理したいなら、Stylelint本体に加えてstylelint-orderもあわせて導入します。

それぞれの詳しい仕様は、Stylelint公式ドキュメントとstylelint-order（GitHub）で確認できます。

PrettierとStylelintの違い

コード整形ではPrettierもよく使われますが、プロパティ順序の管理はStylelint系が向いています。

Prettierが整えるのは改行・インデント・クォートといった見た目の部分です。一方Stylelintは、ルール違反やコーディング規約をチェックするLinterなので、プロパティ順序のような独自ルールと相性がよいです。

コードの自動整形については、以下の記事でまとめています。

CSSプロパティの順番をStylelintで管理するメリット

プロパティの並び順に絶対の正解はありません。ただ、案件やチームで順序がばらつくと、レビューや保守のたびにコードが読みづらくなりがちです。

Stylelintで管理すると、次のようなメリットがあります。

Stylelintを導入する手順

まずは、使いたいプロジェクトのフォルダで、Stylelint本体とプロパティ順序を管理する stylelint-order をインストールします。

-Dは開発用のパッケージとしてインストールする指定です。Stylelintは開発中に使うツールなので、この形で問題ありません。

続いて、package.json があるフォルダに stylelint.config.mjs を作成します。export default を使うときは拡張子を .mjs にしておくと、モジュール形式がはっきりして、環境による読み込みエラーを避けられます。

まずは最小構成で試す

最初から細かいグループ分けを作り込む必要はありません。まずはこの最小構成でStylelintが正しく動くことを確認し、そのあと案件やチームのルールに合わせて調整していくと、つまずきにくくなります。

CSSプロパティ順序の設定例

プロパティの順番を管理するには、stylelint.config.mjs の rules に設定を追加します。すでに作成済みなら、そのファイルに追記してください。

まずはシンプルな形から見てみましょう。並べたい順にプロパティ名を配列で渡すだけでも動きます。書いていないプロパティは、unspecified: 'bottomAlphabetical' を指定しているので末尾にアルファベット順で並びます。

これだけでも運用を始められます。チームのルールが固まってきたら、次のようにグループごとに分けて、より細かく並び順を指定できます。groupName はグループの目印、emptyLineBefore: 'never' はグループ内に余計な空行を入れない指定です。

設定の最後にある unspecified: 'bottomAlphabetical' は、リストに書いていないプロパティを末尾にアルファベット順で並べる指定です。emptyLineBeforeUnspecified: 'always' を付けると、それらの前に必ず空行が1行入るので、「自分で順番を決めたプロパティ」と「それ以外」の境目が見分けやすくなります。

emptyLineBeforeやunspecifiedなど、指定できるオプションの一覧はproperties-orderのドキュメントにまとまっています。

contentプロパティの扱い

contentは、::beforeや::afterなどの擬似要素で使う特殊なプロパティです。backgroundやborderと同じ「装飾」グループに入れても問題ありませんが、気になる場合は最後の補助的なグループに分けても構いません。

実務ではルールの厳密さよりも「チーム内で違和感なく統一できるか」の方が大切なので、運用しやすい場所に置けば十分です。

Lintを実行する方法

Stylelintを実行しやすくするために、まず package.json の scripts にコマンドを追加します。lint:css はチェックのみ、lint:css:fix はチェックに加えて自動修正も行うコマンドです。

設定後は、次のコマンドでLintを実行できます。

順序がルールと違うと、違反した行が次のように一覧で出ます。

src/button.css
 2:3  ✖  Expected "display" to come before "color"      order/properties-order
 4:3  ✖  Expected "padding" to come before "background"  order/properties-order

2 problems (2 errors, 0 warnings)

自動修正まで行いたい場合は、次のコマンドを使います。

実行すると、設定した順番どおりにプロパティが並び替わります。

プロパティの値はそのままで、並び順だけが入れ替わります。手で並べ替えていたころのケアレスミスが無くなるのが、いちばんありがたいところです。

scripts を用意していない場合でも、npx で直接実行できます。まず試したいときに向いています。

自動修正したい場合は、--fix を付けます。

VS Codeで保存時にStylelintを動かす方法

VS Codeで保存時にStylelintを動かすには、拡張機能「Stylelint」（stylelint.vscode-stylelint）を入れておきます。

保存時に自動修正する設定

保存時に自動修正したい場合は、VS Code側の settings.json に次のコードアクションを設定します。

標準のCSS検証と重複するときは

VS Code標準のCSSチェックとStylelintが同時に動くと、同じ箇所に警告が二重で出ることがあります。気になる場合は、標準のCSS検証をオフにすると表示を整理できます。

settings.json の開き方がわからない場合は、以下の記事を先に確認しておくとスムーズです。

導入時の注意点

プロパティ順序のルールは、必ずしもゼロから自作する必要はありません。チームや案件によっては、既存の共有設定をベースにした方がスムーズなこともあります。まずは既存ルールで運用を始め、必要に応じて独自ルールへ寄せていく流れでも問題ありません。

また、すでにCSSファイルが多い案件で、いきなり広範囲に --fix をかけると、差分が大きくなってレビューの負担が増えます。最初は新規ファイルだけに適用したり、対象ディレクトリを絞ったりして、段階的に進める方が安全です。特に複数人で保守している案件では、導入タイミングと適用範囲を先に決めておくと、混乱を減らせます。

SCSSまで管理したい場合

SCSSも対象にしたい場合は、CSS向けの基本設定だけでは足りないことがあります。stylelint-config-standard-scss を入れれば、SCSSの構文解析（postcss-scss）も含めて面倒を見てくれます。CSSとSCSSが混在する案件では、最初からこちらを入れておくと設定をやり直さずに済みます。

Stylelint導入でよくある質問

Stylelint本体だけでプロパティの順序チェックは動きますか？

動きません。プロパティ順序の管理には stylelint-order が必要です。Stylelint本体だけでは、独自の順序ルールまでは設定できません。npm install -D stylelint-order を追加して、設定ファイルの plugins に 'stylelint-order' を指定してください。

CLIでは直るのにVS Codeの保存時に自動修正されません

CLIの --fix では直るのに、VS Codeの保存時では直らないことがあります。その場合は、Stylelint拡張機能（stylelint.vscode-stylelint）が入っているか、editor.codeActionsOnSave に "source.fixAll.stylelint": "explicit" が設定されているかを確認してみてください。

設定ファイルは .js と .mjs のどちらにすべきですか？

export default を使うなら .mjs が確実です。stylelint.config.js に export default を書くと、Node.js側のモジュール設定の影響を受けて読み込めないことがあります。拡張子を stylelint.config.mjs にしておくと、モジュール形式が明確になり詰まりにくくなります。

まとめ

CSSプロパティの順番を統一したいなら、Stylelintとstylelint-orderを使ってLintで管理するのがおすすめです。

プロパティ順序に正解はありません。筆者はレイアウト→ボックス→余白→文字→装飾という大きな流れだけ決めて、細かいプロパティは bottomAlphabetical に任せる形に落ち着きました。全部を手で並べようとすると設定のメンテが続かないので、ざっくり決めて残りはLintに任せるくらいが、ちょうどいいです。