CSSを書いていて、「なんとなく書いたけど、あとから見返したら読みにくい…」と感じたことはありませんか？
CSSは自由度が高いぶん、同じ見た目でも書き方が人によって変わりやすく、プロパティの並び方がバラバラだと修正やレビューがしづらくなります。
結論からいうと、CSSのプロパティ順序に絶対の正解はありません。ただし、チームやプロジェクト内で一貫したルールを決めることはとても重要です。
迷った場合は、意味ごとに整理しやすいグループ分類順から始めるのがおすすめです。
この記事では、CSSのプロパティの記述順序について、代表的な並べ方のルール、メリット・デメリット、実務での選び方、注意点までわかりやすく解説します。
もくじ
CSSのプロパティ順序に正解はある？
まず前提として、CSSのプロパティ順序に唯一の正解はありません。
ただし、順番を毎回気分で変えてしまうと、あとから見返したときに探しにくくなり、修正漏れやレビューのしづらさにつながります。
そのため、重要なのは「どの順番が絶対に正しいか」ではなく、「どの順番で統一するか」です。
個人開発でもチーム開発でも、ルールを決めておくとコードの見通しがかなり良くなります。
プロパティ順序をルールとして決めるだけでなく、実際にLintで統一したい場合は以下の記事も参考になります。
-
【Stylelint】CSSプロパティの順番をLintで統一する方法｜stylelint-orderの設定例も解説
CSSのプロパティ順序は、チームや案件ごとにルールが分かれやすいポイントです。 自分で意識して並び順をそろえることもできますが、毎回手作業で合わせるのは大変です。 結論からいうと、CSSプロパティの順 ...
CSSのプロパティ順序が重要な理由
CSSは自由度が高いため、同じ見た目でもさまざまな書き方が可能です。
しかし、以下のような理由からプロパティの順序を統一することが重要です。
| 可読性の向上 | 同じルールで書かれていれば、自分のコードも他人のコードも追いやすくなります。 |
|---|---|
| 保守性の向上 | 必要なプロパティを探しやすくなり、修正漏れを防ぎやすくなります。 |
| レビューしやすい | 並びがそろっていると差分が見やすくなり、レビューの負担が減ります。 |
| チーム開発で統一しやすい | 誰が書いても似た形になるため、属人化しにくくなります。 |
| 意図しない混在を防ぎやすい | 関連するプロパティを近くに置くことで、設定の抜け漏れや重複に気づきやすくなります。 |
CSSプロパティの記述順序のルール3パターン
代表的なルールは、以下の3パターンです。
私は実務でグループ分類順を採用することが多いですが、プロジェクトによってはアルファベット順や独自ルールが使われることもあります。
1. グループ分類順
もっともよく使われる方法のひとつで、プロパティの意味ごとにグループ分けして並べる方法です。
なお、グループの分け方そのものに絶対の正解があるわけではありません。
大切なのは、チームやプロジェクト内で同じ考え方にそろえることです。
以下は一例ですが、私は次のような順番で整理することが多いです。
/* 1. レイアウト・表示モード */ display visibility position z-index inset top right bottom left float clear /* 2. Flex / Grid */ 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 /* 3. ボックスサイズ */ box-sizing aspect-ratio width min-width max-width height min-height max-height inline-size block-size /* 4. 余白 */ 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 /* 5. スクロール・オーバーフロー */ overflow overflow-x overflow-y overflow-anchor clip resize /* 6. リスト・テーブル・置換要素 */ list-style table-layout border-collapse object-fit object-position vertical-align /* 7. 文字 */ 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 /* 8. 背景・境界線・装飾 */ background background-color background-image background-position background-size background-repeat border border-width border-style border-color border-radius outline content opacity box-shadow filter /* 9. アニメーション・変化 */ cursor pointer-events user-select transform transform-box transform-style backface-visibility transition animation
実際に書くと、次のようになります。
.card {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
margin-top: 24px;
padding: 16px;
font-size: 16px;
line-height: 1.6;
color: #333;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
transition: box-shadow 0.3s;
}
すべてのプロパティを毎回使う必要はありませんが、よく使うものをあらかじめ整理しておくと、ルールとして運用しやすくなります。
このような並び順を手作業ではなく仕組みで統一したい場合は、Stylelintでルール化しておくと管理しやすくなります。
-
【Stylelint】CSSプロパティの順番をLintで統一する方法｜stylelint-orderの設定例も解説
CSSのプロパティ順序は、チームや案件ごとにルールが分かれやすいポイントです。 自分で意識して並び順をそろえることもできますが、毎回手作業で合わせるのは大変です。 結論からいうと、CSSプロパティの順 ...
2. アルファベット順
プロパティ名をA〜Z順に並べる方法です。
意味で分類するのではなく、機械的なルールでそろえるため、ツールや自動整形との相性が良いのが特徴です。
.selector {
background: #eee;
border: 1px solid #ccc;
color: #333;
display: block;
margin: 20px;
padding: 10px;
}
メリット：機械的に統一しやすい、誰が書いても同じ順番になりやすい、差分が安定しやすい
デメリット：意味のつながりが見えにくく、読むときに少し追いづらいことがある
3. 独自ルール
「グループ分類順をベースにしつつ、よく使うプロパティを先に置く」など、自分やチームに合わせた順序を作る方法です。
既存のプロジェクト文化に合わせやすい一方で、ルールが曖昧だと人によって書き方が変わりやすくなります。
独自ルールを採用する場合は、ルールを明文化して共有することが大切です。
メリット：現場に合わせやすい、柔軟に運用できる
デメリット：ルールが共有されていないと属人化しやすい
どの記述順序を選ぶべきか
「結局どれを選べばいいのか」で迷った場合は、以下のように考えると選びやすくなります。
| 方式 | 向いているケース | メリット | 注意点 |
|---|---|---|---|
| グループ分類順 | 手作業でCSSを読むことが多い現場 | 意味のまとまりで追いやすい | 人によって分類が少しぶれやすい |
| アルファベット順 | 自動整形や厳密な統一を重視する現場 | 機械的にそろえやすい | 意味のまとまりは見えにくい |
| 独自ルール | 既存ルールや文化があるチーム | 現場に最適化しやすい | 共有不足だと属人化しやすい |
迷ったら、まずはグループ分類順かアルファベット順のどちらかを選び、プロジェクト全体で統一するのがおすすめです。
個人開発では自分が読みやすいルールでも問題ありませんが、チーム開発では「自分が書きやすい」よりも「みんなが追いやすい」ことを優先する方がうまくいきます。
CSSプロパティの順序を決めるときの注意点
プロパティ順序を決めるときは、次の点も意識しておくと実務で困りにくくなります。
- 順序そのものに絶対の正解はない
- 大切なのはチームやプロジェクト内で一貫していること
- shorthand と個別プロパティの扱いを事前に決めておく
- 順序だけでなく、命名ルールや設計もそろえるとさらに読みやすくなる
shorthandと個別プロパティの扱いをそろえる
たとえばmarginとmargin-top、backgroundとbackground-colorのように、まとめて書けるものと個別指定できるものがあります。
この扱いが人によってバラバラだと、順序以前にコードが読みにくくなります。
「基本はshorthandを使う」「個別指定が必要なときだけ分ける」など、運用ルールもあわせて決めておくと安定します。
順序だけ整っていても読みやすくなるとは限らない
プロパティ順序が整っていても、クラス名がわかりにくかったり、セレクタが複雑すぎたりすると、結局読みづらいCSSになります。
そのため、実務ではプロパティ順序だけでなく、命名ルールやファイル構成も含めて整えることが大切です。
まとめ
CSSのプロパティ順序は地味に見えますが、コードの読みやすさや保守性に大きく影響するポイントです。
- CSSのプロパティ順序に絶対の正解はない
- 大切なのは、チームやプロジェクト内でルールを統一すること
- 迷ったら、意味ごとに整理しやすいグループ分類順から始めるのがおすすめ
- 自動整形や機械的な統一を重視するなら、アルファベット順も有力
まずは小さなルールからでもよいので、プロジェクト内で「どう並べるか」を決めてみてください。
後から読む人が理解しやすいCSSを意識するだけで、コードの見通しはかなり良くなります。
HTMLやJavaScriptの命名ルール、属性の順番については、以下の記事で解説しています。
-
【備忘録】HTMLとJavaScriptの命名ルールと属性の順番【現役エンジニアの実例】
HTMLやJavaScriptの命名規則に迷うこと、ありませんか？ 本記事では、現役エンジニアである私が実際に使っている「命名ルール」と「属性の並び順」について、備忘録としてまとめました。 CSSのプ ...