CSSのプロパティ順序は、チームや案件ごとにルールが分かれやすいポイントです。
自分で意識して並び順をそろえることもできますが、毎回手作業で合わせるのは大変です。
結論からいうと、CSSプロパティの順番は Stylelint と stylelint-order を使ってLintで管理するのがおすすめです。
これにより、プロパティ順序のルールを設定ファイルとして残せるだけでなく、違反の検出や自動修正もしやすくなります。
この記事では、StylelintでCSSプロパティ順序を管理する考え方、stylelint-orderの導入方法、設定例、VS Codeでの使い方までわかりやすく解説します。
そもそもCSSプロパティをどのような順番で並べるか迷っている場合は、先に以下の記事を読むと整理しやすいです。
-
【CSS】プロパティの記述順序の決め方｜おすすめの並び順を解説
CSSを書いていて、「なんとなく書いたけど、あとから見返したら読みにくい…」と感じたことはありませんか？ CSSは自由度が高いぶん、同じ見た目でも書き方が人によって変わりやすく、プロパティの並び方がバ ...
もくじ
CSSプロパティの順番をLintで管理するメリット
CSSプロパティの順番は、絶対的な正解があるわけではありません。
ただし、案件やチームの中で並び順がばらつくと、コードレビューや保守のたびに読みづらさが出やすくなります。
- 並び順のルールをファイルとして残せる
- 人による書き方のぶれを減らせる
- レビュー時に順序の指摘を減らしやすい
- 自動修正できる設定なら手作業も減らせる
「ルールを決める」だけでなく、「Lintで強制する」ところまで持っていくと、運用がかなり安定しやすくなります。
PrettierではなくStylelintで管理する理由
コード整形というとPrettierを使う場面も多いですが、CSSプロパティの順番管理はStylelint系の方が向いています。
Prettierは主に改行やインデント、クォートなどの見た目を整える役割が中心です。
一方でStylelintは、CSSのルール違反やコーディング規約をチェックするLinterなので、プロパティ順序のような「チーム独自ルール」と相性が良いです。
コードの見た目を整える自動整形については、以下の記事でまとめています。
-
【VS Code】拡張機能で自動整形する方法｜保存時フォーマットの設定も解説
VS Codeでコードを書いていると、インデントや改行位置がばらついて見づらくなることがあります。 特にフリーランスや複数案件を行き来する働き方だと、現場が変わるたびにVS Codeの設定を見直す場面 ...
Stylelintとstylelint-orderとは？
Stylelintは、CSSのエラー検出やコーディング規約の統一に使えるLinterです。
stylelint-orderは、その中でも順序に関するルールを追加するためのプラグインです。
| ツール | 役割 |
|---|---|
| Stylelint | CSS全体のLintを行う本体 |
| stylelint-order | プロパティ順序などの order 系ルールを追加するプラグイン |
CSSプロパティの順序を管理したい場合は、Stylelint本体だけでなく、stylelint-orderもあわせて導入する必要があります。
Stylelintを導入する手順
まずはStylelint本体と、プロパティ順序を管理するための stylelint-order を導入します。
npm install -D stylelint stylelint-config-standard stylelint-order
続いて、プロジェクトルートにstylelint.config.mjsを作成します。
export defaultを使う場合は、拡張子を.mjsにしておくとモジュール形式が明確になり、環境差分で詰まりにくくなります。
/** @type {import('stylelint').Config} */
export default {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-order']
};
CSSプロパティ順序の設定例
たとえば、独自の順番でCSSプロパティを並べたい場合は、次のように設定できます。
/** @type {import('stylelint').Config} */
export default {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-order'],
rules: {
'order/properties-order': [
[
{
groupName: 'レイアウト・表示モード',
emptyLineBefore: 'never',
properties: [
'display',
'visibility',
'position',
'z-index',
'inset',
'top',
'right',
'bottom',
'left',
'float',
'clear'
]
},
{
groupName: 'Flex / Grid',
emptyLineBefore: 'always',
properties: [
'flex',
'flex-grow',
'flex-shrink',
'flex-basis',
'flex-flow',
'flex-direction',
'flex-wrap',
'justify-content',
'align-items',
'align-content',
'align-self',
'justify-self',
'order',
'grid',
'grid-template',
'grid-template-areas',
'grid-template-columns',
'grid-template-rows',
'grid-auto-flow',
'grid-auto-columns',
'grid-auto-rows',
'grid-area',
'place-items',
'place-content',
'gap',
'row-gap',
'column-gap'
]
},
{
groupName: 'ボックスサイズ',
emptyLineBefore: 'always',
properties: [
'box-sizing',
'aspect-ratio',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'inline-size',
'block-size'
]
},
{
groupName: '余白',
emptyLineBefore: 'always',
properties: [
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'margin-block',
'margin-inline',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'padding-block',
'padding-inline'
]
},
{
groupName: 'スクロール・オーバーフロー',
emptyLineBefore: 'always',
properties: [
'overflow',
'overflow-x',
'overflow-y',
'overflow-anchor',
'clip',
'resize'
]
},
{
groupName: 'リスト・テーブル・置換要素',
emptyLineBefore: 'always',
properties: [
'list-style',
'table-layout',
'border-collapse',
'object-fit',
'object-position',
'vertical-align'
]
},
{
groupName: '文字',
emptyLineBefore: 'always',
properties: [
'font',
'font-family',
'font-size',
'font-weight',
'font-style',
'font-variant',
'font-feature-settings',
'line-height',
'letter-spacing',
'text-align',
'text-indent',
'text-decoration',
'text-decoration-color',
'text-decoration-thickness',
'text-underline-offset',
'white-space',
'text-overflow',
'word-break',
'overflow-wrap',
'color'
]
},
{
groupName: '背景・境界線・装飾',
emptyLineBefore: 'always',
properties: [
'background',
'background-color',
'background-image',
'background-position',
'background-size',
'background-repeat',
'border',
'border-width',
'border-style',
'border-color',
'border-radius',
'outline',
'opacity',
'box-shadow',
'filter'
]
},
{
groupName: 'アニメーション・変化',
emptyLineBefore: 'always',
properties: [
'cursor',
'pointer-events',
'user-select',
'transform',
'transform-box',
'transform-style',
'backface-visibility',
'transition',
'animation'
]
},
{
groupName: '擬似要素・補助的なプロパティ',
emptyLineBefore: 'always',
properties: [
'content'
]
}
],
{
unspecified: 'bottomAlphabetical',
emptyLineBeforeUnspecified: 'always'
}
]
}
};
上記の設定では、指定したプロパティはグループごとの順番で並び、設定に含まれていないプロパティは末尾にアルファベット順で並びます。
そのため、最初からすべてのCSSプロパティを定義しなくても運用を始めやすいです。
contentプロパティの扱いについて
contentは、::beforeや::afterなどの擬似要素で使う特殊なプロパティです。
そのため、backgroundやborderなどと同じ「装飾」グループに入れても大きな問題はありませんが、気になる場合は最後の補助的なグループに分けて管理しても構いません。
実務では、ルールの厳密さよりも「チーム内で違和感なく統一できるか」の方が大切なので、運用しやすい場所に置くのがおすすめです。
Lintを実行する方法
まずは package.json に scripts を追加しておくと、毎回長いコマンドを入力せずに実行できて便利です。
lint:cssはCSSファイルをチェックするためのコマンド、lint:css:fixはチェックに加えて自動修正まで行うためのコマンドです。
{
"scripts": {
"lint:css": "stylelint \"**/*.css\"",
"lint:css:fix": "stylelint \"**/*.css\" --fix"
}
}
設定後は、次のコマンドでLintを実行できます。
npm run lint:css
自動修正まで行いたい場合は、次のコマンドを使います。
npm run lint:css:fix
なお、scripts を設定しない場合でも、npx で直接実行することは可能です。
npx stylelint "**/*.css"
自動修正したい場合は、次のように --fix を付けます。
npx stylelint "**/*.css" --fix
settings.json に入れる設定と stylelint.config.mjs に入れる設定の違い
settings.jsonとstylelint.config.mjsは、どちらも設定ファイルですが、役割は異なります。
ざっくりいうと、settings.jsonはVS Code側の動きを決める設定、stylelint.config.mjsはStylelint側のルールを決める設定です。
| 設定ファイル | 役割 | 主な内容 |
|---|---|---|
settings.json | VS Code側の動作設定 | 保存時に自動修正するか、拡張機能をどう動かすか など |
stylelint.config.mjs | Stylelint側のルール設定 | どのLintルールを使うか、プロパティ順序をどうするか など |
たとえば、保存時にStylelintの自動修正を実行したい場合は、VS Codeのsettings.jsonに設定を書きます。
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit"
}
}
一方で、CSSプロパティの順番や有効にするルールを決めたい場合は、stylelint.config.mjsに設定を書きます。
/** @type {import('stylelint').Config} */
export default {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-order'],
rules: {
'order/properties-order': [
[
{
groupName: 'レイアウト・表示モード',
properties: ['display', 'visibility', 'position']
}
]
]
}
};
つまり、VS Code上でどう動かすかはsettings.json、何をルールとしてチェックするかは stylelint.config.mjs と考えると整理しやすいです。
VS CodeでLintを動かす方法
VS Codeで使う場合は、拡張機能「Stylelint」（stylelint.vscode-stylelint）を入れておくと便利です。
保存時に自動修正したい場合は、VS Code側（settings.json）でコードアクションを設定します。
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit"
}
}
CSSやSCSSでエラー表示が重複する場合は、VS Code標準のCSS / SCSS検証をオフにする構成もあります。
{
"css.validate": false,
"scss.validate": false,
"less.validate": false
}
settings.jsonの開き方がわからない場合は、以下の記事を先に確認しておくとスムーズです。
-
【VS Code】settings.json の開き方｜ユーザー設定とワークスペース設定の違いも解説
VS Codeの設定を調整しようとしたとき、「settings.jsonはどこから開けばいいの？」と迷うことがあります。 自動整形やPrettierの設定を追加したいときも、設定画面ではなくJSONを ...
すべて自作しなくてもよい
プロパティ順序のルールは、必ずしもゼロから自作する必要はありません。
チームや案件によっては、既存の共有設定をベースにして運用した方が導入しやすいこともあります。
まずは既存ルールを使って始め、必要に応じて独自ルールへ寄せていく流れでも問題ありません。
SCSSまで管理したい場合
SCSSまで対象にしたい場合は、CSS向けの基本設定だけでは足りないことがあります。
その場合は、SCSS向けの共有設定や構文対応もあわせて検討すると整理しやすいです。
まずはCSSだけで運用を始めて、必要に応じて対象を広げていくのがおすすめです。
よくあるハマりどころ
Stylelint本体だけ入れていて順序チェックが動かない
プロパティ順序の管理にはstylelint-orderが必要です。
Stylelint本体だけでは、独自のプロパティ順序ルールまでは設定できません。
自動修正がVS Codeでは動かない
CLIの--fixでは直るのに、VS Code保存時では直らないことがあります。
その場合は、Stylelint拡張機能の設定やeditor.codeActionsOnSaveの内容を確認してみてください。
SCSSやVueなどでは追加設定が必要なことがある
SCSSなどのCSSライク言語をLintしたい場合は、対応する共有設定や構文設定が必要になることがあります。
設定ファイルの形式と書き方が合っていない
なお、stylelint.config.jsにexport defaultを書く場合は、Node.js側のモジュール設定の影響を受けることがあります。
記事どおりに進めるなら、stylelint.config.mjsを使う方がわかりやすいです。
まとめ
CSSプロパティの順番を統一したいなら、Stylelintとstylelint-orderを使ってLintで管理するのがおすすめです。
- プロパティ順序は手作業ではなくLintで統一した方が運用しやすい
- StylelintはCSSの規約チェック、stylelint-orderは順序ルール追加に向いている
order/properties-orderを使えば独自の順番を設定できるstylelint --fixで自動修正も行いやすい- VS Code拡張と組み合わせると日常運用しやすい
プロパティ順序に正解はありませんが、ルールを決めたなら、Lintで仕組み化しておくとかなり楽になります。